Vue 的常用指令以及相关修饰符的含义

Vue 的常用指令

插值表达式

{{ }} 用来在 Vue 模板中插入变量。

<div id="app">
  {{ message }}
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-text

v-text 指令用来设置元素的文本内容。

<div id="app">
  <span v-text="message"></span>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-html

v-html 指令用来设置元素的 HTML 内容。

<div id="app">
  <div v-html="html"></div>
</div>

new Vue({
  el: '#app',
  data: {
    html: '<h1>This is a title</h1>'
  }
})

v-show

v-show 指令用来根据条件展示元素。

<div id="app">
  <p v-show="show">Hello Vue!</p>
</div>

new Vue({
  el: '#app',
  data: {
    show: true
  }
})

v-if

v-if 指令用来根据条件控制元素的显示与否。

<div id="app">
  <p v-if="show">Hello Vue!</p>
</div>

new Vue({
  el: '#app',
  data: {
    show: true
  }
})

v-if 可以与 v-else 一起使用，用来控制元素的显示与否。
或者 v-else-if 用来设置多个条件。

<div id="app">
  <p v-if="show">Hello Vue!</p>
  <p v-else-if="age > 18">You are old enough to vote.</p>
  <p v-else>You are not old enough to vote.</p>
</div>

new Vue({
  el: '#app',
  data: {
    show: true,
    age: 20
  }
})

v-if 与 v-show 的区别

1. v-if 指令会在元素插入或删除时，触发一次 DOM 操作，而 v-show 指令只会在初始渲染时触发一次 DOM 操作。
2. v-if 指令切换条件时，元素所在的容器元素会被移除或插入到 DOM 中，而 v-show 指令不会触发 DOM 操作。
3. v-if 指令会有更高的切换开销，因为需要频繁地插入、删除 DOM 元素；v-show 指令初始渲染时，元素的 display 样式会被设置，之后元素的 display 样式会被隐藏或显示，不会触发 DOM 操作。
4. v-if 指令可以用于条件判断，而 v-show 指令可以用于简单控制元素的显示与否。

v-for

v-for 指令用来遍历数组或对象，并对每个元素进行渲染。

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: ['apple', 'banana', 'orange']
  }
})

v-for 也可以用来遍历数字，并对每个元素进行渲染。

<div id="app">
  <ul>
    <li v-for="num in 10" :key="num">{{ num }}</li>
  </ul>
</div>

new Vue({
  el: '#app'
})

v-for 也可以与 v-if 一起使用，用来控制元素的显示与否。

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index" v-if="index % 2 === 0">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: ['apple', 'banana', 'orange']
  }
})

v-on

v-on 指令用来绑定事件。

<div id="app">
  <button v-on:click="handleClick">Click me</button>
</div>

new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      console.log('Button clicked!')
    }
  }
})

v-on 也可以绑定按键事件。

<div id="app">
  <input type="text" v-on:keyup.enter="handleEnter">
</div>

new Vue({
  el: '#app',
  methods: {
    handleEnter: function() {
      console.log('Enter key pressed!')
    }
  }
})

v-bind

v-bind 指令用来绑定属性。

<div id="app">
  <img v-bind:src="imageUrl">
</div>

new Vue({
  el: '#app',
  data: {
    imageUrl: 'https://cn.vuejs.org/images/logo.png'
  }
})

v-bind 也可以绑定 class。

<div id="app">
  <div v-bind:class="{ active: isActive }">Hello Vue!</div>
</div>

new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})

v-bind 也可以绑定样式。

<div id="app">
  <div v-bind:style="{ color: activeColor }">Hello Vue!</div>
</div>

new Vue({
  el: '#app',
  data: {
    activeColor: 'blue'
  }
})

v-model

v-model 指令用来实现表单输入和应用状态之间的双向绑定。

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-model 也可以绑定数组。

<div id="app">
  <input type="text" v-model="items">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: ['apple', 'banana', 'orange']
  }
})

v-model 也可以绑定对象。

<div id="app">
  <input type="text" v-model="user.name">
  <p>{{ user.name }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John'
    }
  }
})

v-model 的解析

其本质是一个语法糖，实际上会被编译成如下代码：

<input type="text" :value="message" @input="message = $event.target.value">

其中 :value 用来绑定应用状态的值，@input 用来监听用户输入并更新应用状态。

指令的修饰符

指令可以带有修饰符，以表示特殊的含义或功能。

.stop

.stop 修饰符用来阻止事件冒泡。

.prevent

.prevent 修饰符用来阻止默认事件。

.capture

.capture 修饰符用来捕获事件。

.self

.self 修饰符用来只响应自身事件。

.once

.once 修饰符用来只触发一次事件。

.native

.native 修饰符用来绑定原生事件。

.sync

.sync 修饰符用来实现双向绑定。

.trim

.trim 修饰符用来自动过滤用户输入的首尾空格。

.number

.number 修饰符用来将用户输入的值自动转为数字类型。