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博客。
相关文章
|
2月前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
80 50
|
13天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
47 2
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
126 1
|
2月前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
42 4
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
58 0
html5+three.js公路开车小游戏源码
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
110 6
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
下一篇
DataWorks