Vue.js模板、指令
模板语法概述
1、如何理解前端渲染？
把数据填充到HTML标签中，一般我们使用Ajax将数据从后台查询出，结合模板（）
2、前端渲染方式
2.1、原生js拼接字符串
使用字符串拼接的形式拼接到html标签中，例如在js中拼接'
giao
'。 缺点：代码不规范，维护难度高。
2.2、使用前端模板引擎
与字符串拼接相比，代码明显规范了很多，它拥有自己的一套模板语法规则，程序员都遵循 这套规则，代码维护性就提高了很多。
缺点：没有专门提供事件机制。需要渲染后使用js增加事件。
2.3、使用vue特有的模板语法
1)、插值表达式
2)、指令
3)、事件绑定（处理）
4)、属性绑定
5)、样式绑定
6)、分支循环结构
3、指令
3.1、什么是指令？
什么是自定义属性？指令的本质就是自定义属性。指令的格式：以v开始（比如：v-cloak）。这取决于 vue的作者是怎么设计的，我们只需要使用即可。
3.2、v-cloak指令用法
插值表达式存在一个‘闪动’的问题，如何解决该问题呢？我们引入了v-cloak指令。解决该问题的原理：先 隐藏，替换好值之后显示最终的值。
1、才css中提供样式。
[v-cloak]{
display:none;
}
2、在插值表达式所在的标签中添加v-cloak指令。
<div v-cloak>{{msg}}</div>
原理：先通过样式隐藏，然后在内存中进行渲染，替换好之后再显示最终效果。
3.3、v-text指令
如果要在标签中插入文本值，可以使用v-text标签，它比插值表达式更加简洁，同时不存在闪动问题。但是插值表达式可以使用运算符，它不可以。
<div v-text="msg"></div>
此时，msg就会被解析为纯文本，例如msg的值为hello world编译后源码如下
<div>hello world</div>
3.4、v-html指令
填充HTML片段，但是存在安全问题，即容易受到XSS攻击，本地网站内部数据可以使用，来自第三方的数据不可用。不是很推荐使用。
<div v-html="title1"></div>
此时，title1就会被解析为html标签，例如title1的值为<h1>hello world</h1>编译后源码如下
<div><h1>hello world</h1></div>
3.4、v-pre指令
如果想在页面是直接展示{{msg}}，而不是插值表达式解析的结果，就可以使用v-pre指令，它可以显示原始信息，跳过编译过程。使用方法如下。
<div v-pre>{{msg}}</div>
4、响应式指令
什么是响应式？
html中的响应式:屏幕尺寸的变化导致样式的变化
数据的响应式：数据的变化导致页面的变化，比如在控制台中修改了vm的属性，页面的数据也发生变 化。
什么是数据绑定？
数据绑定就是将数据填充到标签中，使用插值表达式进行的数据绑定默认就是响应式的。
4.1、v-once指令
如果某个属性只希望它编译一次，之后不再具有响应式功能，就可以使用v-once标签。即只在编译的时 候具有响应式。如果响应的数据后续不需要修改可以使用v-once，这样可以提高性能。
5、双向数据绑定
什么是双向数据绑定？
我们修改了vm中的属性其相应到页面，这叫数据的相应，如果修改了页面上的属性也可以修改vm中的数据，此时就是双向的数据绑定，即修改了任意一方就会影响另一方的数据。
5.1、v-model指令
使用v-model指令可以实现双向的数据绑定
<input type='text' v-model = 'uname'/>
插值表达式默认支持双向数据绑定。