Tag Archives: Vuejs

开发插件

插件通常会为 Vue 添加全局功能。插件的范围没有限制——通常是下面几种：

添加全局方法或属性，如 vue-element

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

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

一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

Vue.js 的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = …
// 2. 添加全局资源
Vue.directive(‘my-directive’, {})
// 3. 添加实例方法
Vue.prototype.$myMethod = …
}
使用插件

通过 Vue.use() 全局方法使用插件：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
也可以传入一个选项对象：

Vue.use(MyPlugin, { someOption: true })
一些插件，如 vue-router，如果 Vue 是全局变量则自动调用 Vue.use()。不过在模块环境中应当始终显式调用 Vue.use()：

// 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require(‘vue’)
var VueRouter = require(‘vue-router’)

// 不要忘了调用此方法
Vue.use(VueRouter)

Read More →

基础

混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时，混合对象的所有选项将被“混入”组件自己的选项中。

示例：

// 定义一个混合对象
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!”

Read More →

基础

类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值：

Vue.filter(‘reverse’, function (value) {
return value.split(”).reverse().join(”)
})
<!– ‘abc’ => ‘cba’ –>
<span v-text=”message | reverse”></span>
过滤器函数可以接收任意数量的参数：

Vue.filter(‘wrap’, function (value, begin, end) {
return begin + value + end
})
<!– ‘hello’ => ‘before hello after’ –>
<span v-text=”message | wrap ‘before’ ‘after'”></span>

Read More →

基础

除了内置指令，Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。

可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令，它接收两个参数指令 ID 与定义对象。也可以用组件的 directives 选项注册一个局部自定义指令。

钩子函数

定义对象可以提供几个钩子函数（都是可选的）：

bind：只调用一次，在指令第一次绑定到元素上时调用。

update： 在 bind 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。

unbind：只调用一次，在指令从元素上解绑时调用。

示例

Vue.directive(‘my-directive’, {
bind: function () {
// 准备工作
// 例如，添加事件处理器或只需要运行一次的高耗任务
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如，删除 bind() 添加的事件监听器
}
})
在注册之后，便可以在 Vue.js 模板中这样用（记着添加前缀 v-）：

<div v-my-directive=”someValue”></div>
当只需要 update 函数时，可以传入一个函数替代定义对象：

Vue.directive(‘my-directive’, function (value) {
// 这个函数用作 update()
})

Read More →

大部分的基础内容我们已经讲到了，现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。

如何追踪变化

把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。这是 ES5 特性，不能打补丁实现，这便是为什么 Vue.js 不支持 IE8 及更低版本。

用户看不到 getter/setters，但是在内部它们让 Vue.js 追踪依赖，在属性被访问和修改时通知变化。一个问题是在浏览器控制台打印数据对象时 getter/setter 的格式化不同，使用 vm.$log() 实例方法可以得到更友好的输出。

模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算 ，也就会导致它的关联指令更新 DOM。

Read More →