Vue 開發基礎（下）01
阿新 • • 發佈：2021-07-10
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>