Vue2 指令

简介

Vue 提供的模板语法，用于辅助开发者渲染页面的基本结构
用法类似于标签的属性
大部分指令以 v- 开头

内容渲染

v-text

将绑定的数据渲染在标签内部

1
<p v-text="messsage"></p>

如果标签内部原来就有内容，则会将原来的内容覆盖（开发中使用不多）

插值表达式

将绑定的数据渲染在指定的位置，并且不会影响原来的内容

1
2
3
4
5
6
<p>性别：{{ sex }}</p>

/* 
显示的效果为:
性别：男
*/

插值表达式只能用在内容节点中，不能用在属性节点中

插值表达式在 Vue 未编译完成时，会在页面中显示

1
2
<p>性别：{{ sex===1 ? '男' : '女' }}</p>
<p>性别：{{ num.toString() }}</p>

插值表示式还支持 js 表达式运算

v-cloak

关联在元素上，直到实例编译完成

1
2
3
4
5
<p v-cloak>性别：{{ sex }}</p>

[v-cloak]: {
 display: none;
}

通过给v-cloak设置 display: none 样式来消除 Vue 未编译完成时，插值表达式显示在页面上

v-html

基本用法与 v-text相同，但可以渲染数据内的 html 标签

1
<div v-html="info"></div>

v-pre

vue 忽略绑定 v-pre 指令的元素

1
<p v-pre>忽略该元素</p>

vue 解析元素时会跳过改元素，vue 的其他指令和数据都在该元素上不会生效

属性绑定

v-bind

专门用来动态绑定属性值

1
2
3
4
5
<img v-bind:src="imgUrl"/>

// 缩写
<img :src="imgUrl"/>
// 省略 v-bind，使用':'代替

当绑定的属性值发生变化时，页面渲染的内容也会跟着发生变化

1
<img :src="'images/'+imgUrl"/>

v-bind指令绑定的属性值接受字符串的拼接

1
2
<div :class="{ classA: flag }"></div>
// flag 为一个布尔值

在绑定 class 的情况下，可以通过一个布尔值变量来控制这个 class 样式是否生效

  • 当 flag 为 true 时，classA 生效
  • flag 为 false时，classA 不生效
1
<div :style="{ fontSize: size + 'px' }"></div>

在绑定 style 的情况下，可以使用这种方式来设置样式

样式属性名采用驼峰命名法，size 为变量

事件绑定

v-on

专门用来动态绑定事件，来辅助程序员为DOM绑定事件监听

1
2
3
4
5
6
<a v-on:click="target">跳转</a>
// target 为事件处理函数

// 缩写
<a @click="target">跳转</a>
// 省略 v-on，使用'@'代替
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods:{
   target: function () {
     console.log('target');
    }
    
    // 简写
    target() {
     console.log('target');
    }
  }
})

事件函数需要定义在 methods 内部

1
2
3
4
5
6
7
8
9
10
11
12
13
<a @click="add(1)">add</a>

const vm = new Vue({
  el: '#app',
  data: {
    number: 0
  },
  methods: {
   add(n) {
     this.number += n;
    } 
  }
})

在事件函数中需要调用 vm 对象中 data中的值，可以使用 this.属性名 来获取

这里面的 this 指代的是 vm 对象

函数传参方式还是和原生 js 语法相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a @click="add($event, 1)">add</a>

const vm = new Vue({
  el: '#app',
  data: {
    number: 0
  },
  methods: {
   add(e, n) {
     this.number += n;
      console.log(e);
    } 
  }
})

事件没有传参时，会默认传入一个事件对象参数 e,可以获取修改事件对象的属性

为了解决传参覆盖事件对象 e 的问题，Vue 提供了一个内置变量 $event，它就是原生 DOM 的事件对象 e

事件修饰符

方便对事件触发进行控制

prevent

用来阻止浏览器的默认行为

1
<a @click.prevent="target">target</a>

stop

阻止事件冒泡

1
<button @click.stop="btn">点击</button>

once

事件函数只触发一次

1
<button @click.once="btn">点击</button>

native

在组件根元素上触发原生事件

1
<el-card @click.native="add">点击</el-card>

按键修饰符

只能对键盘相关事件进行控制

1
<input @keyup.enter="submit" />

只有当用户敲的时 enter 键时才会触发 submit 事件函数

双向绑定

v-model

在不操作 DOM 的前提下，快速获取表单的数据

1
<input type="text" v-model="userName"/>

绑定的数据源发生改变时，表单元素渲染的数据也会发生变化

当表单元素改变内容时，绑定的数据源也会跟着改变

表单元素内容和数据源相互影响

绑定了 v-model 指令，表单元素中的 value 属性就没有什么意义了

vue 就是通过监听表单元素的 value属性来实现v-model 指令的功能

修饰符

对用户输入的内容进行处理

number

将用户输入的数据转换为数值型

1
<input type="text" v-model.number="num"/>

trim

去除用户输入内容首位的空格

1
<input type="text" v-model.trim="userName"/>

不会去除内容内部的空格

lazy

懒加载，在发生 change（改变）时才更新

1
<input type="text" v-model.lazy="userName"/>

用户在输入框输入的时候，数据源不会发生改变，当输入框失去焦点时，数据才会同步到数据源

条件渲染

控制 DOM 元素的隐藏与显示
通过绑定数据的布尔值来决定 DOM 元素是否显示
true 为显示，false 为隐藏

v-if

通过移除 DOM 元素来实现 DOM 元素的隐藏

1
<p v-if="flag"></p>

默认情况下 DOM 元素隐藏，只有特殊情况下才会显示该元素，推荐使用 v-if

v-else-if & v-else

需要与 v-if 配套使用，否则无法识别

1
2
3
<p v-if="type === 'A'">A</p>
<p v-else-if="type === 'B">B</p>
<p v-else>C</p>

满足 type===’A’ 条件则显示 A

满足 type===’B’ 条件则显示 B

上面两个条件都不满足则显示 C

也就是说 A、B、C 其中一个必然会显示

v-show

通过 display: none 来隐藏 DOM 元素

1
<p v-show="flag"></p>

频繁切换元素的显示与隐藏效果，v-show 效率更高

列表渲染

v-for

基于一个数组循环渲染出一个列表结构

1
2
3
4
5
6
7
8
9
<ul>
  <li v-for="(item, index) in list" :key="item.id">{{item.value}}</li>
</ul>

date: {
 list:[{id: 1, value: 'A'},
    {id: 2, value: 'B'},
    {id: 3, value: 'C'}]
}

list是需要被循环的列表数组，item是被循环的每一项，index是每次循环的索引

官方建议：在使用 v-for 的情况下，需要绑定一个key 属性

key 属性的值只能是字符串或数值型，并且 key 属性的绑定值是唯一的

key 属性的值建议使用数据的 id

index与列表数组中的数据并没有强绑定性，不推荐使用 index 作为 key的绑定值