Vue全局API

最新推荐文章于 2023-07-24 11:04:23 发布

zvapour

最新推荐文章于 2023-07-24 11:04:23 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/qq_36303110/article/details/111941542

版权

本文介绍了Vue.js的全局API，包括Vue.use()用于安装插件，Vue.compile()用于编译模板，Vue.Observable()使对象响应式，Vue.extend()用于创建组件构造器，以及Vue.filter的相关使用。

摘要由CSDN通过智能技术生成

Vue全局API

Vue.use()

如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入
当 install 方法被同一个插件多次调用，插件将只会被安装一次。

Vue.compile(template)

将一个模板字符串编译成 render 函数,只在完整版可用

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

Vue.Observable()

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

Vue.extend()

extend创建的是一个组件构造器，而不是一个具体的组件实例
可以理解为当在模版中遇到该组件名称作为标签的自定义元素时，会自动调用这个实例构造器来生成组件实例，并挂载到指定元素上

<div id="mount-point"></div>
// 创建构造器
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')

// 或者
new Profile({el:'#mount-point'})

Vue.filter

Vue.filter("multiple", function(value: any, value1: any) {  // 默认第一个参数是 "|" 前面的变量
  console.log(value);
  console.log(value1);
  return value * value1;
});


// use
{{ value | multiple(value1) }}
v-bind:id = "value | multiple(value1)"