认识Vue2
1.Vue中的常用指令
vue 中的指令按照不同的用途可以分为如下 6 大类：
内容渲染指令：
v-text（类似innerText）
v-html（类似 innerHTML）
条件渲染指令：
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。Vue 中主要通过v-show和v-if两个指令来实现条件渲染，二者虽然都能控制元素的显示与隐藏，但在实现原理、性能表现和使用场景上有着明显的区别，下面分别展开介绍。
v-show
作用：控制元素显示隐藏。
语法：v-show="表达式"，表达式值为 true 时显示，false 时隐藏。
原理：通过切换元素的display:none样式来控制显示与隐藏。也就是说，无论表达式结果为 true 还是 false，元素始终会被渲染到 DOM 中，只是通过样式来控制其是否可见。
场景：适合频繁切换显示与隐藏的场景。因为 v-show 只是切换 CSS 样式，不会反复创建和销毁 DOM 节点，所以切换成本很低，性能开销小。
v-if
作用：控制元素显示隐藏（条件渲染）。
语法：v-if="表达式"，表达式值为 true 时显示，false 时隐藏。
原理：基于条件判断，决定是否创建或移除元素节点。当表达式为 false 时，Vue 会直接从 DOM 中移除该元素及其子元素；当表达式变为 true 时，Vue 会重新创建并插入该元素。
场景：适合要么显示、要么隐藏，且不频繁切换的场景。因为 v-if 涉及 DOM 节点的创建与销毁，切换成本相对较高，但初始渲染时如果条件为 false，则不会渲染该元素，可以节省首次渲染的开销。
v-show 与 v-if 的对比总结
简单来说，v-show 适合频繁切换、对性能要求较高的场景；v-if 适合条件很少变化、希望减少初始渲染开销的场景。在实际开发中，应根据具体需求灵活选择合适的指令。
事件绑定指令：
使用 Vue 时，如需为 DOM 注册事件，极其简单，语法如下v-on:简写为 @事件处理函数
注意：methods 中的函数内部的 this 都指向 Vue 实例
给事件处理函数传参时，如果不传递任何参数，则方法无需加小括号；methods 方法中可以直接使用 e 当作事件对象，如果传递了参数，则实参$event表示事件对象，为固定用法。
属性绑定指令
作用：动态设置 HTML 的标签属性，比如：src、url、title。
语法：v-bind:属性名="表达式" v-bind:可以简写成 => :比如，有一个图片，它的src属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：
<img v-bind:src="url" /> <img :src="url" /> （v-bind可以省略）双向绑定指令：（v-model）
列表渲染指令：（v-for）：Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。需要使用(item, index) in arr形式的特殊语法 ，item 是数组中的每一项，index 是每一项的索引，不需要可以省略，arr 是被遍历的数组，此语法也可以遍历对象和数字
key：
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。（为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用））
注意：
key 的值只能是字符串 或 数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
2.按键修饰符
@keyup.enter —>当点击enter键的时候才触发
v-model修饰符
v-model.trim —>去除首位空格
v-model.number —>转数字
3.事件修饰符
@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
4.计算属性
声明在 computed 配置项中，一个计算属性对应一个函数，使用起来和普通属性一样使用
{ { 计算属性名}}
注意：
computed 配置项和 data 配置项是同级的
computed 中的计算属性虽然是函数的写法，但他依然是个属性
computed 中的计算属性不能和 data 中的属性同名
使用 computed 中的计算属性和使用 data 中的属性是一样的用法
computed 中计算属性内部的 this 依然指向的是 Vue 实例
5.watch侦听器
deep: true对复杂类型进行深度监听
immediate: true初始化时立刻执行一次
data: { obj: { words: '苹果', lang: 'italy' } }，watch完整写法：对象: { deep: true, // 深度监视 immediate: true, // 立即执行 handler 函数 handler (newValue) { console.log(newValue) } }
6.Vue生命周期
beforeCreate → created → beforeMount → mounted
→ beforeUpdate → updated
→ beforeDestroy → destroyed
7.脚手架Vue CL
Vue CLI 是Vue官方提供的一个全局命令工具，可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
好处：
开箱即用，零配置
内置babel等工具
标准化的webpack配置
使用步骤：
全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)
8.普通组件的注册使用-全局注册
特点：全局注册的组件，在项目的任何组件中都能使用
步骤：
创建.vue组件（三个组成部分）
main.js中进行全局注册
注意：组件名规范 —> 大驼峰命名法， 如 HmHeader
语法：Vue.component('组件名', 组件对象)
9.scoped
局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
10.data为什么要写成函数
一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。
11.父子通信流程
父组件通过 props 将数据传递给子组件，子组件内部通过props接收
子组件利用 $emit 通知父组件修改更新，新$emit触发事件，给父组件发送消息通知，父组件监听$emit触发的事件
提供处理函数，在函数的性参中获取传过来的参数
12.非父子通信-event bus总线
作用： 非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)
步骤：创建一个都能访问的事件总线 （空Vue实例）
import Vue from 'vue' const Bus = new Vue() export default BusA组件（接受方），监听Bus的 $on事件
created () { Bus.$on('sendMsg', (msg) => { this.msg = msg }) }B组件（发送方），触发Bus的$emit事件
Bus.$emit('sendMsg', '这是一个消息')
13.非父子通信-provide&inject
父组件 provide提供数据
export default { provide () { return { // 普通类型【非响应式】 color: this.color, // 复杂类型【响应式】 userInfo: this.userInfo, } } }子/孙组件 inject获取数据
export default { inject: ['color','userInfo'], created () { console.log(this.color, this.userInfo) } }注意：provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。子/孙组件通过inject获取的数据，不能在自身组件内修改
14.ref和$refs
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div> mounted () { console.log(this.$refs.chartRef) }15.$nextTick
$nextTick：等 DOM更新后,才会触发执行此方法里的函数体
语法:this.$nextTick(函数体)
this.$nextTick(() => { this.$refs.inp.focus() })注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例
16.自定义指令
内置指令：v-html、v-if、v-bind、v-on... 这都是Vue给咱们内置的一些指令，
自定义指令语法
- 全局注册
//在main.js中 Vue.directive('指令名', { "inserted" (el) { // 可以对 el 标签，扩展额外功能 el.focus() } })- 局部注册
//在Vue组件的配置项中 directives: { "指令名": { inserted () { // 可以对 el 标签，扩展额外功能 el.focus() } } }使用指令
注意：在使用指令的时候，一定要先注册，再使用，否则会报错 使用指令语法： v-指令名。如：<input type="text" v-focus/>
注册指令时不用加v-前缀，但使用时一定要加v-前缀
指令中的配置项介绍
inserted:被绑定元素插入父节点时调用的钩子函数
el：使用指令的那个DOM元素
17.自定义指令-指令的值
需求
实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值
<div v-color="color">我是内容</div>
通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数
directives: { color: { inserted (el, binding) { el.style.color = binding.value }, update (el, bindi
