认识Vue21.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 → destroyed7.脚手架Vue CLVue 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 Bus A组件（接受方），监听Bus的 $on事件created () { Bus.$on('sendMsg', (msg) = { this.msg = msg }) }B组件（发送方），触发Bus的$emit事件Bus.$emit('sendMsg', '这是一个消息')13.非父子通信-provideinject父组件 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 VUE相关
认识Vue21.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 → destroyed7.脚手架Vue CLVue 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 Bus A组件（接受方），监听Bus的 $on事件created () { Bus.$on('sendMsg', (msg) = { this.msg = msg }) }B组件（发送方），触发Bus的$emit事件Bus.$emit('sendMsg', '这是一个消息')13.非父子通信-provideinject父组件 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