指定
什么是指令
<div v-text="x"></div><div v-html="x"></div>- 以v-开头的东西就是指令
语法
- v-指令名:参数=值,如 v-on:click=add
- 如果值里没有特殊字符，则可以不加引号
- 有些指令没有参数和值，如 v -pre
- 有些指令没有值，如v-on:click.prevent
修饰符
有些指令支持修饰符
- @click.stop="add"表示阻止事件传播/冒泡
- @click.prevent="add"表示阻止默认动作
- @click.stop.prevent="add"同时表示两种意思
一共有多少修饰符
有很多种，具体看文档
.sysn修饰符
场景描述
- 爸爸给儿子钱，儿子要花钱怎么办，示例
- 答:儿子打电话(触发事件)向爸爸要钱
- Vue规则:组件不能修改props外部数据
- Vue规则: this. event可以获取$emit的参数
- 不要问我为什么有。上面三条规则，这是尤雨溪定的
- 由于这种场景很常见
- 所以尤雨溪发明了.sync,示例
- :money.sync="total"等价于
- :money="total" v-on:update:money="total = $event"
指令directives
两种写法
第一种:声明一个全局指令
Vue。directive('x',directiveOptions)
之后就可以在任意组件使用
第二种:声明一个局部指令
new Vue({
...,
directives:{
"x":directiveOptions
}
})
v-x只能在该实例中使用;
directiveOptions里有哪些属性？
directiveOptions
五个函数属性
- bind(el,info,vnode,oldVnode)-类似create
- inserted(参数同上)-类似mounted
- updated(参数同上)-类似updated
- componentUpdated(参数同上)-用的不多，详情见文档
- unbind(参数同上)-类似destroyed
举例
缩写
- directiveOptions在某些条件下可以缩写为函数，用得不多，可以看文档。
指令的作用
主要用于dom操作
- Vue实例/组件用于数据绑定，事件监听，dom更新
- Vue指令主要目的就是原生dom操作
减少重复
- 如果某个dom操作经常使用,就可以封装成指令，
- 如果某个dom操作比较复杂，也可封装成指令
mixins -混入
- 混入其实就复制
减少重复
类比
- directives的作用就是减少dom操作的重复
- mixins的作用是减少data,methods，钩子的重复
场景描述
- 假设我们需要在每个组件上添加name和time
- 在created,打出提示，并报出存活时间
- 一共有五个组件,怎么做？？？
- 给每个组件添加data和钩子,共五次
- 或者使用mixinx减少重复
- 示例1(未完成)
- 示例1(已完成)
mixins技巧
extends 继承
减少重复
与mixins同样的需求
- 不想要每次都写一个mixins,怎么办
- 你可以使用Vue.extend或options。extends
const MyVue = Vue.extend({
data(){ return {name:'',time:undefined} },
created(){
if(!this.name){console.error('no name!')}
this.time = new Date()
},
beforeDestroy(){
const duration = (new Date()) - this.time
console.log(`${this.name}
}
})
- 然后我们就可以使用new MyVue(options)了
extends是比minxins更抽象一点的封装，如果你嫌弃mixins，可以考虑extends一次，实际使用较少。
provide和inject 提供和注入
使用举例
总结
- 作用:大范围的data和method等共用
- 注意:不能只传themeName不传changeTheme，因为themeName的值是被复制给provide的
- 引用可以做到，但是不推荐，容易失控
