Vue

Vue指令

vue指令

  • 解释：指令 (Directives) 是带有 v- 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性
  • 作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为

一、v-bind

  • 描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令
  • 作用：动态的设置html的属性
  • 语法：v-bind:title="msg"
  • 简写：:title="msg"
1
2
3
4
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

样式处理-class和style

  • 使用方式：v-bind:class="表达式" 或 :class="表达式"
  • 表达式的类型：字符串、数组、对象（重点）
  • 语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
--- class ---
<!-- 1 -->
<!-- 常用 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
1
2
3
4
5
6
7
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

二、v-model

v-model: https://cn.vuejs.org/v2/guide/forms.html

  • 作用：在表单元素上创建双向数据绑定，vue解析时会忽略另外设置的value、checked等初始值
  • 说明：监听用户的输入事件以更新数据
1
2
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

双向数据绑定

  • 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
    • 数据的改变会引起DOM的改变
    • DOM的改变也会引起数据的变化
  • 视图到数据的原理：对于input可以使用input事件（html5）
  • 数据到视图的原理：数据劫持，Object.defineProperty中的get和set方法
    • getter和setter：访问器
    • 作用：指定读取或设置对象属性值的时候，执行的操作
  • 注意：Object.defineProperty方法是ES5中提供的，IE8浏览器不支持这个方法。因此，Vue不支持IE8及其以下版本浏览器
  • Vue - 深入响应式原理
  • MDN - Object.defineProperty()
1
2
3
4
5
6
7
8
// 语法
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg 执行的操作
  set: function () {},
  // 读取 obj.msg 执行的操作
  get: function () {}
})

Vue双向绑定的极简实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 示例 -->
<input type="text" id="txt" />
<span id="msgBox"></span>

<script>
const txt = document.getElementById('txt')
const msgBox = document.getElementById('msgBox')
const obj = {}

// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg 执行的操作
  set: function (curVal) {
    txt.value = curVal
    msgBox.innerText = curVal
    // 但是这样不能直接使用this.msg设置msg的值，会造成递归。所以使用一个其他的值来代替msg存取数据
    this._msg = curVal
  },
  get: function () {
      return this._msg
  }
})

// 监听文本框的改变
txt.addEventListener('input', function (event) {
  obj.msg = this.value
})
</script>

三、v-on

  • 作用：绑定事件
  • 语法：v-on:click="say" or v-on:click="say('参数', $event)"
  • 简写：@click="say"
  • 说明：绑定的事件从methods中获取
1
2
3
4
5
6
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 又要传参又要拿到事件对象，用$event代替事件对象传入 -->
<a @click="doSomething(xxx, $event)"></a>

事件修饰符

  • .stop 阻止冒泡，调用 event.stopPropagation()
  • .prevent 阻止默认行为，调用 event.preventDefault()
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
  • .once 事件只触发一次

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

  1. .按键码(例如enter为13，也就是.13，不过可读性差且有兼容性问题，不合适)
1
2
3
4
5
6
7
8
9
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
  1. 自定义：

Vue.config.keyCodes.自定义属性名 = 13 （把.自定义属性名当.enter使用）

四、v-text

  • 解释：更新元素的 textContent或innerText。如果要更新部分的 textContent ，应该使用 {{ Mustache }} 插值。
1
<h1 v-text="msg"></h1>

五、v-html

  • 解释：更新DOM对象的 innerHTML,html标签会生效
1
<h1 v-html="msg"></h1>

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

六、v-if 和 v-show

  • 条件渲染
  • v-if：根据表达式的值的真假条件，销毁或重建元素
  • v-show：根据表达式之真假值，切换元素的 display CSS 属性（display属性）

区别：

  1. 传值为false时，v-show依然会创建出元素并设置display: none；而v-if完全不会创建元素
  2. 如果需要频繁切换盒子的显示和隐藏，那么适合用v-show；如果需要多个盒子而只显示一个，那么适合用v-if

总结：v-if初始性能消耗可能较低，且不适合反复切换；v-show初始性能消耗高，但适合反复切换

七、v-else与v-else-if

  • v-else 和 v-else-if 必须和 v-if 紧挨着使用，中间不能出现其他元素

八、v-for

  • 作用：基于源数据多次渲染元素或模板块（谁需要循环渲染，就给谁加）
1
2
3
4
5
6
7
8
9
10
<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

key属性

  • 推荐：使用 v-for 的时候提供 key 属性，能够提升列表渲染的性能，也能避免部分bug（例如单选和复选框只复用标签不复用value的常见bug）
  • 说明：使用 key，vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。如果不用key的话，例如渲染列表时会在浏览器解析中根据列表元素下标的改变而对应的去视图中修改对应下标列表内容，如图：

有没有key的区别

1
2
3
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

九、v-pre（提升性能）

  • 说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。（例如展示vue源码以及跳过静态内容解析以提升性能）
1
<span v-pre>{{ 这部分内容将不会被编译 }}</span>

十、v-once（提升性能）

  • 说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容在解析时 跳过。这可以用于优化更新性能，不过需要修改时会很麻烦（因为不会报错提示）。
1
<span v-once>这部分内容将不会被改变: {{msg}}</span>

十一、v-cloak

  • 作用：用于解决插值表达式的闪烁问题，但由于组件化开发中使用webpack打包编译后会现在内存中先将各个组件渲染完成，最终将所有组件完成展示，不再有这个问题，所以v-cloak用处不大
  • 特点：添加到元素上之后会多一个v-cloak属性，vue完成渲染后该属性会自动被移除
  • 用法：配合其特点使用css选择器 [v-cloak]{display: none;} 隐藏元素