【Vue】模板语法，插值、指令、过滤器、计算属性及监听属性（内含面试题及毕设等实用案例）上篇

2023-09-19 00:13:28

一、引言

1、什么是模板语法？

Vue 的模板语法是一种用于在 HTML 中声明式地渲染 Vue 组件的语法。它基于 HTML，并通过特定的模板语法扩展了 HTML。Vue 使用了一种称为 “Mustache” 语法的模板插值来绑定数据到 HTML 元素上。

在 Vue 的模板语法中，你可以使用双大括号（{{}}）将数据绑定到 HTML 元素上，这样数据的值会被动态地替换到相应的位置。

下面我会以语法的介绍和案例为大家做一个示范

二、插值

1、文本

 {{msg}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>文本</h2>
    <p>{{msg}}</p>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'hello Vue.js'
            };
        }
    })
</script>
</html>

2、 html

使用v-html指令用于输出html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>html</h2>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                htmlstr: '<h3 style="color:red;">这是一个v-html指令html代码</h3>'
            };
        }
    })
</script>

</html>

3、属性

          HTML属性中的值应使用v-bind指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>vue中的属性</h2>
    <a v-bind:href="hrefstr">4399</a>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                hrefstr: 'https://www.4399.com/'
            };
        }
    })
</script>

</html>

他在我这里是一个链接，因为我使用了<a>标签,这样它可以做一个跳转

4、表达式

          Vue提供了完全的JavaScript表达式支持

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>表达式</h2>
    表达式:{{number + 1}}<br>
    截取：{{str.substring(0, 4).toUpperCase()}}<br>
    三元：{{ok ? 'yes' : 'no'}}

</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                number: 59,
                str: 'Java、python、php、C++',
                ok: false,
            };
        }
    })
</script>

</html>

       

5、class、style绑定

          使用方式：

                v-bind:class="expression"

                v-bind:style="expression"

          expression的类型：字符串、数组、对象

这里做了一个class、style一起的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
    .f30 {
        font-size: 30px;
        color: red;
    }
</style>
<body>
<div id="app">
    <h2>class、style绑定</h2>
    <b :class="msg3">class、style绑定</b>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg3: 'f30'
            };
        }
    })
</script>

</html>

三、指令、动态参数

指的是带有“v-”前缀的特殊属性

核心指令：

         （v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-mode）

1、v-if|v-else|v-else-if

根据其后表达式的bool值进行判断是否渲染该元素

        他们只能是兄弟元素

                 v-else-if上一个兄弟元素必须是v-if

                 v-else上一个兄弟元素必须是v-if或者是v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-if|v-else|v-else-if</p>
    分数：<input v-model="score"/>
    <div v-if="score>=90">大神</div>
    <div v-else-if="score>=80 && score<90">优秀</div>
    <div v-else-if="score>=70 && score<80">优秀</div>
    <div v-else-if="score>=60 && score<70">良好</div>
    <div v-else="score<60">还需努力</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                score: 78
            };
        }
    })
</script>

</html>

2、v-show

与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码:style="display:none"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-if|v-else|v-else-if</p>
    分数：<input v-model="score"/>
    <div v-if="score>=90">大神</div>
    <div v-else-if="score>=80 && score<90">优秀</div>
    <div v-else-if="score>=70 && score<80">优秀</div>
    <div v-else-if="score>=60 && score<70">良好</div>
    <div v-else="score<60">还需努力</div>

    <p>v-show</p>
    <div v-show="score>90">v-show-成为大神的人</div>
    <div v-if="score>90">v-if-成为大神的人</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                score: 78
            };
        }
    })
</script>

</html>

只有当我们的分数达到了90以上就会显示出来

3、v-for

类似JS的遍历：

                          遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

                         遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>v-for</p>
    下拉框：
    <select v-model="hobbySelected">
        <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
    </select><br>
    复选框：
    <div v-for="h in hobby">
        <input :value="h.id" type='checkbox'/>{{h.name}}
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                hobby: [
                    {id: "1", name: "唱"},
                    {id: "2", name: "跳"},
                    {id: "3", name: "rap"},
                    {id: "4", name: "篮球"}
                ]
            };
        }
    })
</script>

</html>

4、动态参数

  从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

  <a v-bind:[attrname]="url"> ... </a>

  同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

 <button v-on:[evname]="dt">点击事件</button>

  注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>动态参数</h3>
    <button @click="dt">点一下</button>
    事件：<input v-model="evname"/>
    <button v-on:[evname]="dt">点击事件</button>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                evname: "click"
            };
        },
        methods: {
            dt() {
                alert("还得是你，说点就点");
            }
        }
    })
</script>
</html>

四、过滤器

1、局部过滤器

new Vue({

 filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

<!-- 在两个大括号中 -->

{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联    

        {{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

        {{ message | filterA('arg1', arg2) }}

注4：js定义一个类

        function Stu(){};

        Stu.prototype.add(a,b){};//添加一个新的实例方法

        Stu.update(a,b){};//添加一个新的类方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>局部过滤器基本使用</h3>
    {{msg}}<br>
    {{msg | singleA}}
    <h3>局部过滤器串行使用</h3><br>
    {{msg | singleA | singleB}}
    <h3>局部过滤器传参</h3><br>
    {{msg|param(3,5)}}
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'python、Java、php、C++'
            };
        },
        methods: {
            handle() {
                alert("触发事件");
            }
        },
        filters: {
            'singleA': function (val) {
                return val.substring(0, 6);
            },
            'singleB': function (val) {
                return val.substring(1, 5);
            },
            'param': function (val, start, end) {
                return val.substring(start, end);
            }
        }
    })
</script>
</html>

2、全局过滤器

Vue.filter('filterName', function (value) {

 // value 表示要过滤的内容

});

2.1、配置data.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

    <script src="date.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h3>全局过滤器</h3>
    {{time}}<br>
    {{time | fmtDateFilter}}
</div>
</body>
<script type="text/javascript">
    // 全局过滤器
    Vue.filter('fmtDateFilter', function (value) {
        return fmtDate(value);
    });
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                time: new Date()
            };
        }
    })
</script>
</html>

五、计算属性及监听属性

1、计算属性

   计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

   computed:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    单价：<input v-model="price">
    数量：<input v-model="num">
    总价：<input v-model="count">
</div>
</body>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data() {
            return {
                price: 79,
                num: 1
            }
        },
        computed: {
            count: function () {
                return this.price * this.num
            }

        }
    })
</script>
</html>

  

2、监听属性

   监听属性 watch，我们可以通过 watch 来响应数据的变化

   watch:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性及监听属性</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <p>监听属性</p>
    千米：<input v-model="km"/>
    米：<input v-model="m"/>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new Vue({
        el: '#app',
        data() {
            return {
                km: 2,
                m: 2000
            };
        },
        watch: {
            // v指的是m变量
            m: function (v) {
                this.km = parseInt(v) / 1000;
            },
            // v指的是km变量
            km: function (v) {
                this.m = parseInt(v) * 1000;
            }
        }
    })
</script>

</html>

3、购物车案例

利用监听属性和计算属性利用来计算前端的一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        h1, p {
            text-align: center;
        }
    </style>
</head>
<body>
<h1>购物车</h1>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>商品名</th>
            <th>商品价格</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>花西币</td>
            <td>{{hxbDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="hxb"/>&nbsp;
            </td>
            <td>{{hxbTotal}}</td>
        </tr>
        <tr>
            <td>眉笔</td>
            <td>{{mbDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="mb">&nbsp;
            </td>
            <td>{{mbTotal}}</td>
        </tr>
        <tr>
            <td>口红</td>
            <td>{{khDj}}</td>
            <td>
                &nbsp;<input type="number" v-model="kh">&nbsp;
            </td>
            <td>{{khTotal}}</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align: right;">总计</td>
            <td>{{total}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    // 绑定边界	ES6具体体现
    new
    Vue({
        el: '#app',
        data() {
            return {
                hxbDj: 79,
                mbDj: 10,
                khDj: 299,
                hxb: 1,
                mb: 1,
                kh: 1,
            };
        },
        computed: {
            hxbTotal() {
                return this.hxbDj * this.hxb;
            },
            mbTotal() {
                return this.mbDj * this.mb;
            },
            khTotal() {
                return this.khDj * this.kh;
            },
            total() {
                return this.hxbTotal + this.mbTotal + this.khTotal;
            }
        }

因为我用的输入框的类型是number类型的所以我就没用按钮的点击事件++--了

更多推荐

《机器学习核心算法》分类算法 - 朴素贝叶斯 MultinomialNB

「作者主页」：士别三日wyx「作者简介」：CSDNtop100、阿里云博客专家、华为云享专家、网络安全领域优质创作者「推荐专栏」：小白零基础《Python入门到精通》朴素贝叶斯1、朴素贝叶斯API2、朴素贝叶斯算法实际应用2.1、获取数据集2.2、划分数据集2.3、特征归一化2.4、贝叶斯算法处理并评估3、常见问题4、

大数据-Hive

Hive简介Hive是基于Hadoop的一个【数据仓库工具】，可以将结构化和半结构化的数据文件映射为一张数据库表，并提供简单的sql查询功能。因为比直接用MapReduce开发效率更高，Hive的主要作用就是用来做离线数据分析。本质是：将HQL转化成MapReduce程序特点可扩展性Hive可以自由的扩展集群的规模，一

Mybatis深度解析：从起源到现代应用的全景视角

🌷🍁博主猫头虎带您GotoNewWorld.✨🍁🦄博客首页——猫头虎的博客🎐🐳《面试题大全专栏》文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》学会IDEA常用操作，工作效率翻倍~💐🌊《100天精通Golang(基础入门篇）》学会Golang语言，畅玩云原生，走遍大

C语言天花板——指针(初阶)

🌠🌠🌠大家在刚刚接触C语言的时候就肯定听说过，指针的重要性以及难度等级，以至于经常“谈虎色变”，但是今天我来带大家走进指针的奇妙世界。🎇🎇🎇一、什么是指针🤔指针理解的两个要点：1️⃣指针是内存中一个最小单元的编号，也就是地址2️⃣平常口语中说的指针，通常指的是指针变量，是用来存放地址的变量数据存储在内存中

Java基于SpringBoot的藏区特产销售系统的研究与实现

今天为大家带来的是基于Java+SpringBoot+Vue的藏区特产销售系统，大家有兴趣的可以看一下博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W+,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌文章目录1.简介2.主要技术3功能分析4系统分析5

RabbitMQ 几种模式

一、HelloWorld模式在这一部分中，我们将用Java编写两个程序。发送单个消息的生产者和接收消息并打印出来的消费者。模型如下所示：在下图中，“P”是我们的生产者，“C”是我们的消费者。中间的框是一个队列RabbitMQ代表使用者保留的消息缓冲区。1.1生产者1.1.1添加依赖<!--指定jdk编译版本--><bu

Weblogic SSRF 漏洞复现

SSRF实例WeblogicSSRF到GetShell​Weblogic中存在一个SSRF漏洞，利用该漏洞可以发送任意HTTP请求，进而攻击内网中redis、fastcgi等脆弱组件。测试环境搭建编译及启动测试环境sudodockercomposeup-d访问http://10.9.75.58:7001/console

网络爬虫-----爬虫的分类及原理

目录爬虫的分类1.通用网络爬虫：搜索引擎的爬虫2.聚焦网络爬虫：针对特定网页的爬虫3.增量式网络爬虫4.深层网络爬虫通用爬虫与聚焦爬虫的原理通用爬虫：聚焦爬虫：爬虫的分类网络爬虫按照系统结构和实现技术，大致可分为4类，即通用网络爬虫、聚焦网络爬虫、增量网络爬虫和深层次网络爬虫。1.通用网络爬虫：搜索引擎的爬虫比如用户在

基于Java+SpringBoot+Vue前后端分离美食烹饪互动平设计和实现

博主介绍：✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻精彩专栏推荐订阅👇🏻不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题

关于单片机的分频定时器的记录

记录一内部时钟：对于单片机的频率原来一直不太明白，现在在学习进行记录：主频：以一个72M的STM32单片机作为主频为例子，这个72M主频说得是一秒钟产生72000000（七千两百万）个脉冲或周期，就是一秒钟振荡七千两百万次。分频对于分频来说，实际就是相当于间接降低这个主频，减少这个震荡次数，比如我分频系数为72，那么我

Git从入门到起飞(详细)

Git从入门到起飞Git从入门到起飞什么是Git？使用git前提(注册git)下载Git在Windows上安装Git在macOS上安装Git在Linux上安装Git配置Git配置全局用户信息配置文本编辑器创建第一个Git仓库初始化仓库拉取代码添加文件到仓库提交更改推送Git基本操作查看提交历史比较文件差异撤销更改分支管

热文推荐
  1. 隔山打牛：金融大崩溃

    当2004-2006年美联储主席格林斯潘在任期的末尾一鼓作气把联邦利率从1%拉高到5%，然后把美联储主席的位子交给继任者伯南克的时候，没有人意识到接下来将要发生何等巨变。图：美国联邦利率伯南克把利率稳定在5.3%附近的高位一年左右时间，直到2007年年中。美股从2003年底开始的牛市，一直狂飙到2007年底。标普500

  2. 【数据仓库设计基础1】关系数据模型理论与数据仓库Inmon方法论

    文章目录一.关系数据模型中的结构1．关系2．属性3．属性域4．元组5.关系数据库6．关系表的属性7．关系数据模型中的键二.关系完整性1．空值（NULL）2．关系完整性规则3．业务规则4．关系数据库语言三.规范化四.关系数据模型与数据仓库关系模型被广泛应用于数据处理和数据存储，尤其是在数据库领域，现在主流的数据库管理系统

  3. HTML5的新特性有哪些？

    HTML5是近年来Web开发标准最巨大的飞跃。与以前的版本不同，HTML5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画，以及同计算机的交互都被标准化。HTML5在以前浏览器发展的基础上对标记进行了简化。另外，HTML5中对标记从语法上也进行了分类。(

  4. nextTick 解析

    🎬岸边的风：个人主页🔥个人专栏:《VUE》《javaScript》⛺️生活的理想，就是为了理想的生活!目录JS执行机制#运行机制nextTickqueueJobandqueuePostFlushCbqueueFlushflushJobs为什么要nextTick总结看完是不是有一堆问号？我们从中找出来产生问号的关键词

  5. 详细解释HiveSQL执行计划

    一、前言HiveSQL的执行计划描述SQL实际执行的整体轮廓，通过执行计划能了解SQL程序在转换成相应计算引擎的执行逻辑，掌握了执行逻辑也就能更好地把握程序出现的瓶颈点，从而能够实现更有针对性的优化。此外还能帮助开发者识别看似等价的SQL其实是不等价的，看似不等价的SQL其实是等价的SQL。可以说执行计划是打开SQL优

  6. 分布式任务处理

    1.分布式任务调度对一个视频的转码可以理解为一个任务的执行，如果视频的数量比较多，如何去高效处理一批任务呢？1、多线程多线程是充分利用单机的资源。2、分布式加多线程充分利用多台计算机，每台计算机使用多线程处理。方案2可扩展性更强。方案2是一种分布式任务调度的处理方案。什么是分布式任务调度？我们可以先思考一下下面业务场景

  7. 排序(希尔、快速、归并排序)

    文章目录1.排序的概念及其运用2.插入排序3.选择排序文章内容1.排序的概念及其运用1.1排序的概念排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。稳定性：假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变，即在原序列中，r[i

  8. Mybatis常见面试题总结

    梳理面试过程中Mybatis相关的常见问题。为保证知识点覆盖，参考了《Mybatis从入门到精通》、《深入浅出Mybatis技术原理与实战》、《Mybatis技术内幕》等书籍。Mybatis简介Mybatis是一款优秀的持久层框架(ORM框架)，它支持自定义SQL、存储过程以及高级映射。Mybatis免除了几乎所有的J

  9. 2023 Google 开发者大会：Web平台新动向

    目录前言一、OpeninWordPressplayground二、WebGPU三、新的核心Web指标INP四、Webview1、CustomTabs2、JavaScriptEngine五、Passkeys六、ViewTransitionsAPI七、GoogleChrome开发者工具优化1、覆盖HTTP的响应标头2、改变