vue 混入 mixin ，分发 vue 组件中重复的功能
局部的书写格式
// mixin.js
var mymixin = { // 这是一个对象：对象里面的写法与组件里面的写法一模一样，组件该怎么写，这就怎么写
data(){
return {
a:"hello world"
}
}
}
export default mymixin // 将对象暴露出去
vue 中组件的写法
import mymixin from "./mixin.js" // 引入 mixin.js 文件
export default {
data(){
b:"hello world"
},
mixins:[mymixin], // mixins 的用法，值是一个数组，里面放着 mymixin 的对象
mounted(){
console.log(this) // 组件实例上 data 属性上便拥有了 a 属性了，而且我们在别的组件上引入 mixin.js 的话，也会拥有 a 属性
}
}
注意事项：
我们我们组件中有 data 属性，而 mixin.js 中也有 data 属性，vue 会如何处理呢？
数据对象递归合并（就是说：将 组件中的 data 属性，和 mixin.js 中的 data 属性，合并为一个 data 属性），那么还有一种情况，组件 data 中有一个 a 属性，mixin.js 的 data 中也有一个
a 属性，合并的时候，就只会合并 组件中 a 属性，mixin.js 中的 a 属性，便会被抛弃
2. 全局注入混合 mixin
上面的例子，是局部的使用 mixin ，我们每次使用都需要引入 mixin.js 的文件，那么我们所有的组件都拥有共同的内容，那么使用全局注入 mixin 再好不过了
使用方法：main.js 中
Vue.mixin({ // 全局注入混合对象
data(){
return {
a:"你好，世界"
}
}
})
这样我们的所有组件 data 中都会有 a 这个属性
当然上面的例子只是以 data 为案例，我们组件中的东西都可以写在 mixin 中，只有一个条件，那就是组件中的东西相同
自定义指令：Vue.directive(参数一，参数二) // 参数一：指令的名字 不允许带 v-，参数二：对象
案例：如 v-focus 全局注册
Vue.directive('focus',{
// 当被绑定的元素插入到 dom 中时
inserted(el){
console.log(el) // 被绑定自定义指令的 dom 元素
el.focus() // 元素的自动聚焦方法
}
})
参数二：对象上拥有的钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update：当组件的 VNode 更新时调用
钩子函数的参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：是一个对象，name 指令名，value：指令值
expression：字符串形式的表达式
自定义指令的使用
<input v-focus />
过滤器 // 对数据的处理
标识符 | 俗称管道符
在 vue 组件中
局部
<h1> {{a | upper}} <h1> // 这样我们便得到的大写的 HELLO
export default {
data(){
return {
a:"hello"
}
},
filters:{
upper(value){
console.log(value) // 代表管道符前面的数据
return value.toUpperCase() // 必须 return 对前面数据的处理
}
}
}
全局处理：在 main.js 中
Vue.filter('upper', function (value) {
return value.toUpperCase() // 必须 return
})
// 这样的话所有组件都可以使用 upper 的管道符来将 字符串变大写