一、Directives 指令

两种写法:

1、声明一个全局指令



Vue.directive('x', directiveOptions)



就可以在任何组件里使用v-x了

例如:声明一个全局指令




element ui button 大小 vue button大小_Vue


在App.vue里点击图片,在HelloWorld.vue点击标题。都会打印x


element ui button 大小 vue button大小_d3_02


element ui button 大小 vue button大小_vue中button如何改变文字的大小_03


2、声明一个局部指令


new Vue({
...,
directives: {
"x": directiveOptions
}
})


v-x只能用在该实例中

例如:这个组件就只能在HelloWorld.vue里使用


element ui button 大小 vue button大小_ide_04


directiveOptions

五个函数属性

  • bind(el绑定的元素,info详细的信息, vnode虚拟节点, oldVnode之前的虚拟节点)-类似created;只调用一次,指令第一次绑定到元素时调用。
  • inserted(参数同上)-类似mounted;被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update(参数同上)-类似updated;
  • componentUpdated(参数同上)-用得不多,参见文档
  • unbind(参数同上)-类似destroyed

自制指令,不用v-on

使用v-on


element ui button 大小 vue button大小_Vue_05


不使用v-on


element ui button 大小 vue button大小_d3_06


我们如何得知用户使用的是click呢,使用info


element ui button 大小 vue button大小_vue中button如何改变文字的大小_07


打出info发现


element ui button 大小 vue button大小_d3_08


element ui button 大小 vue button大小_ide_09


添加了事件监听就要在适当的时机将它删掉,一般会写一个unbind(),当元素消亡的时候就会调用它


element ui button 大小 vue button大小_vue中button如何改变文字的大小_10


directiveOptions在某些条件下可以缩写为函数,用得不多,可以看文档


element ui button 大小 vue button大小_Vue_11


指令的作用

  • 主要用于DOM操作

Vue 实例/组件用于数据绑定、事件监听、DOM更新

Vue指令主要目的就是原生DOM操作

  • 减少重复

如果某个DOM操作你经常使用,就可以封装为指令

如果某个DOM操作比较复杂,也可以封装为指令

二、mixins 混入

混入就是复制,也用来减少重复

类比

  • directives的作用是减少DOM操作的重复
  • mixins的作用是减少data、methods、钩子的重复

举例场景

  • 假设我们需要在每个组件上添加name和time
  • 在created、destroyed时,打出提示,并报出存活时间
  • 一共有五个组件,怎么做?
  • 一、给每个组件添加data和钩子,共五次
  • 二、或者使用mixins减少重复

在Child1上面做以下操作

App.vue


<template>
  <div id="app">
    <Child1/>
    <button>x</button>
    <Child2/>
    <button>x</button>
    <Child3/>
    <button>x</button>
    <Child4/>
    <button>x</button>
    <Child5/>
    <button>x</button>
  </div>
</template>

<script>
import Child1 from "./components/Child1.vue";
import Child2 from "./components/Child2.vue";
import Child3 from "./components/Child3.vue";
import Child4 from "./components/Child4.vue";
import Child5 from "./components/Child5.vue";
export default {
  name: "App",
  data() {
    return{}
  },
  components: {
    Child1,
    Child2,
    Child3,
    Child4,
    Child5
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


element ui button 大小 vue button大小_d3_12


element ui button 大小 vue button大小_d3_13


设置默认看得见


element ui button 大小 vue button大小_vue中button如何改变文字的大小_14


点击x按钮就设置死亡


element ui button 大小 vue button大小_ide_15


element ui button 大小 vue button大小_d3_16


如果要对其他Child组件也做同样的操作,那么就会重复,因此我们使用mixins,创建目录mixins创建文件log.js来记录生和死,将共同对象复制进去


element ui button 大小 vue button大小_d3_17


把mixins的date(),created(),beforeDestory()复制进去


element ui button 大小 vue button大小_Vue_18


同理对child其他组件也做同样的操作,但name都会是child1,因此


element ui button 大小 vue button大小_Vue_19


在child组件里自行设置name,log里面的data和组件的data会智能合并


element ui button 大小 vue button大小_vue中button如何改变文字的大小_20


element ui button 大小 vue button大小_d3_21


三、extends 继承

与mixins同样的需求,不想要每次写一个mixins

创建MyVue.js


element ui button 大小 vue button大小_Vue_22


element ui button 大小 vue button大小_vue中button如何改变文字的大小_23


和mixins联合使用

注意使用Vue.就是extend,用选项是extends


element ui button 大小 vue button大小_ide_24


extends是比mixins更抽象的封装

四、provide和inject 提供和注入

应用举例 例子

  • 一键换肤功能:默认蓝色,可以切换为红色
  • 文字大小:默认正常,可以改成大或小


element ui button 大小 vue button大小_ide_25


<div :class="`app theme-${themeName}`">
此处""是XML的引号 ``是JS的
div有两个class 第一个是app,第二额是theme-${themeName}


element ui button 大小 vue button大小_Vue_26


创建一个换肤组件,并引入


element ui button 大小 vue button大小_Vue_27


element ui button 大小 vue button大小_Vue_28


使用provide将themeName提供出去


element ui button 大小 vue button大小_Vue_29


再将提供的注入组件中


element ui button 大小 vue button大小_d3_30


element ui button 大小 vue button大小_ide_31


尝试修改themeName,发现修改皮肤颜色失败,字符串提供过来后就已经是复制的,而这里我们只是修改的复制的那个字符串


element ui button 大小 vue button大小_Vue_32


但我们可以去调用函数


element ui button 大小 vue button大小_Vue_33


element ui button 大小 vue button大小_vue中button如何改变文字的大小_34


则可换肤成功


element ui button 大小 vue button大小_vue中button如何改变文字的大小_35


同理修改设置字体大小


element ui button 大小 vue button大小_vue中button如何改变文字的大小_36


element ui button 大小 vue button大小_vue中button如何改变文字的大小_37


element ui button 大小 vue button大小_Vue_38


设置好css


element ui button 大小 vue button大小_Vue_39


在组件里注入


element ui button 大小 vue button大小_vue中button如何改变文字的大小_40


总结

  • 作用:大范围的data 和method等共用
  • 注意:不能只传themeName不传changeTheme,因为themeName的值是被复制给provide的

总结

directives指令

  • 全局用Vue.directive('x',{..})
  • 局部用options.directives
  • 作用是减少DOM操作相关重复代码

mixins混入

  • 全局用Vue.mixin({...})
  • 局部用options.mixins:[mixin1,mixin2]
  • 作用是减少options里的重复

extends继承/扩展

  • 全局用Vue.extend({...)
  • 局部用options.extends:{...]
  • 作用跟 mixins差不多,只是形式不同

provide /inject提供和注入

  • 祖先提供东西,后代注入东西
  • 作用是大范围、隔N代共享信息(数据或者方法)