进阶语法：

v-model原理：

• 原理：v-model本质上是一个语法糖
• 作用：提供数据的双向绑定
  • 数据变，视图跟着变:value
  • 视图变，数据跟着变@input
• 注意：$event用于在模板中，获取事件的形参

<input v-model="msg" type="text">
//等同于
<input :value="msg" @input="msg = $event.target.value">

• 表单类组件封装
  • 父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
  • 子传父：监听输入，子传父传值给父组件修改

//父组件
<BaseSelect :cityID="selectID" @事件名="selectID = $event"></BaseSelect>

//子组件
<select :value="cityID" @change="handleChange">...</select>

props:{
      cityID:String
},
methods:{
      handleChange(e){
            this.$emit('事件名',e.target.value)
      }
}

• v-model简化代码：
  • 父组件v-model简化代码，实现子组件和父组件数据的双向绑定
    • 子组件中：props通过value接收，事件触发input
    • 负组件中：v-model给组件直接绑定数据

//父组件
<BaseSelect v-model="selectID"></BaseSelect>

//子组件
<select :value="cityID" @change="handleChange">...</select>

props:{
      value:String
},
methods:{
      handleChange(e){
            this.$emit('input',e.target.value)
      }
}

sync修饰符：

• 作用：可以实现子组件和父组件数据的双向绑定，简化代码
• 特点：props属性名可以自定义，非固定为value
• 本质：就是属性名和@update:属性名的合写

//父组件
<BaseDialog :visible.sync="isShow" />
//等同于
<BaseDialog :visible="isShow" @input:visible="isShow=$event" />

//子组件
props:{
      visible:Boolean
},
methods:{
      fn(){
            this.$emit('update:viible',false);
      }
}

ref和$refs：

• 作用：利用ref和$refs可以用于获取dom元素或组件实例
• 特点：查找范围 => 当前组件内（更精确稳定）
• 使用：（获取 dom / 组件）
  • 目标标签 => 添加 ref 属性<div ref="属性名"></div>或<组件名 ref="属性名"></组件名>
  • 恰当时机，通过 this.$ref.属性名 来操作标签，通过 this.$ref.属性名 来获取目标组件，就可以通过 this.$ref.属性名.组件方法() 来调用组件对象里面的方法。
• 补充：图标 echarts 组件安装：#yarn add echarts

Vue异步更新：$nextTick

• $nextTick：等 Dom 更新后，才会触发执行此方法里面的函数。
• 语法：

this.$nextTick(函数体);

自定义指令：

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

使用：

• 全局注册语法：

Vue.directive('指令名',{
      //inserted：当元素被插入后的操作
      "inserted"(el){
            //可以对 el 标签扩展额外的功能
      }
});

• 局部注册语法：

directive：{
      “指令名”:{
            inserted(){
                  //可以对 el 标签扩展额外的功能
            }
      }
}

• 使用：

<div v-指令名></div>

指令的值：

• 语法：
  • 在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值。<div v-指令名="值"></div>
  • 通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数

directive:{
      "指令名":{
            inserted(el,binding){},
            update(el,binding)()
      }
}

插槽：

• 作用：让组件内部的一些结构支持自定义
• 基本语法：
  • 组件内需要定制的结构部分，改用 <slot></slot> 占位。
  • 使用组件时，组件标签内部传入结构替换 slot 。
• 后备内容：
  • 封装组件时，可以为预留的 <slot> 插槽提供后备内容。
  • 语法：在 <slot> 标签内放置内容，作为默认显示的内容。
• 具名插槽：
  • 语法：
    • 多个 slot 使用 name 属性来区分名字 <slot name="插槽名"></slot>
    • template 配合 v-slot:别名 来分发对应的标签

<template v-slot:插槽名>内容</template>
//或
<template #插槽名></template>

• 作用域插槽：
  • 定义 slot 插槽的同时，是可以传值的，给插槽上绑定数据，将来使用组件时可以使用。
  • 使用步骤：
    • 给 slot 标签，以添加属性的方式进行传值。 <slot :子变量名=“组件内的变量名”></slot>
    • 在 template 中，通过 #插槽名=“变量名” 接收，默认插槽名为 default 。

<template #插槽名="变量名">
      <div @click="函数名(变量名.子变量名)"></div>
</template>

单页应用程序：

所有功能在一个 html 页面上实现。