Vue 学习笔记 —— 常用特性 ，一篇文章帮你解答

console.log(this.gender);

}

}

})

2.4 checkbox 处理

checkbox 可以一次选择多个值，所以 checkbox 的值使用 数组来保存，数据绑定同样是使用 v-model 来完成

爱好：

篮球

唱歌

写代码

<input type=“submit” value=“提交” @click.prevent=“handleClick”>

2.5 select 下拉框处理

2.5.1 选择一条数据

下拉框选择一条值的时候和单选框的情况是一样的，一样使用 v-model 来绑定

专业：

请选择专业.. 计算机 软件工程 通信工程 物联网工程

<input type=“submit” value=“提交” @click.prevent=“handleClick”>

2.5.2 select 选择多条数据

我们在 select 中加一条属性， multiple ，然后就和 多选框的情况是一样的啦，下面就会默认选中 2 和 4的 option

专业：

请选择专业.. 计算机 软件工程 通信工程 物联网工程

2.6 textarea 文本框处理

使用的方法和 input 是一样的，但是要注意，在 vue 中不能在 textarea 中加入内容，如果该标签被 v-model 处理，他得知最终会显示为 data 中的数据

介绍：

2.7 表单域修饰符

• number 转换为数值

• trim：去掉开始和结尾的空格

• lazy：将 input 事件转换为 change 事件

2.7.1 number 类型

一般情况在 JavaScript 中计算的都是 字符串拼接，如果我们要进行数值类型计算，就要使用类型转换

number

<button @click=“calc”>计算

要计算整数，我们只需要这么做：<input type="text" v-model.number="num"/> ，将 v-model 加上 .number 属性就好了

2.7.2 trim 去除两边空格

2.7.3 lazy 事件

默认 v-model 使用的是 input 事件，我们可以在输入的内容加一个插值表达式，发现数值是和我们输入的内容一起变化的。但是我们加上 lazy 事件之后，就会变成 change 事件，简而言之，就是变成了失去焦点事件，当失去焦点了才会触发

这个 lazy 事件非常适合用于验证账户是否符合条件，这里集合 ajax 就会很简单

三、自定义命令

======================================================================

官网

前面用过的 v-xxx 都是vue 中的内置指令，但是内置指令不满足某些场景的使用功能，所以我们可以使用自定义组件，接下来编写一个简单的自动聚焦的方法

3.1 不带参数的自定义指令

3.2 带参数的自定义指令

根据自定义指令，改变颜色

3.3 局部自定义命令

前面定义过的样子就相当于一个全局的自定义命令。因此有全局的定义，就有对应的局部自定义命令的定义。

我们直接在 一个 vue 实例当中定义 directives 属性即可。

因此我定义了两个方法，分别是聚焦，和颜色改变的方法

四、计算属性 （computed）

================================================================================

4.1 计算属性功能

首先计算属性和方法的使用基本差不多，但是计算属性也有它独有的特点

1. 对应比较复杂的运算逻辑，使用计算属性可以提高运行效率 （因为它还提供了缓存机制）

2. 计算属性是依赖于 data 当中的数据

3. 计算属性第一次计算会将结果缓存起来，第二次在运算的时候会将计算的记过直接取出来

4.2 计算属性的基本使用

下面以一个反转字符串为例，我们来看下综合运行的情况。

原生字符串：{{msg}}

反转字符串：{{msg.split('').reverse().join('')}}

计算属性测试

计算属性方法实现：{{reverseMessage}}

计算属性方法实现：{{reverseMessage}}

计算属性方法实现：{{reverseMessage}}

方法测试

方法实现反转字符串：{{reverseMsg()}}

方法实现反转字符串：{{reverseMsg()}}

方法实现反转字符串：{{reverseMsg()}}

4.3 演示效果

我们看下两个方法分别打印了几次

计算属性只打印了一次，只有第一次调用的时候才会打印。这也证明了计算属性在某方面确实性能比方法搞很多

五、侦听器 （watch）

============================================================================

侦听器简单的来说就是数据有变化就通知监听器所绑定的方法。

侦听器主要用来侦听属性

侦听器的关键字是 watch，使用起来和 计算属性差不多

5.1 侦听器的基本使用

接下来我们以一个用户姓 与 名 的拼接的小案例来演示侦听器的使用

名：

姓：

{{fullname}}

计算属性：{{fullName}}