Vue——常用指令总结、指令修饰符、v-model原理、computed计算属性、watch监听器、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 (为了提升性能)，比如实现一个需求：

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

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

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

解决方法：

$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计算属性

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

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

<p>计算：{{ 计算属性名 }}</p>

computed: {
	计算属性名 () {
		计算逻辑
		return 结果
	}
},

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

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

与methods配置项的区别

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

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

   依赖项变化了，会自动重新计算 → 并再次缓存

2. methods没有缓存特性

3. 当一个结果依赖其他多个值时，最好使用计算属性；当处理业务逻辑时，最好使用methods方法，比如事件的处理函数

2. watch监视器

1. 监视数据变化，执行一些业务逻辑或异步操作

2. 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的标签。