基本指令

v-cloak

v-cloak 不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none配合使用。
v-cloak 是一个解决初始化慢导致页面闪动的最佳实践。

示例代码

<template>
    <div v-cloak>{{msg}}</div>
</template>
<script>
export default {
  name: "Directive",
  data() {
    return {
      msg: "v-cloak"
    };
  }
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}
</style>

v-once

v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或者组件的所有子界面。首次渲染后，不在随数据的变化重新渲染，将被视为静态内容。

示例代码

<template>
    <div v-once>{{msg}}</div>
</template>
<script>
export default {
  name: "Directive",
  data() {
    return {
      msg: "v-once"
    };
  }
};
</script>

v-if、v-else-if、v-else

和JavaScript的条件语句if、else、else-if类似，Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或者组件。v-else-if要紧跟v-if,v-else要紧跟v-else-if或v-if,表达式值为true时，当前元素或组件及所有子节点将被渲染，为false时被移除。

示例代码

<template>
    <p v-if="status===1">Status=1</p>
    <p v-else-if="status===2">Status=2</p>
    <p v-else>Status={{status}}</p>
</template>

<script>
export default {
  name: "IfComponent",
  data() {
    return {
      status: 1
    };
  }
};
</script>

如果一次判断的是多个元素，可以在vue内置的<template>元素上使用条件指令，最终渲染的结果不会包含该元素。

示例代码

<template>
<div>
    <template v-if="status===1">
      <p>🤗</p>
      <p>😘</p>
      <p>😍</p>
    </template>
</div>
</template>

<script>
export default {
  name: "IfComponent",
  data() {
    return {
      status: 1
    };
  }
};
</script>

vue在渲染元素是，出于效率考虑，会尽可能的复用已有的元素而非重新渲染。

代码示例

<template>
<div>
  <template v-if="type==='name'">
     <label>用户名: </label>
     <input placeholder="请输入用户名">
</template>

<template v-else>
<label>邮箱: </label>
<input placeholder="请输入邮箱">
</template>

<button @click="handleChangeInputType">切换输入类型</button>
</div>
</template>

<script>
export default {
  name: "IfComponent",
  data() {
    return {
      type: "name"
    };
  },
  methods: {
    handleChangeInputType: function() {
      this.type = this.type === "name" ? "mail" : "name";
    }
  }
};
</script>

结果

图一

图二

我们可以使用vue提供的key属性来决定是否要复用元素，key值必须是唯一的。有了key只有，元素就不会重用了。

代码示例

<template>
<div>
  <template v-if="type==='name'" >
     <label>用户名: </label>
     <input placeholder="请输入用户名" key="name-input">
</template>

<template v-else>
<label>邮箱: </label>
<input placeholder="请输入邮箱" key="email-input">
</template>

<button @click="handleChangeInputType">切换输入类型</button>
</div>
</template>

<script>
export default {
  name: "IfComponent",
  data() {
    return {
      type: "name"
    };
  },
  methods: {
    handleChangeInputType: function() {
      this.type = this.type === "name" ? "mail" : "name";
    }
  }
};
</script>

结果

图三

图四

v-show

v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式为false时，元素会被隐藏。为true时显示。

示例代码

<template>
    <div>
      <h3 v-show="isShow">{{msg}}</h3>
    </div>
</template>

<script>
export default {
  name: "Show",
  data() {
    return {
      isShow: falses,
      msg: "v-show"
    };
  }
};
</script>

结果

图五

v-if和v-show应用场景

v-if 更适合条件不经常改变的场景，应为它切换开销相对较大，而v-show 适用于频繁切换条件。

列表渲染指令 v-for

当需要将一个数组遍历或者枚举一个对象循环显示时，就会用到列表渲染指令v-for。它的表达式需要结合in或者of来使用，类似item in items或者 item of items的形式。

代码示例

<template>
    <div>
        <ul>
           <li v-for="book in books" :key="book.name">{{book.name}}</li> 
        </ul>
    </div>
</template>

<script>
export default {
  name: "For",
  data() {
    return {
      books: [
        { name: "《Vue》" },
        { name: "《Angular》" },
        { name: "《React》" }
      ]
    };
  }
};
</script>

结果

图六

v-for 表达式支持一个可选参数作为当前的索引。

示例代码

<template>
    <div>
        <ul>
           <li v-for="(book,index) in books" :key="book.name">{{index}}、{{book.name}}</li> 
        </ul>
    </div>
</template>

<script>
export default {
  name: "For",
  data() {
    return {
      books: [
        { name: "《Vue》" },
        { name: "《Angular》" },
        { name: "《React》" }
      ]
    };
  }
};
</script>

结果

图七

与v-if一样，v-for也可以用在内置标签<template>上，将多个元素进行渲染。

v-for对象遍历

v-for 遍历对象属性时，有两个可选参数，分别为键名和索引。

示例代码

<template>
    <div>
        <ul>
            <li v-for="(value,key,index) in user" :key="key">{{index}}-{{key}}-{{value}}</li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "For",
  data() {
    return {
      user: {
        name: "Nick",
        age: 18,
        sex: "男"
      }
    };
  }
};
</script>

结果

图八

v-for 还可以迭代整数。

示例代码

<template>
    <div>
        <ul>
            <li v-for="n in 3">{{n}}</li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "For",
  data() {
    return {};
  }
};
</script>

结果

图九

数组更新

vue的核心是数据与视图的双向绑定，当我们修改数组时，vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图的更新。

push( ) 向数组的末尾添加一个或更多元素
pop( ) 删除并返回数组的最后一个元素
shift( ) 删除并返回数组的第一个元素
unshift( ) 向数组的开头添加一个或更多元素，并返回新的长度。
splice( ) 删除元素，并向数组添加新元素。
sort( ) 对数组的元素进行排序
reverse( ) 颠倒数组中元素的顺序。

但有一些方法不会改变原数组，它们都返回的是一个新数组，我们可以用新数组来替换原数组。

filter( ) 过滤不符合条件的元素，返回结果。
concat( ) 连接两个或更多的数组，并返回结果
slice( ) 从某个已有的数组返回选定的元素

注意

以下变动数组中，vue是不能检测到的，也不会触发视图更新。

通过索引直接设置项。例如 books[2]={name:"Python"}
修改数组长度，例如 books.length=2

解决办法

解决第一个问题可以用两种方法实现同样的效果，第一种是使用vue内置的set方法:

Vue.set(this.books,2,{name:"《Python》"});

如果是在webpack中使用组件化的方式，默认是没有导入vue的，这是可以使用 $set:

this.$set(this.books, 2, { name: "《Python》" });

另一种方法:
通过数组的splice函数实现

this.books.splice(2, 1, { name: "《Python》" });

第二个问题也可以直接使用splice函数解决:

this.books.splice(2);

过滤和排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。

示例代码

<template>
    <div>
        <ul>
            <template v-for="(book,index) of filiterBooks" class="line">
            <li>技术: {{book.name}}  <p>作者: {{book.author}}</p></li>
            </template>
        </ul>
    </div>
</template>

<script>
export default {
  name: "Sort",
  data() {
    return {
      books: [
        {
          name: "Vue",
          author: "Vue"
        },
        {
          name: "Angular",
          author: "Google"
        },
        {
          name: "React",
          author: "Facebook"
        }
      ]
    };
  },
  computed: {
    filiterBooks: function() {
      return this.books.sort(function(a, b) {
        return a.name.length > b.name.length;
      });
    }
  }
};
</script>

事件和方法

v-on:click 等于 @click
在methods中定义了我们需要的方法提供@click调用，需要注意的是，@click调用的方法名后可以不跟"()"。此时，如果该方法有参数，默认会将原生事件对象event传入，可以尝试修改为@click="handleChangeBook",然后在handleChangeBooks内打印出book参数看看。
这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的是哪一个方法，将逻辑与DOM 解耦。便于维护。最重要的是，当ViewModel销毁时，所有的时间处理器都会自动删除，无须自己清理。
vue提供了一个特殊变量$event,用于访问原生DOM事件，例如下面的实例可以阻止链接打开:

示例代码

<template>
  <div>
<a :href="url" @click="handleClick('禁止打开',$event)">百度一下</a>
  </div>  
</template>

<script>
export default {
  name: "Methods",
  data() {
    return {
      msg: "methods",
      url: "https://www.baidu.com"
    };
  },
  methods: {
    handleClick: function(message, event) {
      event.preventDefault();
      window.alert(message);
    }
  }
};
</script>

修饰符

在@绑定的事件后加上小圆点.,再跟一个后缀来使用修饰符。vue支持一下修饰符:

.stop
.prevent
.capture
.self
.once

具体用法如下:

<!-- 阻止单击事件冒泡 -->
<a @click.stop="handleClick"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="handle"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="handle"></div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div @click.self="handle"></div>
<!-- 只触发一次，组件同样适用 -->
<div @click.once="handle"></div>

在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法:

<!-- 只有在keyCode试13时候调用vm.submit() -->
<input @keyup.13="submit">

也可以自己配置具体按键:

Vue.config.keyCodes.f1=112;

全局定义后，就可以使用@keyup.f1
除了具体的某个keyCode外，Vue还提供了一些快捷名称，以下是全部别名：

.enter
.tab
.delete (捕获”删除“和”退格“键)
.esc
.space
.up
.down
.left
.right

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

.ctrl
.alt
.shift
.meta (Mac下是Command键,Windows下是窗口键)

v-cloak

示例代码

v-once

示例代码

v-if、v-else-if、v-else

示例代码

示例代码

代码示例

结果

代码示例

结果

v-show

示例代码

结果

v-if和v-show应用场景

列表渲染指令 v-for

代码示例

结果

示例代码

结果

v-for对象遍历

示例代码

结果

示例代码

结果

数组更新

注意

解决办法

过滤和排序

示例代码

事件和方法

示例代码

修饰符

推荐阅读更多精彩内容