01-v-model语法糖

官网文档：组件使用v-model

• v-model本质上是 value属性和input事件的一层包装

• v-model的作用：提供数据的双向绑定

  • 数据发生了改变，页面会自动变 v-bind:value

  • 页面输入改变 ， 数据会自动变化 v-on:input

• v-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件

很显然如果每次使用input框，都需要提供value和input事件，比较麻烦，所以使用v-model

• App.vue

​

​

02-组件使用v-model

• 我们经常遇到一种场景：

  1. 父组件提供一个数据给子组件使用（父传子）

  2. 子组件又需要修改父组件传过来的这个数据，所以需要子传父把值传给父组件。

• 这种场景可以使用v-model进行简写。

  • 定义组件的时候，注意接收的值叫value， 子传父触发的事件叫 input

如果父传子的props值叫 value, 且 子传父触发的事件叫 input 。 那么这两个功能就可以使用v-model来简写

03-ref和$refs(vue操作dom)

• 官方文档：API — Vue.js

• ref作用：在vue中操作dom元素或组件vm实例

  • vue不推荐我们直接操作dom。如果真的要在vue中操作dom,可以使用ref语法

    • 说人话 ： vue不能直接操作dom，真的要操作也要按vue规定的语法来。（ref语法）

• 每个 vue 的组件实例上，都包含一个$refs 对象，里面存储着对应的DOM 元素或组件的引用。

ref语法使用流程语法

(1)给标签添加自定义属性red :

• vue会自动把页面所有的ref属性，挂载到vue实例的$ref对象中

(2)通过 vm.$refs.属性名 获取该标签

• 一定要注意 : vue在mounted勾子中完成页面真实DOM渲染，所以最早能获取dom的就是mounted钩子

ref易错点

1.添加的的时候是: ref

2.获取的时候是: $refs

1 给需要获取的 dom 元素或者组件, 添加 ref 属性

2 通过 this.$refs.xxx 获取, 拿到组件可以调用组件的方法

• 子组件代码Goods.vue

​

​

04-$nextTick使用

需求1: 点击按钮, 切换显示输入框

​

​

需求2: 显示输入框的同时, 要获取焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。

直接调用会报错, 因为 vue 是 异步dom更新的 (提升渲染效率), this.showInput = true 执行完时, 实际的 dom 还没渲染出来

​
fn () {this.isShowInput = truethis.$refs.inp.focus()
}

组件的 $nextTick(callback) 方法，会把 callback 回调推迟到下一个 DOM 更新周期之后执行。

通俗的理解是：等组件的DOM 刷新之后，再执行 callback 回调函数。从而能保证 callback 函数可以操作到最新的 DOM 元素。

​

​

05-dynamic动态组件

• 什么是动态组件: 让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

  • 混淆点解读：动态组件 看起来和v-if v-else功能有些类似，但其实两者是不同的。

    • v-if v-else : 只是根据条件来决定渲染哪一个盒子，不能像组件那样复用。

    • 动态组件：通过设置组件名，让一个挂载点可以切换不同的组件

• App.vue

​

• UserAccount.vue

• UserInfo.vue

06-自定义指令

• 官方文档：自定义指令 — Vue.js

• 1.复习指令作用 ： 给标签添加额外的功能

• 2.复习指令本质 ： 行内自定义属性

• 3.自定义指令作用 ： 给标签添加 vue没有的，额外的功能

1.1-自定义指令：局部注册

• 局部注册：只能在当前组件使用

• 需求：

  • 1.添加一个自定义指令 v-focus,作用是让input表单自动聚焦

  • 2.添加一个自定义指令v-color,作用是设置标签文本颜色

1.2-自定义指令：全局注册

• 全局注册： 在main.js中注册，任何地方可用

// 全局指令 - 任何组件内"直接"使用
Vue.directive("focus", {inserted(el) {el.focus() // 触发标签的事件方法}
})

07-slot匿名插槽

课前准备

匿名(默认)插槽使用

插槽作用： 父组件 传递 结构 给 子组件

官网文档：

通过插槽分发内容

插槽后备内容

插槽使用2个步骤

第一步：在子组件中定义一个插槽 默认值：如果父组件没有传递则默认显示

第二步：在父组件中传递结构: <子组件>父组件需要传递的结构

• 子组件goods.vue

• 父组件App.vue

知识点验收

注意

1. 插槽的作用是什么让父组件传递什么到子组件中?

   html结构

2. 插槽的默认值写哪里?

   默认值

08-slot具名插槽

• 官方文档：具名插槽

  • 具名插槽实际开发应用：Vant 4 - Lightweight Mobile UI Components built on Vue

• 1.插槽作用： 父组件 传递html结构 给子组件

  • 给所有slot分发相同内容

• 2.具名插槽作用： 父组件 传递多个html结构 给子组件

  • 给不同slot分发不同内容

具名插槽语法如下

1.给子组件的添加name属性 ： name="插槽名"

2.父组件使用v-slot:插槽名 : 给指定的插槽传递结构

• 注意：这个v-slot指令必须要写在