小白详说 Vue api

全局 API

Vue.extend(option) 

options {object} --- 传入组件配置

解释： 个人理解就是一个 Vue 组件的构造函数，new Vue.extend(options) 则得到一个 Vuecomponent 实例（注意此时为虚拟dom）， 当调用 .$mount() 方法则会得到一个真实的 dom, .$mount('#mount-point') 如果指定节点，则会挂在在当前节点上面，optioin 可以传组件配置，也可以导入一个组件模板传进来。

用法：

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

上面的代码会得到： 

<p>Walter White aka Heisenberg</p> ========= 一个真实的 dom

最后结果如下：

<div id="mount-point">
  <p>Walter White aka Heisenberg</p>
</div>

 

Vue.nextTIck([callback,context])

• {Function} [callback]
• {Object} [context]

解释：在修改数据之后，获得的 dom 并不是最新更新后的。使用这个方法获取更新后的 DOM 后执行延迟回调。

　　返回一个 promise 对象。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

 

Vue.directive(id,[definition])

• {string} id
• {Function | Object} [definition]

解释： 注册或获取全局自定义指令

 

Vue.component( id, [definition] )

• {string} id
• {Function | Object} [definition]

用法：

注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

 

Vue.use(plugin)

• {Object | Function} plugin

理解：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次