Vue2——常用指令总结、指令修饰符、v-model原理、computed计算属性、watch监听器、ref和$refs

文章目录

- 一、概念理解
- 二、指令
- - 1. 常用内置指令总结
  - 2. 常用指令修饰符
  - 3. 自定义指令
  - 4. v-model
  - - 原理
    - 表单类组件封装
- 三、补充
- - 1. computed计算属性
  - 2. watch监视器
  - 3. ref和$refs

一、概念理解

【事件处理函数】

事件处理函数应该写到一个跟data同级的配置项（methods）中
methods中的函数内部的this都指向Vue实例
如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
如果传递了参数，则实参 $event 表示事件对象，固定用法。

【Vue生命周期】

Vue生命周期：一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子→ 让开发者可以在特定阶段运行自己的代码

脚手架Vue CLI：Vue官方提供的一个全局命令工具，帮助我们快速创建一个开发Vue项目的标准化基础架子。（集成了webpack配置）

【异步更新】

Vue 是异步更新DOM (为了提升性能)，比如实现一个需求：

点击按钮—>编辑框自动聚焦

点击编辑按钮，显示编辑框
让编辑框立刻获取焦点

编辑框显示后，立刻获取焦点是不能成功的！

解决方法：

$nextTick：等 DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this.$nextTick(() => {this.$refs.inp.focus()
})

注意：$nextTick 内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例

使用setTimeout其实也能实现，但是自定义的等待时间不准确，随着程序体量的变化，我们不知道多长事件DOM更新结束

二、指令

1. 常用内置指令总结

指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊 标签属性。

指令	示例	描述
内容渲染指令
`v-text`	`<p v-text="uname">hello</p>`	类似 `innerText`， uame 值渲染到 p 标签中，会覆盖 p 标签原有内容
`v-html`	`<p v-html="intro">hello</p>`	将 intro 值渲染到 p 标签中，会覆盖 p 标签原有内容，能将HTML标签的样式呈现出来
条件渲染指令
`v-show`	`v-show = "表达式"`	达式值为 true 显示， false 隐藏，频繁切换显示隐藏的场景
`v-if`	`v-if= "表达式"`	条件渲染，表达式值 true显示， false 隐藏，创建或移除元素节点，适用于不频繁切换的场景
`v-else`和 `v-else-if`	`v-else v-else-if="表达式"`	辅助v-if进行判断渲染，需要紧接着v-if使用
事件绑定指令
`v-on`	`<button v-on:事件名="内联语句">按钮</button>`或 `<button v-on:事件名="处理函数(实参)">按钮</button>`	为DOM注册事件，简写为 @
属性绑定指令
`v-bind`	`v-bind:属性名=“表达式”`	动态设置html的标签属性比如：src、url、title，可以简写成 :
列表渲染指令
`v-for`	`v-for (item, index) in arr :key="唯一值"（字符串或数字类型）`	基于一个数组或对象或数字来循环渲染一个列表结构，item 是数组中的每一项，index 是每一项的索引，不需要可以省略，arr 是被遍历的数组，key给列表项添加的唯一标识
双向绑定指令
`v-model`	`v-model="变量"`	给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

2. 常用指令修饰符

指令	示例	描述
`@keyup.enter`	`<input @keyup.enter>`	监听键盘enter事件
`v-model.trim`	v-`model.trim`	去除首位空格
`v-model.number`	`v-model.number`	转数字
`@事件名.stop`	`<div @click.stop="fatherFn" class="father">`	阻止事件冒泡
`@事件名.prevent`	`<div @click.prevent="fatherFn" class="father">`	阻止默认行为
`@事件名.stop.prevent`		可以连用即阻止事件冒泡也阻止默认行为（比如点击链接但是不跳转到页面）
v-bind对样式控制的增强
`:class='对象/数组'`	对象语法：`<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>` 数组语法： `<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>`	针对 class 类名和 style 行内样式进行控制，如果值是true，就有这个类，否则没有这个类
`:disabled=布尔值`	`:disabled=布尔值`	接收布尔值，如果为true禁用标签
`:style={}`	`<div class="box" :style="{ CSS属性名1: 新CSS属性值, CSS属性名2: 新CSS属性值 }"></div>`	属性名不支持带横杠，如果有横杠需要用引号包裹

3. 自定义指令

自己定义的指令，可以封装一些DOM操作，扩展额外的功能

inserted:被绑定元素插入父节点时调用的钩子函数

el：使用指令的那个DOM元素

全局注册

//在main.js中
Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签，扩展额外功能el.focus()}
})// 在xxx.vue中
<input type="text"  v-focus/>

局部注册

//在Vue组件的配置项中
directives: {"指令名": {inserted (el) {// 可以对 el 标签，扩展额外功能el.focus()}}
}

使用指令

注意：在使用指令的时候，一定要先注册，再使用，否则会报错

注册指令时不用加v-前缀，但使用时要加v-前缀

指令的值

在绑定指令时，可以通过“=”的形式为指令绑定具体的参数值

<div v-color="color">我是内容</div>

通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数

directives: {color: {inserted (el, binding) {el.style.color = binding.value},update (el, binding) {el.style.color = binding.value}}
}

4. v-model

特别重点理解v-model指令

常见的表单元素都可以用它来绑定，用于快速获取或设置表单元素的值，它会根据控件类型字段选取正确的方法来更新元素。

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

原理

v-model本质上是一个语法糖。例如应用在输入框上，是绑定value属性和 input事件的合写。

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model底层处理的是 checked属性和change事件。

提供数据的双向绑定，$event 用于在模板中，获取事件的形参

数据变–>视图变 :value
视图变–>数据变 @input

<template><div id="app" ><input v-model="msg" type="text">
// 等价于<input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>

表单类组件封装

未封装时，表单组件父子间通信通过双向数据绑定、事件监听实现

// App.vue
<template><div class="app"><!-- $event获取事件的形参 --><BaseSelect:cityId="selectId" @changeId="selectId=$event"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '101',}},components: {BaseSelect,},
}
</script><style>
</style>

// BaseSelect.vue
<template><div><select :value="cityId" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">广州</option><option value="104">深圳</option></select></div></template><script>export default {props: {cityId: String},methods: {handleChange (e) {// console.log(e.target.value)this.$emit('changeId', e.target.value)}}}</script><style></style>

v-model封装时，v-model其实是 :value和@input事件的简写

子组件：props通过value接收数据，事件触发 input

父组件：v-model直接绑定数据

// 子组件
<select :value="value" @change="handleChange">...</select>
props: {value: String
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}// 父组件
<BaseSelect v-model="selectId"></BaseSelect>

.sync修饰符，本质就是 :属性名 和 @update:属性名 合写

可以实现 子组件 与 父组件数据 的 双向绑定，作用和v-model类似，用于简化代码

// 父组件
//.sync写法
<BaseDialog :visible.sync="isShow" />
//--------------------------------------
//完整写法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" 
/>// 子组件
props: {visible: Boolean
},this.$emit('update:visible', false)

三、补充

1. computed计算属性

声明在 computed 配置项中，该配置项和data配置项是同级的，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名}}
computed中计算属性内部的this依然指向的是Vue实例

**默认写法：**只能读取不能修改

<p>计算：{{ 计算属性名 }}</p>computed: {计算属性名 () {计算逻辑return 结果}
},

**完整写法：**能读取能修改

// 被获取求值时，执行get(有缓存，优先读缓存)
// 会将返回值作为求值的结果
// 被修改赋值时，执行set。修改的值传递给set方法的形参
computed: {计算属性名: {get () {计算逻辑return 结果},set (修改的值) {修改逻辑}}
}

与methods配置项的区别

computed具有缓存特性（提升性能）

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

依赖项变化了，会自动重新计算 → 并再次缓存
methods没有缓存特性
当一个结果依赖其他多个值时，最好使用计算属性；当处理业务逻辑时，最好使用methods方法，比如事件的处理函数

2. watch监视器

监视数据变化，执行一些业务逻辑或异步操作
watch声明在跟data同级的配置项中

注意，方法名不允许出现一些字符，比如-、.等，如果出现，需要用单引号包裹

简单写法： 简单类型数据直接监视

data: { words: '苹果',obj: {words: '苹果'}
},watch: {// 直接级别words (newValue, oldValue) {一些业务逻辑 或 异步操作。 },// 对象内的子属性  'obj.words' (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}

完整写法： 添加额外配置项

data: {obj: {words: '苹果',lang: 'italy'},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {value发生改变后执行逻辑}}
}

3. ref和$refs

利用ref 和 $refs 可以用于获取 dom 元素或组件实例，规定查找范围使查找组件更精确

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {console.log(this.$refs.chartRef)
}

注意：

用document.querySelect(‘.box’) 获取的是整个页面中的类名为box的标签。