【无标题】
- 动态组件
- 修饰符
- 混入mixins
- 内置组件
- v-model
- 路由懒加载和组件懒加载（异步组件）
- 递归组件
- Vue底层：MVVM架构模式
- 虚拟DOM
1.0 动态组件
通过内置组件component 的属性is 进行组件的动态渲染
<template>
<div>
<component :is="flag?Counter:HelloVue"></component>
<button @click="flag = !flag">取反{{ flag }}</button>
</div>
</template>
<script>
import Counter from './components/Counter.vue'
import HelloVue from '@/views/components/HelloVue.vue';
export default {
data(){
return {
flag:false,
Counter:Counter,
HelloVue
}
}
}
</script>
2.0 Vue修饰符
2.1 事件修饰符
.stop // 帮助你阻止事件冒泡
.prevent // 阻止默认行为
<template>
<div>
<div class="box1" @click="handleBox1">
// 阻止冒泡及默认行为
<a class="box2" @click.stop.prevent="handleBox2" href="https://www.baidu.com"></a>
</div>
// 阻止默认行为
<a href="https://www.baidu.com" @click.prevent>点我</a>
</div>
</template>
2.2 按键修饰符
•.enter // 输入回车时触发
•.space // 输入空格时触发
• .up 上
• .down 下
• .left 左
• .right 右
document.body.addEventListener(‘keyup’,(e)=>{console.log(e.keyCode)}) // 获取你输入的按键码
2.3 表单修饰符
.lazy // 将v-model输入事件从input改变成change事件
.number // 将输入的数据转换为number类型
.trim // 去除输入数据的首尾空格
2.4 .sync修饰符
# 父页面
<template>
# 注意： .sync === @update:value="msg = $event"
<div>
.sync修饰符{{ msg }}
<!-- <son :value="msg" @update:value="msg = $event"></son> -->
<son :value.sync="msg" ></son>
</div>
</template>
#子页面
this.$emit('update:value','嘿嘿')
3.0 mixins混入 【掌握】
可以抽取公共的配置选项，然后混入到你需要的页面
# mixin.js
export default {
data(){
return {
user:{name:'金花宝宝'}
}
},
methods:{
updateUser(){
this.user.name= '张无忌'
}
}
}
#在你需要混入的页面使用
<script>
import mixin from '@/mixins/mixin'
export default {
// 配置选项
mixins:[mixin],
data(){
return {
age:18
}
},
methods:{
getData(){
console.log('嘿嘿');
}
}
}
</script>
4.0 Vue内置组件
- slot : 插槽
- componet ： 动态组件
- transition : 过渡动画
<transition name="动画名">
// 里面放有dom操作的dom节点
<div v-show v-if></div>
</transition>
// 动画效果
.动画名-enter-active, .动画名-leave-active {
transition: opacity .5s;
}
.动画名-enter, .动画名-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
- keep-alive 缓存组件
<keep-alive include="['组件名a', '组件名b']" :max="20" :exclude="['不缓存的组件名','不缓存的组件名']">
// 包裹住你的出口 app.vue
<router-view></router-view>
</keep-alive>
:include="['组件名a', '组件名b']"
:exclude="['不缓存的组件名','不缓存的组件名']"
:max="20" 你最多缓存的组件数量
5.0 自定义的v-model
实现自定义v-model的方法
1、组件接收值的属性value
2、组件内修改这个值的自定义事件名为input
修改v-model的默认配置
export default {
model: {
prop: 'heihei',
event: 'change'
},
props:{
// 接收的属性value
heihei:{
type:String,
default:0
}
},
methods:{
inputData(e){
console.log(e.target.value);
// 输出的事件名 input
this.$emit('change',e.target.value)
}
}
}
6.0 路由懒加载 和 组件懒加载（异步组件）
路由懒加载的作用：
只会根据输入路径之后，再进行针对性组件页面加载，提高首屏加载速度
{
path: '/sync-modifier',
name: 'sync-modifier',
component: () => import('../views/02-.sync修饰符.vue')
}
组件懒加载（异步组件）
在页面渲染到指定位置才开始加载对应的组件
components:{
MyInputNumber:()=>import('./components/MyInputNumber.vue')
},
7.0 递归组件 【理解】
组件自己调用自己
<template>
<div>
<ul >
<li v-for="item in dataList" :key="item.name">{{ item.name }}
<my-menu :dataList="item.children"></my-menu>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'MyMenu',
props:{
dataList:{
type:Array,
default:()=>[]
}
}
}
</script>
8.0 MVVM的底层原理
M：Model 数据模型，主要是提供数据
V： View 视图，主要用于渲染页面
VM： ViewModel视图模型 , 他是连接 M 和V的桥梁
// Model
const data = {
message:'这是初始的值'
}
// View
function render(){
document.querySelector('#app').innerHTML = `
${data.message} οninput="inputchange(this)"/>
${data.message}
`
}
render()
let val = data.message
// ViewModel 是M 和 V之间的桥梁
// 有三个参数 参数1：需要挟持的对象 参数2：需要监听键名 参数3：是个对象，里面有两方法 get set
// 通过defineProperty 将所有操作（访问，修改），转换成get和set
Object.defineProperty(data,'message',{
// 只要有人访问了挟持对象的那个属性就触发get
get(){
console.log('get');
return val
},
// 只要有人修改挟持对象的那个属性就触发set
set(newVal){
console.log('set');
val = newVal
render()
}
})
// V 到 M 的方向
function inputchange(dom){
console.log(dom.value);
data.message = dom.value
}
9.0 虚拟DOM
虚拟是一个js的对象，vue中虚拟dom在beforeMount创建完毕，dom真实节点尚未挂载，当页面发生改变，再次创建一个新的虚拟dom，通过diff算法，将新老虚拟dom,进行比较差异，得到差异地方，进行针对性的局部渲染，大大提高了页面性能，减少不必要的消耗。
diff算法：
- 深度优先原则
- 同层比较原则
• v-for的key并不会在页面渲染,key就是提供给虚拟dom对比使用,优化性能.