Vue.js 指令 v-html v-cloak v-pre v-once

简介:

指令(Directives)是特殊的带有前缀v-的特性。指令的值限定为绑定表达式,指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上

HTML:

1
2
3
< div  id = "test01" >
     < p  v-if = "greeting" >Hello!</ p >
</ div >

这里,v-if指令将根据表达式greeting值得真假  删除/插入p元素

JS:

1
2
3
4
5
6
var vm1=new Vue({
     el:'#test01',
     data:{
         greeting:false
     }
});

当greeting取值为false时,查看页面效果和控制台

wKiom1f58mHAK7bgAAEPbjR0TEM356.png

当greeting取值为true时,查看页面效果和控制台

wKiom1f58nahgonvAAER3Y0dmrc663.png这里需要注意的是,v-if="greeting"不能用于根元素之上,也就是说必须用于某一元素的子元素之上,否则,控制台就会报错"[Vue warn]: v-if="greeting" cannot be used on an instance root element."


查看错误示例:

HTML:

1
< p  v-if = "greeting" >Hello!</ p >

JS:

1
2
3
4
5
6
var  vm= new  Vue({
     el: 'p' ,
     data:{
         greeting: true
     }
});

控制台错误提示:

wKioL1f58-qR9hoWAADvhbjsY_E379.png有些指令可以在其名称后面带一个”参数“(Argument),中间放一个冒号隔开。例如:v-bind指令用于响应地更新HTML特性

HTML:

1
< a  id = "test02"  v-bind:href = "url" >v-bind链接</ a >


这里href是参数,它告诉v-bind指令将元素的href特性跟表达式url的值绑定

JS:

1
2
3
4
5
6
var  vm2= new  Vue({
     el: '#test02' ,
     data:{
         url: 'http://cn.vuejs.org/'
     }
});


v-on指令用于监听DOM事件

HTML:

1
2
3
4
< div  id = "test03"  >
     < p >`message`</ p >
     < button  v-on:click = "reverseMessage" >Reverse Message</ button >
</ div >

JS:

1
2
3
4
5
6
7
8
9
10
11
12
var  vm3= new  Vue({
     el: '#test03' ,
     data:{
         message: '颠倒字体顺序'
     },
     methods:{
         reverseMessage: function (){
             //console.log(this)  this指代div#test03
             this .message= this .message.split( '' ).reverse().join( '' )
         }
     }
});


v-model指令实现双向数据绑定

这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向数据绑定,指的就是在JS实例中的data与其渲染的dom元素上的内容保持一致,二者任何一个被改变,另一个也会相应的更新为相同的内容,这是通过属性访问器实现的。

HTML:

1
2
3
4
< div  id = "test04" >
     < p >`message`</ p >
     < input  type = "text"  v-model = "message" >
</ div >

JS:

1
2
3
4
5
6
var  vm4= new  Vue({
     el: '#test04' ,
     data:{
         message: '双向数据绑定'
     }
});


v-for列表渲染,用作循环遍历,类似ng中的ng-repeat

HTML:

1
2
3
4
5
< div  id = "test05" >
     < ul >
         < li  v-for = "todo in todos" >`todo`.`text`</ li >
     </ ul >
</ div >

JS:

1
2
3
4
5
6
7
8
9
10
var  vm5= new  Vue({
     el: '#test05' ,
     data:{
         todos:[
             {text: 'Learn JavaScript' },
             {text: 'Learn Vue.js' },
             {text: 'Learn Angular.js' }
         ]
     }
});


再来两个综合的例子回顾下以上几个指令的用法

HTML:

1
2
3
4
5
6
7
8
9
< div  id = "zongHe" >
     < input  type = "text"  v-model = "newTodo"  v-on:keyup.enter = "addTodo" >
     < ul >
         < li  v-for = "todo in todos" >
             < span >`todo`.`text`</ span >
             < button  v-on:click = "removeTodo($index)" >X</ button >
         </ li >
     </ ul >
</ div >

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var  vm= new  Vue({
     el: '#zongHe' ,
     data:{
         newTodo: '' ,
         todos:[
             {text: 'add some todos' }
         ]
     },
     methods:{
         addTodo: function (){
             var  text= this .newTodo.trim();
             if (text){
                 this .todos.push({text:text}),
                 this .newTodo= ''
             }
         },
         removeTodo: function (index){
             this .todos.splice(index,1)
         }
     }
});


HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
< form  id = "demo" >
     <!-- text -->
     < p >
         < input  type = "text"  v-model = "msg" >
         `msg`
     </ p >
     <!-- checkbox -->
     < p >
         < input  type = "checkbox"  v-model = "checked" >
         {{checked ? "yes" : "no"}}
     </ p >
     <!-- radio buttons -->
     < p >
         < input  type = "radio"  name = "picked"  value = "one"  v-model = "picked" >
         < input  type = "radio"  name = "picked"  value = "two"  v-model = "picked" >
         `picked`
     </ p >
     <!-- select -->
     < p >
         < select  v-model = "selected" >
             < option >one</ option >
             < option >two</ option >
         </ select >
         `selected`
     </ p >
     <!-- multiple select -->
     < p >
         < select  v-model = "multiSelect"  multiple>
             < option >one</ option >
             < option >two</ option >
             < option >three</ option >
         </ select >
         `multiSelect`
     </ p >
     < p >< pre >data: {{$data | json 2}}</ pre ></ p >
</ form >

JS:

1
2
3
4
5
6
7
8
9
10
var demoVm=new Vue({
     el:'#demo',
     data:{
         msg:'hi!',
         checked:true,
         picked:'one',
         selected:'two',
         multiSelect:['one', 'three']
     }
});


查看页面截图效果:

wKiom1f6DkfQibyZAAIed36tIRA097.png


v-text

v-text 指令可以更新元素的文本内容,文本内容既可以放在 双大括号标签里面,也可以通过 v-text 放在标签内部。区别是放在 v-text 里面在页面加载时不会看到 双大括号 闪烁


示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< div  id = "app" >
     < p >`msg`</ p >
     < hr >
     < p  v-text = "msg" ></ p >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/1.0.26/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             msg:'页面上有双大括号闪烁吗?'
         }
     })
</ script >


页面刚加载时:(用户会看到双大括号标签)

wKioL1g2dyOy-5oBAAAC7ETCSJg280.png

页面加载完毕:

wKiom1g2dzOTF_21AAAGwpBaiJ4842.png

v-html

v-html 指令可以更新元素的innerHTML,也就是说可以解析并执行HTML代码,与{` `}三大括号标签功能一致。

注意:不建议在网站上直接动态渲染任意HTML 片段,很容易导致XSS攻击。


1
2
3
4
5
6
7
8
9
10
11
12
13
< div  id = "app" >
     < p  v-html = "msg" ></ p >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.0/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             msg: '< strong >Hello World!</ strong >'
         }
     })
</ script >

wKioL1g2fFqgvplmAAAC5kKOTOg695.png


v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。


简单说,就是防止页面未加载完成时,显示双大括号标签,我们在打开Vue页面时,经常看到类似的界面

wKiom1g2fhbwzr2oAAACVouhcE8783.png

用户看到 `msg` 是非常不好的一种体验,因此,我们可以借助 v-cloak指令解决这个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         [v-cloak]{
             display:none;
         }
     </ style >
</ head >
< body >
< div  id = "app"  v-cloak>
     < input  v-model = "msg" >< br >
     `msg`
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.0/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             msg: 'Hello World!'
         }
     })
</ script >
</ body >
</ html >


页面刚刷新:(页面是一片空白,什么都没有,也看不到双大括号标签在页面闪烁)

wKiom1g2fnGAXRlAAAABF35_wnU900.png

页面加载完毕:

wKioL1g2fquDRdEBAAAFV0zSo8k215.png

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。


这个就完全类似 {{*msg}}标签,直接看一段官网提供的示例代码,此处不单独举例

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 单个元素 -->
< span  v-once>This will never change: `msg`</ span >
<!-- 有子元素 -->
< div  v-once>
     < h1 >comment</ h1 >
     < p >`msg`</ p >
</ div >
<!-- 组件 -->
< my-component  v-once  :comment = "msg" ></ my-component >
<!-- v-for 指令-->
< ul >
     < li  v-for = "i in list"  v-once>`i`</ li >
</ ul >


v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。


代码示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< div  id = "app" >
     < span  v-pre>{{ this will not be compiled }} + `msg`</ span >
</ div >
 
 
 
< script  src = "//cdn.bootcss.com/vue/2.0.0/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             msg: 'Hello World!'
         }
     })
</ script >


注意看控制台,这个可没有报错哦

wKiom1g2gCfwTQciAAAwppBg8vg673.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1859897

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
10天前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
13天前
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
26 2
JavaScript HTML DOM
|
10天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
11天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
13 5
|
10天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
11天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
9 4
|
13天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
|
11天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
18 2
|
13天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
17 4
|
13天前
|
JavaScript 前端开发
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
14 2