模板语法及虚拟DOM和Diff算法

使用模板语法可以将DOM和底层组件实例的数据绑定在一起

在底层的实现中，Vue将模板编译成虚拟DOM渲染函数

Vue模板语法有2大类：

插值语法：
- 功能：用于解析标签体内容
- 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）
- 举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性
- Vue中有很多的指令，且形式都是：v-????

1.插值语法

如果我们希望把数据显示到模板（template）上,就需要Mustache”语法 (双大括号) 的文本插值
Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式
当data中的数据发生改变时，对应的内容也会发生更新

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

        <div id="app">
            <!-- 1.mustache的基本使用 -->
            <h2>{{message}} - {{message}}</h2>
            <!-- 2.是一个表达式 -->
            <h2>{{counter * 10}}</h2>
            <h2>{{ message.split(" ").reverse().join(" ") }}</h2>
            <!-- 3.也可以调用函数 -->
            <h2>{{getReverseMessage()}}</h2>
            <!-- 4.三元运算符 -->
            <h2>{{ isShow ? "哈哈哈": "" }}</h2>
            <button @click="toggle">切换</button>

            <!-- 错误用法 -->
            <!-- {{var name = "abc" }}  赋值语句 -->
            <!-- <h2>{{var name = "abc"}} </h2>
			<h2>{{ if(isShow) {  return "哈哈哈" } }} </h2> -->
        </div>

        <script src="https://unpkg.com/vue@next"></script>
        <script>
            const App = {
                data() {
                    return {
                        message: "Hello World",
                        counter: 100,
                        isShow: true
                    }
                },
                methods: {
                    getReverseMessage() {
                        return this.message.split(" ").reverse().join(" ");
                    },
                    toggle() {
                        this.isShow = !this.isShow;
                    }
                }
            }

            Vue.createApp(App).mount('#app');
        </script>
    </body>
</html>

2.指令

指令是带有 v- 前缀的特殊 attribute，Vue 提供了许多内置指令

指令 attribute 期望为一个 JavaScript 表达式（v-for和v-on是例外）

v-once

v-once用于指定元素及其子元素或者组件只渲染一次

当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过，可优化性能

如果是子节点，也是只会渲染一次：

v-text

作用：向其所在的节点中渲染文本内容

与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

v-html

作用：向指定节点中渲染包含html结构的内容

与插值语法的区别：

v-html会替换掉节点中所有的内容，{{xx}}则不会

v-html可以识别html结构

严重注意：v-html有安全性问题！！！！

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

条件渲染

在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了

Vue提供了下面的指令来进行条件判断：

v-if

v-else

v-else-if

v-show

v-if、v-else、v-else-if

v-if、v-else、v-else-if用于根据条件来渲染某一块的内容，条件接受为表达式

这些内容只有在表达式条件为true时，才会被渲染出来

并且v-if是惰性的

当条件为true时，才会真正渲染条件块中的内容

当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉

由于v-if是一个指令，所以必须将其添加到一个元素上

但是我们有时候需要切换多个不同分组的元素而不希望在外面的包裹一个不必要的元素进行渲染

这时候我们可以使用template元素

template元素可以当做不可见的包裹元素，在v-if上使用的时候，最终template不会被渲染出来

v-show

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件

但是v-show是不支持template以及和v-else一起使用

本质的区别是：

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换

v-if当条件为false时，其对应的元素压根不会被渲染到DOM中

所以如果我们的需要在显示和隐藏之间频繁的切换，那么使用v-show

如果不会频繁的发生切换，那么使用v-if

v-pre

n v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签

跳过不需要编译的节点，加快编译的速度

v-cloak

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-bind的绑定属性

前面的一系列指令主要是将值插入到模板内容中

但是除了内容需要动态来决定外，某些属性我们也希望动态来绑定

比如动态绑定a元素的href属性

比如动态绑定img元素的src属性

动态绑定元素的类名和样式

v-bind可以使我们动态地绑定一个或多个 attribute，或一个组件 prop 到表达式

预期：any | Object

绑定class

绑定class有三种方式：

字符串

适用于类名不确定，要动态获取

对象语法

适用于要绑定的样式个数确定、名字也确定，但要动态决定用不用

数组语法

适用于要绑定的样式个数不确定、名字也不确定

字符串写法

对象语法

数组语法

绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式

CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

绑定class有两种方式：

对象语法

数组语法

对象语法

数组语法

:style 的数组语法可以将多个样式对象应用到同一个元素上

动态绑定属性

在某些情况下，我们属性的名称可能也不是固定的

前端我们无论绑定src、href、class、style，属性名称都是固定的

如果属性名称不是固定的，我们可以使用 :[属性名]=“值” 的格式来定义

这种绑定的方式，我们称之为动态绑定属性

绑定一个对象

如果我们希望将一个对象的所有属性，对应绑定到元素上的所有属性

我们可以直接使用 v-bind 绑定一个对象

v-on绑定事件

在前端开发中，我们很多时候需要监听用户发生的事件，比如点击、拖拽、键盘事件等等与用户进行交互

这时候就可以使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名

事件的回调需要配置在methods对象中，注意不要写箭头函数

我们可以使用v-on来监听点击的事件

参数传递

当通过methods中定义方法，以供@click调用时，需要注意参数问题

@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

修饰符

v-on支持修饰符，修饰符相当于对事件进行了一些特殊的处理

.stop - 调用 event.stopPropagation()，阻止事件冒泡（常用）

.prevent - 调用 event.preventDefault()，阻止默认事件（常用）

.capture - 添加事件侦听器时使用 capture 捕获模式

.self - 只有event.target是当前操作的元素时才触发事件

.passive 事件的默认行为立即执行，无需等待事件回调执行完毕 @wheel.passive="handler"

.once - 只触发一次回调，事件只触发一次（常用）

.{keyAlias} - 仅当事件是从特定键触发时才触发回调

.left - 只当点击鼠标左键时触发

.right - 只当点击鼠标右键时触发

.middle - 只当点击鼠标中键时触发

v-for列表渲染

我们往往会从服务器拿到一组数据，并且需要对其进行渲染

这个时候我们可以使用v-for来完成

v-for的基本格式是 "item in 数组"：

数组通常是来自data或者prop，也可以是其他方式

item是我们给每项元素起的一个别名，这个别名可以自定来定义

如果需要数组索引，可使用 "(item, index) in 数组"；

当然v-for也支持遍历对象和数组

类似于v-if，你可以使用 template 元素来包裹循环渲染一段包含多个元素的内容，不使用div

3.数组更新检测和v-for的key

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

v-for中的key

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性

key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes

如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法

而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素