Vue 内置指令（Day16）

已进行指令

• v-bind：单项绑定解析表达式，可简写为 ：xxx

• v-model：双向数据绑定

• v-for：遍历数组、对象、字符串

• v-on：绑定事件监听，可简写为@

• v-if：条件渲染（动态控制节点是否存在）

• v-else：条件渲染（动态控制节点是否存在）

• v-show：条件渲染（动态控制节点是否展示）

v-text

功能：向其所在节点中渲染文本内容

与插值语法的区别：v-text会替换掉节点中原有内容，插值语法不会

<div id="app">
     <!-- 插值语法 -->
     <h3>{{name}}</h3>
     <!-- v-text方法 -->
     <h3 v-text="name"></h3>
 </div>
 <script>
     Vue.config.productionTip = false;
     var vm = new Vue({
         el: "#app",
         data: {
             name:'测试'
         },
     });
 </script>

v-html

1. 作用：向指定节点中渲染包含html结构的内容

2. 与插值语法的区别

   1. v-html会替换掉节点中全部内容，插值语法不会

   2. v-html可识别html结构

3. 重点关注：v-html的安全性问题

   1. 在网站上动态渲染任意HTML非常危险，易导致XSS攻击

   2. 必须在可信内容上使用v-html，绝对不可用于用户提交内容上

cookie工作流程简图

不能进行跨浏览器读取cookie

v-cloak

1. 只有指令，未含值

2. 本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性

3. 使用CSS配合v-cloak可解决因网速过慢页面展示出插值语法模版的问题

    <style>
      [v-cloak] {
        display: none;
      }
    </style>
      <h3 v-cloak>{{name}}</h3>  

v-once

1. 该指令只有指令，没有值

2. 所在节点完成初次动态渲染后视其为静态内容

3. 之后数据变化不会引起该节点结构更新，可用于性能优化

      <h3 v-once>初始化的n值为：{{n}}</h3>
      <h4>当前n值为：{{n}}</h4>
      <button @click="n++">点击添加</button>

v-pre

1. 跳过其所在节点的编译过程

2. 可利用其跳过没有使用指令语法、没有使用插值语法的节点，加快编译

      <h3 v-pre>简单</h3>
      <h4>当前n值为：{{n}}</h4>
      <button @click="n++">点击添加</button>