Vue.js基础指令

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

v-once指令

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

<div id="app">
  <p v-once>{{content}}</p>
</div>

v-text指令

元素内容整体替换为指定纯文本内容。值为data选项中的变量，也可以是固定数值，但那没有意义。和插值表达式一样，也会自动更新视图。

<div id="app">
  <p v-text="content">被覆盖的内容</p>
</div>

v-html指令

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

<div id="app">
  <p v-html="content">被覆盖的内容</p>
</div>

v-bind指令

用于动态绑定HTML属性。

<div id="app">
  <!-- 通过v-bind指令和data选项中的title变量来动态设置title属性内容 -->
  <p v-bind:title="title">内容</p>
  <!-- 简写形式 -->
  <p :title="title">内容</p>
  <!-- 和插值表达式一样，也可使用语句 -->
  <p :title="title + 2">内容</p>
  <!-- 绑定多个属性，只需要绑定包含这些属性的对象即可 -->
  <p v-bind="attrObj">内容</p>
</div>
<!-- CDN引入最新稳定版vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      title: '这是title属性内容',
      attrObj: {
        id: 'aa',
        title: 'bb',
        // javascript不支持带短横线-的键，需要用字符串表示
        'data-content': 'cc'
      }
    }
  })
</script>

Class绑定

class是HTML属性，可以通过v-bind指令动态绑定，且绑定后可以与固有class属性共存。

<div id="app">
  <!-- pStyle为data选项中的字符串类型变量 -->
  <p :class="pStyle">内容</p>
  <!-- x为类名，绑定的类名可与其共存 -->
  <p class="x" :class="pStyle">内容</p>
  <!-- 多类名动态绑定 -->
  <!-- x、y、z为类名，isY、isZ为data选项中的bool类型变量 -->
  <p :class="isY ? 'x y z' : 'x z'">内容</p>
  <!-- 对象形式的多类名动态绑定 -->
  <p :class="{ x: true, y: isY, z: isZ }">内容</p>
  <!-- 数组形式的多类名动态绑定 -->
  <p :class="['x', {y: isY}, 'z']">内容</p>
</div>

Style绑定

style是HTML属性，可以通过v-bind指令动态绑定，且绑定后可以与固有style属性共存。

<div id="app">
  <!-- style绑定, styleObj1为data选项中的对象类型变量 -->
  <p :style="styleObj1">内容</p>
  <p style="width: 100px;" :style="styleObj1">内容</p>
  <!-- 数组形式的多样式绑定， baseStyleObj、styleObj1、styleObj2为data选项中的对象类型变量 -->
  <p :style="[baseStyleObj, styleObj1]">内容</p>
  <p :style="[baseStyleObj, styleObj2]">内容</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      baseStyleObj: {
        width: '200px',
        backgroundColor: 'red',
      },
      styleObj1: {
        'font-size': '20px'
      },
      styleObj2: {
        'font-size': '30px'
      }
    }
  })
</script>

v-for指令

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

<div id="app">
  <ul>
    <!-- arr为data选项中的数组变量 -->
    <li v-for="item in arr">元素内容为：{{ item }}</li>
    <li v-for="(item, index) in arr">
      元素内容为：{{ item }}, 索引为：{{ index }}
    </li>
    <!-- obj为data选项中的对象 -->
    <li v-for="value in obj">元素内容为：{{ value }}</li>
    <li v-for="(value, key, index) in obj">
      元素内容为: {{ value }}, 键为： {{ key }}, 索引值为： {{ index
    </li>
  </ul>
  
  <ul>
    <li v-for="(item, index) in 5">
      这是第{{ item }}个元素，索引值为：{{ index }}
    </li>
  </ul>
  
  <ul>
    <!-- 使用v-for指令时，应始终指定唯一的key值，可以提高渲染性能并避免问题 -->
    <li v-for="(item, index) in itemList" :key="item.id">
      输入框{{ item.value }}: <input type="text">
    </li>
  </ul>
  
  <!-- 通过<template>标签设置模板占位符，可将部分元素或内容作为整体进行操作 -->
  <template v-for="item in items">
    <span>标签内容</span>
    <span>标签内容</span>
  </template>
</div>

v-show指令

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用。

<div id="app">
  <span v-show="true">这段会显示</span>
  <span v-show="false">这段会隐藏</span>
  <!-- isShow为data选项中bool类型变量 -->
  <span v-show="isShow">这段可更改显示隐藏</span>
</div>

注意：<template>标签无法使用v-show指令

v-if指令

用于根据条件控制元素的创建与移除，不适合频繁操作。

<div id="app">
  <span v-if="false">元素不被创建</span>
  <span v-else-if="true">元素被创建</span>
  <span v-else="false">元素不被创建</span>
  <!-- isCreated为data选项中bool类型变量 -->
  <span v-if="isCreated">这段可更改为创建或删除</span>
  
  <!-- 给使用v-if指令时给同类型的元素绑定不同key值，可以避免问题 -->
  <div v-if="type==='username'" :key="'username'">
    用户名登录<input type="text">
  </div>
  <div v-else :key="'email'">
    邮箱登录<input type="text">
  </div>
</div>

注意：出于性能考虑，应避免将v-if和v-for指令用于同一标签。

因为v-for优先级高于v-if，因此当它们同时用于同一标签，vue会先执行v-for批量创建，假如v-if的值是false，然后又会销毁刚创建的内容，这样会浪费性能。

解决方法方法：v-for用于需要批量创建的元素，v-if用于它们的父元素即可。