vue 混入 mixin，自定义指令，过滤器

　　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 的管道符来将 字符串变大写