Vue 开发基础（下）
Vue 还有一些丰富功能，例如，通过 API(Application Programming Interface，应用程序编程接口) 构建自定义指令、组件、插件，通过 Vue 属性完成更强大的功能。
全局 API
Vue.directive
通过自定义指令可以对低级 DOM 元素进行访问，为 DOM 元素添加新的特征
<body> <div id="app"> <input type="text" v-focus="true"> </div> </body> <script> // focus 对于自定义指令进行注册 Vue.directive(‘focus‘, { // el 自定义指令元素 // binding 指定相关信息 inserted(el, binding) { if (binding.value) { // 判断 el.focus() 的值 若为 true 则文本框获得焦点 反之则无 el.focus() } } }) var vm = new Vue({ el: ‘#app‘, }) </script>
Vue.use
主要用于安装插件，通过插件可以为 Vue 添加全局功能。插件可以是一个对象或一个函数，如果是对象，必须提供 isntall() 方法，用来安装插件；如果是一个函数，则该函数将被当成 install() 方法
<body> <div id="app" v-my-directive></div> </body> <script> // 定义一个 MyPlugin(自定义插件) 对象 let MyPlugin = {} // 编写插件对象的 install 方法 // Vue 为构造器 options 可选配置对象 MyPlugin.install = function (Vue, options) { console.log(options) // 在插件中为 Vue 添加自定义指令 Vue.directive(‘my-directive‘, { bind (el, binding) { // 为自定义指令 v-my-directive 绑定 DOM 元素设置 style 样式 el.style = ‘width:100px;height:100px;background‘ } }) } // 第一个参数 MyPlugin 对于插件对象的插入 /// 第二个参数 someOptions: true 传入可选配置 Vue.use(MyPlugin, { someOption: true }) var vm = new Vue({ el: ‘#app‘ }) </script>
Vue.extend
基于 Vue 构造器创建一个 Vue 子类，可以对 Vue 构造器进行扩展。他有一个 options 参数，表示包含组件选项的对象。
<body> <div id="app1">app1: {{ title }}</div> <div id="app2">app2: {{ title }}</div> </body> <script> // Vue2 为 Vue 的子类 var Vue2 = Vue.extend ({ // 添加 data 数据 data() { // 由于此时 Vue2 还未创建 所以把数据写在函数的返回值中 return { title: ‘hello‘ } } }) // 由于 vm1 没有对于 数据的添加 故代码在执行中会报错（title 属性未定义） var vm1 = new Vue({ el: ‘#app1‘ }) var vm2 = new Vue2({ el: ‘#app2‘ }) </script>
Vue.set
用于响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新
<body> <div id="app"> <div>{{ a }}</div> <div>{{ obj.b }}</div> </div> </body> <script> var vm = new Vue({ el: ‘#app‘, // 根级响应属性必须在 data 中预先声明 data: { a: ‘ 我是根级响应式属性 a ‘, obj: {} } }) // Vue.set(目标对象, 属性名, 属性值) Vue.set(vm.obj, ‘b‘, ‘ 我是 Vue.set 添加的响应式属性 obj.b ‘) </script>
Vue.mixin
全局注册一个混入(Mixin），他将影响之后创建的每一个 Vue 实例。该接口主要提供给插件作者使用，在插件中向组件注入自定义的行为。该接口不推荐在应用代码中使用。
<body> <div id="app"></div> </body> <script> Vue.mixin({ // 获取 muOption 属性， 将其转换为大写字母并后台输出 created() { var myOption = this.$options.myOption if (myOption) { console.log(myOption.toUpperCase()) } } }) var vm = new Vue({ // 自定义属性 myOption: ‘Hello Vue !‘ }) </script>