Vue框架学习05
一、全局API
1、Vue.directive
在 Vue 中，有很多内置指令，如v-model、v-for、v-bind等。除了内置指令，开发人员也可以根据需求注册自定义指令。通过自定义指令可以对低级DOM元素进行访问，为DOM元素添加新的特性。
示例代码如下：
<div id="app">
<!-- 给<input>标签设置自定义指令 v-focus，初始值为true -->
<input type="text" v-focus="true">
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// inserted 钩子函数，其中的 binding 表示指令的相关信息。
// binding.value的值，也就是<input>标签中 v-focus 的值
inserted (el, binding) {
if (binding.value) {
el.focus()
}
}
})
var vm = new Vue({
el: '#app'
})
</script>
上述代码用于在页面初始化时，控制input文本框是否自动获得焦点。
2、Vue.use
Vue.use主要用于在 Vue 中安装插件，通过插件可以为 Vue 添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果是一个函数，则该函数将被当成install()方法。
示例代码如下：
<div id="app" v-my-directive></div>
<script>
// 定义一个 MyPlugin(自定义插件) 对象
let MyPlugin = {}
// 编写插件对象的 install 方法
// 其中，第一个参数Vue：Vue的构造器，第二个参数options：一个可选的配置对象
MyPlugin.install = function (Vue, options) {
console.log(options)
// 在插件中为Vue添加自定义指令
Vue.directive('my-directive', {
bind (el, binding) {
// 为自定义指令vm-my-directive绑定的DOM元素设置style样式
el.style = 'width:100px; height:100px; background-color:#ccc'
}
})
}
// 在Vue中安装插件
Vue.use(MyPlugin, { someOption: true })
var vm = new Vue({
el: '#app'
})
</script>
3、Vue.extend
Vue.extend用于基于 Vue 构造器创建一个 Vue 子类，可以对 Vue 构造器进行扩展。它有一个option参数，表示包含组件选项的对象。
示例代码如下：
<div id="app1">app1: {{title}}</div>
<div id="app2">app2: {{title}}</div>
<script>
var Vue2 = Vue.extend({
data () {
return {title: 'hello'}
}
})
var vm1 = new Vue({
el: '#app1'
})
var vm2 = new Vue2({
el: '#app2'
})
</script>
// 运行结果：
// app1:
// app2:hello
4、Vue.set
Vue.set用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
示例代码如下：
<div id="app">
<div>{{a}}</div>
<div>{{obj.b}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '我是根级响应式属性a',
obj: {}
}
})
Vue.set(vm.obj, 'b', '我是 Vue.set 添加的响应式属性 obj.b')
</script>
上述代码中，Vue.set()方法为对象obj添加响应式属性b，第一个参数vm.obj表示目标对象，第二个参数b表示属性名，第三个参数是属性值。
5、Vue.mixin
Vue.mixin用于全局注册一个混入(mixin)，它将影响之后创建的每一个 Vue 实例。
示例代码如下：
<div id="app"></div>
<script>
Vue.mixin({
created () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption.toUpperCase())
}
}
})
var vm = new Vue({
myOption: 'hello vue!'
})
</script>
// 运行结果：
// 浏览器控制台输出：“HELLO VUE!”
参考资料：
1、《Vue.js 前端开发实战》，黑马程序员.
2、Vue 2.x 官方API文档. (https://cn.vuejs.org/v2/api/)