Vue总结（1）：Vue模板语法

1、模板语法

（1）官网解释：

（1）Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
（2）在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

（2）总结：Vue模板语法有2大类

1.插值语法：

• 1）功能：用于解析标签体内容。

• 2）写法：{{xxx}}，其中xxx是js表达式，可以直接读取到data中的所有属性。

2.指令语法：

• 1）功能：用于解析标签（包括：标签属性、标签体内容、绑定事件等）。

• 2）举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
• 3）备注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举个例子。

（3）指令语法

（1）v-text：设置标签的文本值
（2）v-html：设置标签的innerHTML
（3）v-on：为元素绑定事件，可以简写为"@+事件"，如"v-on:click"可以简写为"@click"
（4）v-show：根据表达式的真、假，切换元素的显示与隐藏
（5）v-if：根据表达式的真、假，操纵DOM元素
（6）v-bind：设置元素的属性，如：src、title、class等
（7）v-for：根据数据生成列表结构
（8）v-model：获取和设置表单元素的值，为数据的双向绑定指令

（4）说明：v-show、v-if的区别

一、相同点：

（1） v-show和v-if都能控制元素的显示和隐藏

二、（2）不同点：

（1） 实现的本质方法不同：

• 1）v-show本质就是通过设置css中的display设置为none，控制隐藏
• 2）v-if是动态的向DOM树内添加或者删除DOM元素

（2） 编译的区别：

• 1）v-show其实就是在控制css
• 2）v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

（3） 编译的条件：

• 1）v-show都会编译，初始值为false，只是将display设为none，但它也编译了
• 2）v-if初始值为false，就不会编译了

（4） 性能的区别：

• 1）v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
• 2）注意点：因为v-show实际是操作display:" "或者none，当css本身有display：none时，v-show无法让显示
• 3）总结：如果要频繁切换某节点时，使用v-show。如果不需要频繁切换某节点时，使用v-if