命令式编程和声明式编程
命令式编程关注的是 “how to do”；
声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；
模板语法
v-once用于指定元素或者组件只渲染一次。
<h2 v-once>
{{message}}:{{counter}}
<div>{{tips}} : {{counter}}</div>
</h2>
<button @click="addAction">+</button>
<button @click="reduceAction">-</button>
初始化时渲染一次，当数据发生变化时，元素或者组件以及其所有的子元素不会发生变化；
该指令可以用于性能优化；
·v-text用于更新元素的文本内容，效用不是很大。
<div v-text="tips"></div>
// 等价于
<div>{{tips}}</div>
v-html用于解析内容本身是 html的文本
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签。
<h2 v-pre>
{{message}}:{{counter}}
<div>{{tips}} : {{counter}}</div>
</h2>
<button @click="addAction">+</button>
<button @click="reduceAction">-</button>
v-pre指令
v-cloak用于保持在元素上直到关联组件实例结束编译。
v-cloak有待进一步解释
v-bind用于将值插入到模板内容中，绑定一个或多个属性值，或者向另一个组件传递props值。
<a v-bind:href="'https://www.baidu'">百度一下</a>
<!-- 语法糖 -->
<a :href="'https://www.baidu'">百度一下</a>
v-bind有一个对应的语法糖，也就是简写方式。在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
v-on用于绑定事件。
<button v-on:click="addAction">+</button>
<!-- 语法糖 -->
<button @click="reduceAction">-</button>
<!-- 鼠标移动事件 -->
<div @mousemove="mousemoveAction">鼠标移动</div>
<!-- 元素绑定多个事件 -->
<div v-on="{click: btnClickAction, mousemove: mousemoveAction}">元素绑定多个事件</div>
v-on有一个对应的语法糖，也就是简写方式。在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
v-on支持修饰符，修饰符相当于对事件进行了一些特殊的处理：
.stop-调用event.stopPropagation()。
.prevent-调用event.preventDefault()。
.capture-添加事件侦听器时使用capture 模式。
.self-只当事件是从侦听器绑定的元素本身触发时才触发回调。p.{keyAlias}-仅当事件是从特定键触发时才触发回调。
.once-只触发一次回调。
.left-只当点击鼠标左键时触发。
.right-只当点击鼠标右键时触发。
.middle-只当点击鼠标中键时触发。
.passive-{ passive: true }模式添加侦听器
样式绑定
绑定class 和 绑定style
绑定class/style有三种方式：
1、普通的类名绑定
2、对象语法
3、数组语法
<!-- 1、普通的类名绑定 -->
<div :class="className">class绑定</div>
<!-- 2、对象绑定 -->
<div :class="{classNameA：true, classNameB：false}">class对象绑定</div>
<div :class="{classNameA：isActive}">class对象绑定</div>
<!-- 从prop或是computed中获取 -->
<div :class="classObj">class对象绑定</div>
<!-- 从methods中获取方法 -->
<div :class="getClassObj()">class对象绑定</div>
<!-- 1、直接绑定数组 -->
<div :class="[classNameA, classNameB]">class数组绑定</div>
<!-- 2、数组绑定,也可使用三元运算符-->
<div :class="[classNameA, isActive ? classNameB : '']">class数组绑定</div>
<!-- 3、数组绑定,也可使用对象语法-->
<div :class="[classNameA, {classNameB：isActiv}]">class数组绑定</div>
<!-- style对象绑定 -->
<div :style="styleObj">style对象绑定</div>
<div :style="{color: 'red', fontSize: size + 'px'}">style对象绑定</div>
<!-- style数组绑定 -->
<div :style="[styleObjA, styleObjB]">style数组绑定</div>
template元素
template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来，可以使用template来对多个元素进行包裹，有点类似于小程序中的block。
条件渲染
1、v-if
2、v-else-if
3、v-else
4、v-show
vue3.x中v-if vs v-show的区别
1、v-if支持template，v-show是不支持template。
2、v-if可以和v-else一起使用，v-show不可以和v-else一起使用，是一个单一语法。
3、v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行。v-if为false不会在DOM上渲染。
4、元素需要在显示和隐藏之间频繁的切换，那么使用v-show；如果不会频繁的发生切换，那么使用v-if；
列表渲染
1、v-for
v-for支持的类型
数组型数据
1、一个参数： "itemin array";
2、二个参数： "(item, index) in array";
对象型数据
1、一个参数： "value in object";
2、二个参数： "(value, key) in object";
3、三个参数： "(value, key, index) in object";
你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
<div v-for="item of array"></div
v-for中key的作用是什么？
1、key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；
2、如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
3、而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
数组更新检测
变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组
变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
网友评论