vue中button如何改变文字的大小_Vue进阶属性

一、Directives 指令

两种写法：

1、声明一个全局指令

Vue.directive('x', directiveOptions)

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

例如：声明一个全局指令

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

2、声明一个局部指令

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

v-x只能用在该实例中

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

directiveOptions

五个函数属性

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

自制指令，不用v-on

使用v-on

不使用v-on

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

打出info发现

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

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

指令的作用

• 主要用于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>

设置默认看得见

点击x按钮就设置死亡

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

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

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

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

三、extends 继承

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

创建MyVue.js

和mixins联合使用

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

extends是比mixins更抽象的封装

四、provide和inject 提供和注入

应用举例 例子

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

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

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

使用provide将themeName提供出去

再将提供的注入组件中

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

但我们可以去调用函数

则可换肤成功

同理修改设置字体大小

设置好css

在组件里注入

总结

• 作用:大范围的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代共享信息（数据或者方法）