从零开始的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 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

  1. 添加全局方法或者属性。如: vue-custom-element

  2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch

  3. 通过全局混入来添加一些组件选项。如 vue-router

  4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

  5. 一个库，提供自己的 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()，参考

posted on 2019-10-14 14:24  西街二叔  阅读(381)  评论(0)  编辑  收藏  举报

导航