01-vue指令总结

搬运自B站coderwhy的视频。

一、插值操作

插值操作主要是将某些值通过Vue指令插入到Html中。

1.1 v-once

mustache可以将vue实例中的data数据绑定到DOM中。这种方式绑定的数据是动态响应的，即实例中的数据改变，DOM中的数据也会相应改变。当在某些情况下，不希望DOM数据随实力改变时，可以用v-once指令

当修改实例中的message时，h2中的message不会改变，页面不会重新渲染。

1.2 v-html

某些情况下，从服务器请求到的数据本身就是一段HTML代码，利用v-html指令将html代码解析出来并进行渲染。

1.3 v-text

v-text和mustache比较相似：都是用于将数据显示在界面中。v-text通常情况下，接受一个string类型

1.4 v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

第一个h2元素中的内容会被编译解析出来对应的内容，第二个h2元素会直接显示{{message}}

1.5 v-cloak

在某些情况下，浏览器可能会直接显示出未编译的Mustache标签。


运行时，浏览器会先显示Hello {{name}}，然后渲染成Hello VueJs.

二、绑定属性

除了将值插入到模板的内容中之外，有时候某些属性也需要动态来绑定

• 比如动态绑定a元素的href属性
• 比如动态绑定img元素的src属性

2.1 v-bind

• v-bind基础

• 作用：动态绑定属性
• 缩写：【：】
• 预期：any (with argument) | Object (without argument)
• 参数：attrOrProp (optional)

v-ding用于绑定一个或多个属性值，或者向另一个组件传递props(见组件)

v-bind的简写形式：

• v-bind绑定class,比如：当数据为某个状态时，字体显示红色。当数据为另一个状态时，字体显示黑色。绑定class有两种方式：对象语法、数组语法。

1. 对象语法：:class后面跟的是一个对象

   <h2 :class="{'active': isActive}">Hello World</h2>
   
   用法二：也可以通过判断，传入多个值
   <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
   
   用法三：和普通的类同时存在，并不冲突
   注：如果isActive和isLine都为true，那么会有title/active/line三个类
   <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
   
   用法四：如果过于复杂，可以放在一个methods或者computed中
   注：classes是一个计算属性
   <h2 class="title" :class="classes">Hello World</h2>
   

2.数组语法：:class后面跟的是一个数组

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

• v-bind绑定style
  可以用v-bind绑定一些CSS内联样式。绑定class有两种方式：对象语法，数组语法

1. 对象写法

   :style="{color: currentColor, fontSize: fontSize + 'px'}"
   style后面跟的是一个对象类型
   对象的key是CSS属性名称
   对象的value是具体赋的值，值可以来自于data中的属性
   

2. 数组语法

   <div v-bind:style="[baseStyles, overridingStyles]"></div>
   

三、计算属性

3.1 什么是计算属性

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况下，我们可能需要对数据进行一些转化后在显示，或者需要将多个数据结合起来进行显示，或者需要将多个数据结合起来进行显示。比如我们有firstName和lastName两个变量，我们需要显示完整的铭恒。但是如果多个地方都需要显示完整的名称，我们就需要些多个{{firstName}}{{lastName}}。我们可以将上面的代码换成计算属性。

3.2 计算属性的复杂操作

3.3 计算属性的setter和getter

每个计算属性都包含一个getter和一个setter。上面的例子只是使用getter来读取。在某些情况下，也可能用到setter方法。

3.4 计算属性的缓存

我们可能会考虑这样的一个问题：

问：methods和computed看起来都可以实现我们的功能，那么我们为什么还要多一个计算属性这个东西呢？
答：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

四、事件监听

在前端开发中，我们需要经常和用户交互。这个使用，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等。在Vue中监听事件用v-on指令。

4.1 v-on基础

作用：绑定事件监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event

4.2 v-on参数

当methods中定义方法，以供@click调用时，需要注意参数问题：

情形一：如果该方法不需要额外参数，那么方法后的()可以不添加。如果方法本身有一个参数，那么会默认将原生事件event参数传递进去
情形二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

4.3 v-on 修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。Vue提供了修饰符来帮助我们方便的处理一些时间：

• .stop - 调用event.stopPropagation()
• .prevent - 调用event.preventDefault().
• .{keyCode|keyAlias} - 只当事件是从特定键触发时才出发回调。
• .native - 监听组件根元素的原生事件
• .once - 只触发一次回调。
  

五、条件判断

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

这三个指令与Javascript的语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

v-if的原理：

v-if后面的条件为false时，对应的元素以及其子元素不会渲染。也就是根本不会有对应的标签出现在DOM中。

5.2 条件渲染案例

需求：用户在登陆时，可以切换使用用户账号登录还是邮箱登录。类似下图


以上案例的小问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现依然显示之前的输入的内容。但是按道理讲，我们应该切换到另外一个input元素中了。在另一个input元素中，我们并没有输入内容。

出现这种情况的原因是：

Vue在进行DOM渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会出现原来的input元素不在使用，直接作为else中的input来使用。

解决方案：

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key。并且保证key不同。

5.3 v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染。v-if和v-show对比如下：

v-if和v-show都可以决定一个元素是否渲染，那么我们开发中如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
但需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

六、循环遍历

6.1 v-for遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

• v-for的语法类似于JavaScript中的for循环。
• 格式如下：item in items的形式。
  
  如果在遍历的过程中不需要使用索引值
  • v-for=“movie in movies”
  • 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
    如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
  • 语法格式：v-for=(item, index) in items
  • 其中的index就代表了取出的item在原数组的索引值。

6.2 v-for遍历对象

v-for可以用户遍历对象：

• 比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。
  

6.3 组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。为什么需要这个key属性呢（了解）？
这个其实和Vue的虚拟DOM的Diff算法有关系。这里我们借用React’s diff algorithm中的一张图来简单说明一下：

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识。Diff算法就可以正确的识别此节点。找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。

检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
  *

七、阶段案例

八、v-model

8.1 v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

• 1.v-bind绑定一个value属性
• 2.v-on指令给当前元素绑定input事件
  也就是说上面的代码等同于下面的代码：

  <input type="text" v-model="message">
  等同于
  <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
  

8.2 v-model结合radio使用

但存在多个单选框时：

8.3 v-model结合select使用

和checkbox一样，select也分单选和多选两种情况。
单选：

• v-model绑定的是一个值。
• 当我们选中option中的一个时，会将它对应的value赋值到mySelect中
  多选：
• v-model绑定的是一个数组。
• 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中
  

8.4 值绑定

8.5 修饰符

1. lazy修饰符
   • 默认情况下，v-model默认是在input事件中同步输入框的数据的。
   • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
   • lazy修饰符可以让数据在失去焦点或者回车时才会更新：
2. number修饰符
   • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
   • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
     *number修饰符可以让在输入框中输入的内容自动转成数字类型：
3. trim修饰符
   • 如果输入的内容首尾有很多空格，通常我们希望将其去除
   • trim修饰符可以过滤内容左右两边的空格