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