Vue.js 指令 v-html v-cloak v-pre v-once
指令(Directives)是特殊的带有前缀v-的特性。指令的值限定为绑定表达式,指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上
HTML:
<divid="test01"><pv-if="greeting">Hello!</p></div>
这里,v-if指令将根据表达式greeting值得真假 删除/插入p元素
JS:
varvm1=newVue({el:'#test01',data:{greeting:false}});
当greeting取值为false时,查看页面效果和控制台
当greeting取值为true时,查看页面效果和控制台
这里需要注意的是,v-if="greeting"不能用于根元素之上,也就是说必须用于某一元素的子元素之上,否则,控制台就会报错"[Vue warn]: v-if="greeting" cannot be used on an instance root element."
查看错误示例:
HTML:
<pv-if="greeting">Hello!</p>
JS:
varvm=newVue({el:'p',data:{greeting:true}});
控制台错误提示:
有些指令可以在其名称后面带一个”参数“(Argument),中间放一个冒号隔开。例如:v-bind指令用于响应地更新HTML特性
HTML:
<aid="test02"v-bind:href="url">v-bind链接</a>
这里href是参数,它告诉v-bind指令将元素的href特性跟表达式url的值绑定
JS:
varvm2=newVue({el:'#test02',data:{url:'http://cn.vuejs.org/'}});
v-on指令用于监听DOM事件
HTML:
<divid="test03"><p>`message`</p><buttonv-on:click="reverseMessage">ReverseMessage</button></div>
JS:
varvm3=newVue({el:'#test03',data:{message:'颠倒字体顺序'},methods:{reverseMessage:function(){//console.log(this)this指代div#test03this.message=this.message.split('').reverse().join('')}}});
v-model指令实现双向数据绑定
这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向数据绑定,指的就是在JS实例中的data与其渲染的dom元素上的内容保持一致,二者任何一个被改变,另一个也会相应的更新为相同的内容,这是通过属性访问器实现的。
HTML:
<divid="test04"><p>`message`</p><inputtype="text"v-model="message"></div>
JS:
varvm4=newVue({el:'#test04',data:{message:'双向数据绑定'}});
v-for列表渲染,用作循环遍历,类似ng中的ng-repeat
HTML:
<divid="test05"><ul><liv-for="todointodos">`todo`.`text`</li></ul></div>
JS:
varvm5=newVue({el:'#test05',data:{todos:[{text:'LearnJavaScript'},{text:'LearnVue.js'},{text:'LearnAngular.js'}]}});
再来两个综合的例子回顾下以上几个指令的用法
HTML:
<divid="zongHe"><inputtype="text"v-model="newTodo"v-on:keyup.enter="addTodo"><ul><liv-for="todointodos"><span>`todo`.`text`</span><buttonv-on:click="removeTodo($index)">X</button></li></ul></div>
JS:
varvm=newVue({el:'#zongHe',data:{newTodo:'',todos:[{text:'addsometodos'}]},methods:{addTodo:function(){vartext=this.newTodo.trim();if(text){this.todos.push({text:text}),this.newTodo=''}},removeTodo:function(index){this.todos.splice(index,1)}}});
HTML:
<formid="demo"><!--text--><p><inputtype="text"v-model="msg">`msg`</p><!--checkbox--><p><inputtype="checkbox"v-model="checked">{{checked?"yes":"no"}}</p><!--radiobuttons--><p><inputtype="radio"name="picked"value="one"v-model="picked"><inputtype="radio"name="picked"value="two"v-model="picked">`picked`</p><!--select--><p><selectv-model="selected"><option>one</option><option>two</option></select>`selected`</p><!--multipleselect--><p><selectv-model="multiSelect"multiple><option>one</option><option>two</option><option>three</option></select>`multiSelect`</p><p><pre>data:{{$data|json2}}</pre></p></form>
JS:
vardemoVm=newVue({el:'#demo',data:{msg:'hi!',checked:true,picked:'one',selected:'two',multiSelect:['one','three']}});
查看页面截图效果:
v-text
v-text 指令可以更新元素的文本内容,文本内容既可以放在 双大括号标签里面,也可以通过 v-text 放在标签内部。区别是放在 v-text 里面在页面加载时不会看到 双大括号 闪烁
示例代码:
<divid="app"><p>`msg`</p><hr><pv-text="msg"></p></div><scriptsrc="//cdn.bootcss.com/vue/1.0.26/vue.js"></script><script>varvm=newVue({el:'#app',data:{msg:'页面上有双大括号闪烁吗?'}})</script>
页面刚加载时:(用户会看到双大括号标签)
页面加载完毕:
v-html
v-html 指令可以更新元素的innerHTML,也就是说可以解析并执行HTML代码,与{` `}三大括号标签功能一致。
注意:不建议在网站上直接动态渲染任意HTML 片段,很容易导致XSS***。
<divid="app"><pv-html="msg"></p></div><scriptsrc="//cdn.bootcss.com/vue/2.0.0/vue.js"></script><script>varvm=newVue({el:'#app',data:{msg:'<strong>HelloWorld!</strong>'}})</script>
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
简单说,就是防止页面未加载完成时,显示双大括号标签,我们在打开Vue页面时,经常看到类似的界面
用户看到 `msg` 是非常不好的一种体验,因此,我们可以借助 v-cloak指令解决这个问题
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>[v-cloak]{display:none;}</style></head><body><divid="app"v-cloak><inputv-model="msg"><br>`msg`</div><scriptsrc="//cdn.bootcss.com/vue/2.0.0/vue.js"></script><script>varvm=newVue({el:'#app',data:{msg:'HelloWorld!'}})</script></body></html>
页面刚刷新:(页面是一片空白,什么都没有,也看不到双大括号标签在页面闪烁)
页面加载完毕:
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
这个就完全类似 {{*msg}}标签,直接看一段官网提供的示例代码,此处不单独举例
<!--单个元素--><spanv-once>Thiswillneverchange:`msg`</span><!--有子元素--><divv-once><h2>comment</h2><p>`msg`</p></div><!--组件--><my-componentv-once:comment="msg"></my-component><!--v-for指令--><ul><liv-for="iinlist"v-once>`i`</li></ul>
v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
代码示例如下:
<divid="app"><spanv-pre>{{thiswillnotbecompiled}}+`msg`</span></div><scriptsrc="//cdn.bootcss.com/vue/2.0.0/vue.js"></script><script>varvm=newVue({el:'#app',data:{msg:'HelloWorld!'}})</script>
注意看控制台,这个可没有报错哦
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。