从零开始的vue学习笔记（六）

混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。简单解释就是把一个Vue组件中的内容提供给别的组件来用。例子：

  // 定义一个混入对象

    var myMixin = {

    created: function () {

        this.hello()

    },

    methods: {

        hello: function () {

        console.log('hello from mixin!')

        }

    }

    }

    // 定义一个使用混入对象的组件

    var Component = Vue.extend({

    mixins: [myMixin]

    })

    var component = new Component() // => "hello from mixin!"

补充：这部分有一些api：Vue.extend()、mixins选项，Vue.mixin( mixin )，可以参考查找vue.js api指南查看详细

另外有选项合并、全局混入、自定义选项合并策略，请参考官方文档

自定义指令

Vue 允许我们注册自定义指令。Vue.directive()、directives选项，api参考，官方示例

指令定义对象可以提供如下几个钩子函数：

bind
inserted
update
componentUpdated
unbind

渲染函数&JSX

渲染函数render用来配合JSX(一种javascript的扩展写法，加入了xml，主要用在react里)，实现跟模板template写法同样的效果，优势是更加的灵活，劣势是开发难度较大，没有模板语法简单。Vue的模板语法或者用JSX+渲染函数，需要达到的效果是一致的，实际在底层他们都会被编译为纯javascript代码。

vm.$slots、vm.$options、vm.$scopedSlots参考实例属性 API

需要了解的概念：虚拟DOM、createElement 参数（一般简写为h或者不写）、Babel 插件（用于在 Vue 中使用 JSX 语法，让我们回到更接近于模板的语法上）

函数式组件

没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，没有实例，可以理解为静态函数。用functional来标记，例子：

    Vue.component('my-component', {

    functional: true,

    // Props 是可选的

    props: {

        // ...

    },

    // 为了弥补缺少的实例

    // 提供第二个参数作为上下文

    render: function (createElement, context) {

        // ...

    }

    })

单文件组件中，基于模板的函数式组件可以这样声明：

  <template functional>

  </template>

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者属性。如: vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成。

    // 调用 `MyPlugin.install(Vue)`

    Vue.use(MyPlugin)

    new Vue({

    // ...组件选项

    })

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

  <!-- 在双花括号中 -->

  {{ message | capitalize }}

  <!-- 在 `v-bind` 中 -->

  <div v-bind:id="rawId | formatId"></div>

组件的选项中定义本地的过滤器：filters选项，参考

创建 Vue 实例之前全局定义过滤器：Vue.filter()，参考