VUE入门教程（二）之模板语法（指令）
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入门教程（一）之基本使用
下一篇：Vue入门教程（三）之模板语法(事件)
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126563.html
starterknow