VUE 模板语法
1、差值语法
VUE使用 {{ }}（"差值语法"）的形式将数据渲染到页面上，数据是响应式的。
<div>{{msg}}</div>2、指令
- 什么是指令
指令的本质就是自定义属性
指令的格式：以v-开头（比如：v-cloak）
- v-cloak指令
先看一个小例子：以下代码比较简单，在浏览器刷新的时候我们的眼速可能跟不上，是直接显示"Hello World"，其实不然，如果你在调试窗口把浏览器的加载速度设置为0.5倍你会发现，界面先是显示{{msg}}，然后再变为我们想要的 "Hello World"。
（1）差值表达式存在问题："闪动"。
代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 ，当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>
</body>（2）如何解决差值语法的闪动问题：使用v-cloak指令
第一步：提供样式，在css中加入 [v-cloak] { display:none }
第二步：在差值表达式所在的标签添加v-cloak指令
<style type="text/css">
[v-cloak]{
display:none;
}
</style>
<body>
<div id="app" v-cloak>
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>
</body> （3）原理：先通过样式隐藏内容，然后在内存中进行值的替换，换好之后再显示最终的值
数据绑定指令
以上的v-cloak指令仅仅是解决差值表达式的"闪动"问题，并没有什么实际的业务。接下来我们来了解下有业务场景的几个指令。
- v-text ： 填充纯文本
v-text 指令和差值表达式的效果一样，但有一点不同的是，v-text不会存在闪动问题，所以从用户体验的角度，v-text更合适一些，而且xian更简洁，不用加v-cloak指令。
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>
</body>- v-html ：填充html内容
v-html 指令是填充html片段的，他展示的是浏览器解析后有样式的内容，而不是纯文本，这就是它和v-text的区别。
此外，该指令也存在一定的风险，官网也给出了建议，容易导致XSS攻击，只在可信内容上使用v-html，永远不要用在客户提交的内容上
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='msg2'></div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World',
msg2:'<h1>Say Hi~</h1'
}
});
</script>
</body>- v-pre ：填充原始信息，跳过编译过程
从以上的案例中我们已经知道<div>{{msg}}</div> 会 显示msg属性的值。如果我有个需求，就是{{msg}}作为字符串显示在界面上，而不是表达式。这时v-pre就发挥作用了。
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='msg2'></div>
<div v-pre>{{msg}}</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World',
msg2:'<h1>Say Hi~</h1'
}
});
</script>
</body>3、数据响应式
- 什么是数据响应式？
简单来说就是当数据改变时，页面的内容随着改变。数据来驱动页面的改变，而不需要做其他操作（比如改代码或者刷新页面）；
- 什么是数据绑定？
将数据填充到对应的标签中。用指令或差值表达式进行的数据绑定默认都是数据响应式，当改变数据的时候，页面会自动随之变化，而无需刷新页面。
- v-once指令：只编译一次，显示内容之后不再具有响应式能力
我们都知道，vue框架之所以有响应式的功能是因为它不断的去监听属性，当某个属性发生变化时，立即响应，然后展现在界面上。这样的话肯定对性能的消耗比较大，如果有些值显示之后就不再变化了或用户不想让它再改变了，那就没必要一直监听，然后解析编译了。这样对性能有很大的提升。v-once指令的作用就帮我们解决了这个问题，因为它只编译一次。
如下图，当vm.msg2 的值改为'java'后，然而界面并没有做出响应。
<body>
<div id="app">
<div>{{msg}}</div>
<div v-once>{{msg2}}</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World',
msg2:'Hello World',
}
});
</script>
</body>- 双向数据绑定
以上知识，我们已经知道将数据填充到页面的标签里边展示，这个过程是单向的，从数据到页面。但是现在的web应用都是比较复杂的肯定离不开与用户的交互， 这时我们就要用到双向数据绑定。
什么是双向数据绑定？
当我们在网页里填充信息时，比如：表单输入，当我们向某个输入框更新数据的时候，它会影响到数据的变化。所以由之前的模型数据变化影响到界面变化，到现在用户输入数据影响到模型数据的变化，这就是所谓的交互。所以现在我们要同时实现这2种场景；
v-model 指令 实现数据双向绑定
v-model指令帮我们实现双向数据绑定，接下来看个例子：
<body>
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World',
}
});
</script>
</body>
当我修改模型数据的时候，会导致界面的改变，如下图：同样，当我们在界面改变值之后，模型数据也会随之改变，如下图：
- 回顾MVVM设计思想
从上一章我们简单了解了下MVVM的原理，看完数据双向绑定后，现在是不是有了更深一层的了解呢？接下来为了巩固下知识，回过头再看仔细分析下 MVVM的设计思想。
M （Model） 数据层 Vue 中 数据层 都放在 data 里面
V （View视图） Vue 中 view 即 我们的HTML页面
VM （View-Model） 控制器将数据和视图层建立联系，vm 即 Vue 的实例 就是 vm
接下来用一张图来形象的表达出vue在MVVM设计模式中扮演的什么角色。
vue框架所扮演的角色如中间的媒婆一样，view和model是没办法直接联系到一起的，两者之间要想进行交互，必须要经过媒婆。那是通过哪种方式来进行关联的呢？
当用户在界面输入数据的时候，用到了向右的箭头，也就是DOM Listeners（事件监听），当界面输入的时候通过事件监听来改变model的数据，这一个方向v-model指令帮我们做了。这个指令的底层用到了事件，后续我们再慢慢研究，现在先了解大概。所以这个方向是通过事件监听的方式实现的。
那么数据模型改变影响到了视图的改变，用到了向左的箭头，也就是Data binding（数据绑定）， 我们以上所学的指令 v-text、 v-html 包括差值表达式它们所做的工作都是数据绑定，就是把数据填充到界面元素上。
上一篇：Vue入门教程（一）之基本使用