前端学习-Vue基础指令

指令的本质就是 HTML 自定义属性
Vue.js 的指令就是以 v- 开头的自定义属性

内容处理

v-once 指令

• 使元素内部的插值表达式只生效一次。

<div id="app">
    <p>此内容会随数据变化而自动变化：{{ content }}</p>
    <p v-once>此内容不会随数据变化而自动变化: {{ content }}</p>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        content: '内容文本'
      }
    })
</script>

v-text 指令

• 元素内容整体替换为指定纯文本数据。

<div id="app">
    <p v-text="100">这是 p 标签的原始内容</p>
    <p v-text="content">这是 p 标签的原始内容</p>
    <p v-text="content2"></p>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        content: '内容文本',
        content2: '<span>span的内容</span>'
      }
    });
</script>

v-html 指令

• 元素内容整体替换为指定的 HTML 文本。

<div id="app">
    <p v-html="content">这是默认的文本内容</p>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        content: '<span>span的内容</span>'
      }
    });
</script>

属性绑定

v-bind 指令

• v-bind 指令用于动态绑定 HTML 属性。
• Vue.js 还为 v-bind 指令提供了简写方式。
• 与插值表达式类似，v-bind 中也允许使用表达式。

<div id="app">
    <p v-bind:title="myTitle">p标签的内容</p>
    <p :title="myTitle">p标签的内容</p>

    <p :class="'num' + 1 + 2 + 3">p标签的内容</p>
    <p :class="prefix + num"></p>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        myTitle: '这是title的内容',
        prefix: 'demo',
        num: 10
      }
    });
</script>

• 如果需要一次绑定多个属性，还可以绑定对象。

<!--绑定对象的形式-->
<div id="app">
    <p v-bind="attrObj">这是 p 标签的内容</p>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        attrObj: {
          id: 'box',
          title: '示例内容',
          class: 'clearFix',
          'data-title': '这是 data-title 的内容'
        }
      }
    });
</script>

Class 绑定

• class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存。
• 对于 class 绑定， Vue.js 中还提供了特殊处理方式。

<div id="app">
    <p v-bind:class="cls1">标签内容</p>
    <p class="a" :class="cls1">标签内容</p>
    
    <!-- 插值表达式 -->
    <p :class="bool ? cls1 : cls2"></p>

    <!-- 用布尔对象的形式选择生效的class -->
    <p :class="{ x: isX, y: false, z: true }"></p>

    <!-- 用数组的形式同时添加多个class，数组的值也可以为布尔对象 -->
    <p :class="['a', classB, {c: isC}]"></p>
</div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        classB: 'b',
        isC: true
        isX: true
        bool: true,
        cls: 'q w e',
        cls1: 'x',
        cls2: 'y',
        cls3: 'z'
      }
    });
</script>

Style 绑定

• style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存。

<div id="app">
    <p v-bind:style="{width: '100px', height: '100px'}"></p>
    <p :style="styleObj">标签内容</p>

    <p style="width: 100px" :style="styleObj"></p>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj: {
          width: '200px',
          height: '200px',
          backgroundColor: 'red',
          'font-size': '30px'
        }
      }
    });
</script>

• 当我们希望给元素绑定多个样式对象时，可以设置为数组。

<!--利用数组的形式设置多个对象-->
<div id="app">
    <p :style="[baseStyle, styleObj1]">第一个 p 标签</p>
    <p :style="[baseStyle, styleObj2]">第二个 p 标签</p>
</div>
  
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        // 公共样式
        baseStyle: {
          width: '100px',
          height: '100px'
        },
        styleObj1: {
          backgroundColor: 'red'
        },
        styleObj2: {
          backgroundColor: 'blue'
        }
      }
    });
</script>

渲染指令

v-for 指令

• 用于遍历数据渲染结构，常用的数组与对象均可遍历。

<div id="app">
    <ul>
      <li v-for="item in arr">元素内容为：{{ item }}</li>
      <li v-for="(item, index) in arr">
        元素内容为：{{ item }}, 索引为：{{ index }}
      </li>

      <li v-for="value in obj">元素内容为：{{ value }}</li>
      <!-- 当遍历的内容为对象时可以通过key参数显示的内容 -->
      <li v-for="(value, key, index) in obj">
        元素内容为: {{ value }}, 键为： {{ key }}, 索引值为： {{ index }}
      </li>
    </ul>

    <!-- 可以通过修改in后面的参数来指定遍历的次数 -->
    <ul>
      <li v-for="(item, index) in 5">
        这是第{{ item }}个元素，索引值为：{{ index }}
      </li>
    </ul>

</div>
<script>
    new Vue({
      el: '#app',
      data: {
        arr: ['内容1', '内容2', '内容3']
        obj: {
          content1: '内容1',
          content2: '内容2',
          content3: '内容3'
        }
      }
    });
</script>

• 使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题。

<div id="app">
    <ul>
      <li v-for="(item, index) in itemList" :key="item.id">
        输入框{{ item.value }}: <input type="text">
      </li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3],
        itemList: [
          {id: 1,value: 2},
          {id: 2,value: 3},
          {id: 3,value: 3}
        ]
      }
    })
  </script>

• 通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作。

<div id="app">
    <template v-for="item in obj">
      <span>{{ item }}</span>
      <br>
    </template>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          content1: '内容1',
          content2: '内容2',
          content3: '内容3'
        }
      }
    })
</script>

v-show 指令

• 用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用。
• 注意:<template> 无法使用 v-show 指令。

<div id="app">
    <p v-show="false">标签内容</p>
    <p v-show="22 > 11">标签内容</p>
    <p v-show="bool">标签内容</p>
</div>
  
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        bool: true
      }
    });
</script>

v-if 指令

• 用于根据条件控制元素的创建与移除。

<div id="app">
    <p v-if="bool">这是标签内容</p>
    <p v-else-if="false">这是第二个p标签</p>
    <p v-else-if="false">这是第三个p标签</p>
    <p v-else>最后一个p标签</p>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: false
      }
    });
</script>

• 给使用 v-if 的同类型元素绑定不同的 key，避免出现问题

<div id="app">
    <div v-if="type==='username'" :key="'username'">
      用户名输入框：<input type="text">
    </div>
    <div v-else :key="'email'">
      邮箱输入框：<input type="text">
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: true,
        type: 'username'
      }
    });
  </script>

• 出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签，当出现在同一个标签时，会先执行for在判断if，所以正确的写法是应该将if写在需要遍历的元素的父元素上，避免不必要的资源浪费。

<div id="app">
    <ul v-if="false">
      <li v-for="item in items">{{item}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
       items: {
         content1: '内容1',
         content2: '内容2',
         content3: '内容3'
       }
      }
    });
</script>