vue详解（4）

1. v-model 原理

• 原理：v-model本质上是一个语法糖。例如应用在输入框上，就是 value属性 和 input事件 的合写。
• 作用：提供数据的双向绑定。① 数据变，视图跟着变 :value；② 视图变，数据跟着变 @input
• 注意：$event 用于在模板中，获取事件的形参

<template>
<div id="app" >
<input v-model="msg" type="text">
<input :value="msg" @input="msg = $event.target.value" type="text">
</div>
</template>

2. 表单类组件封装 & v-model 简化代码

• 1.表单类组件 封装 → 实现 子组件 和 父组件数据 的双向绑定
  ① 父传子：数据 应该是父组件 props 传递 过来的，拆解 v-model 绑定数据
  ② 子传父：监听输入，子传父传值给父组件修改
  （下拉菜单监听事件：@change）

//父组件使用
//$event拿到当前时间的形参
<BaseSelect :cityId="selectId" @事件名="selecteId = $event" />

<select :value="cityId" @change="handleChange">...</select>
//子组件封装，子组件不能写v-model是因为数据是父组件的，而不是自己的，所以不能使用v-model
props: {
cityId: String
},
methods: {
handleChange (e) {
//e为触发的事件 e.target为触发事件的事件源
this.$emit('事件名', e.target.value)
}
}

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

//父组件使用
//:value="selectId"和@input="selectId = $event"
<BaseSelect v-model="selectId"></BaseSelect>

//子组件封装
<select :value="value" @change="handleChange">...</select>
props: {
value: String
},
methods: {
handleChange (e) {
this.$emit('input', e.target.value)
}
}

3 .sync 修饰符

• 作用：可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
• 特点：prop属性名，可以自定义，非固定为 value
• 场景：封装弹框类的基础组件， visible属性 true显示 false隐藏
• 本质：就是 :属性名 和 @update:属性名 合写

//父组件使用
BaseDialog :visible.sync="isShow" />
<BaseDialog
:visible="isShow" 
@update:visible="isShow = $event"
/>

//子组件封装
props: {
visible: Boolean
},
this.$emit('update:visible', false)

4. ref 和 $refs

• 作用：利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例
• **特点：**查找范围 → 当前组件内 (更精确稳定)
• ① 获取 dom：
  1.目标标签 – 添加 ref 属性

<div ref="chartRef">我是渲染图表的容器</div>

2.恰当时机, 通过 this.$refs.xxx, 获取目标标签

mounted () {
console.log(this.$refs.chartRef)
},

（注：querySelector 查找范围 → 整个页面）

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.box'));

echarts的安装：
npm install echarts --save

• ② 获取组件：
  1.目标组件 – 添加 ref 属性
  <BaseForm ref="baseForm"></BaseForm>

2.恰当时机, 通过 this.$refs.xxx,获取目标组件，就可以\ast \ast 调用组件对象里面的方法\ast \ast ‘this.$refs.baseForm.组件方法()`

5. Vue异步更新、$nextTick

• Vue 是 异步更新 DOM (提升性能)
• $nextTick：等 DOM 更新后, 才会触发执行此方法里的函数体
• 语法: this.$nextTick(函数体)

this.$nextTick(() => {
this.$refs.inp.focus()
})

6、打包发布

• 命令npm run build
  结果：在项目的根目录会自动创建一个文件夹’dist’,dist中的文件就是打包后的文件，只需要放到服务器中即可。
• 在vue.config.js里的defiConfig对象中加入publicPath: './

7、打包优化：路由懒加载

说明：为了防止打包构建应用时，JavaScript包会变得非常大，影响页面加载。所以我们要把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

• 异步组件改造（找到路由index.js）
  用户频繁访问到的首页等，就让它进行默认加载；除了首页的所有内容，按需加载

//导入，变成变量要往下放
const Login = () => import('@/views/login')
const Search = () => import('@views/search')
...

• 路由中的应用

const rount = new VueRouter({routes: [...{ path: '/login/:id', component: Login },{ path: '/search', component: Search }...]
})