Vue框架学习（五）

---

一、全局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/)