Vue基础:三、全局API

1. Vue.directive 自定义指令 - ({string} id, {Function | Object} [definition])

 Vue.directive("jxch", {
            // el: 标签; binding: 对象
            bind: function (el, binding, vnode) {//被绑定
                console.log('1 - bind');
                el.style = "color:" + binding.value
            },
            inserted: function () {//绑定到节点
                console.log('2 - inserted');
            },
            update: function () {//组件更新
                console.log('3 - update');
            },
            componentUpdated: function () {//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind: function () {//解绑  app.$destroy();时触发
                console.log('1 - bind');
            }
        })
// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')

2. Vue.extend 构造器 - ({Object} options)

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () { // data必须是个Function,返回数据对象
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

3. Vue.set - ()

posted @ 2019-09-05 20:03  qianbuhan  阅读(91)  评论(0)    收藏  举报