VueJS教程4
參考:
- 官方文檔:Vue API
?
目錄:
- 15、Vue指令
- 15.1 全局配置(Vue.config)
- silent(默認值:false),配置為true,取消Vue所有的日志與警告
- optionMergeStrategies:自定義合并策略的選項
- devtools:配置是否允許vue-devtools檢查代碼
- errorHandler:指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理韓式被調用時,可獲取錯誤信息和Vue實例
- wareHandler:為Vue的運行時警告賦予一個自定義處理函數。注意這只會在開發環境下生效,在生產環境下會被忽略
- ignoredElements
- keyCodes:定義全局的鍵值,如給 v-on 自定義鍵位別名
- performance:設置為 true 以在瀏覽器開發工具的性能/時間線面板中啟用對組件初始化、編譯、渲染和打補丁的性能追蹤。只適用于開發模式和支持 performance.mark API 的瀏覽器上
- productionTip:設置為?false 以阻止 vue 在啟動時生成生產提示
- silent(默認值:false),配置為true,取消Vue所有的日志與警告
- 15.2 全局API
- (1)Vue.extend(options):使用基礎 Vue 構造器,創建一個“子類”。參數是一個包含組件選項的對象
- (2)Vue.nextTick([callback, context]):在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的 DOM
- (3)Vue.set( target, propertyName/index, value )
- (4)Vue.delete( target, propertyName/index )
- (5)Vue.directive( id, [definition] ):注冊或獲取全局指令,如自定義指令中使用。
- 15.1 全局配置(Vue.config)
接著VueJS教程3。
15、Vue指令
15.1 全局配置(Vue.config)
?
15.2 全局API
(1)Vue.extend(options)
使用基礎 Vue 構造器,創建一個“子類”。參數是一個包含組件選項的對象。
data 選項是特例,需要注意 - 在 Vue.extend() 中它必須是函數。
輸出結果:"Walter White aka Heisenberg"
(2)Vue.nextTick([callback, context])
參數:
- {Function} [callback]
- {Object} [context]
在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的 DOM。
// 修改數據 vm.msg = 'Hello' // DOM 還沒有更新 Vue.nextTick(function () {// DOM 更新了 })// 作為一個 Promise 使用 (2.1.0 起新增,詳見接下來的提示) Vue.nextTick().then(function () {// DOM 更新了})輸出結果:略。
(3)Vue.set( target, propertyName/index, value )
參數:
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值:設置的值。
向響應式對象中添加一個屬性,并確保這個新屬性同樣是響應式的,且觸發視圖更新。它必須用于向響應式對象上添加新屬性,因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi')
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>My test page</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 <p>{{arr}}</p> 13 <p v-for="(item, index) in arr" :key="index">index: {{index}}, item: {{item}}</p> 14 </div> 15 16 <script> 17 var app = new Vue({ 18 el: "#app", 19 data: { 20 arr: [1, 2, 3], 21 msg: { 22 age: 18, 23 } 24 }, 25 }); 26 </script> 27 </body> 28 29 </html>輸出結果:
(4)Vue.delete( target, propertyName/index )
參數:
- {Object | Array} target
- {string | number} propertyName/index
刪除對象的屬性。如果對象是響應式的,確保刪除能觸發更新視圖。這個方法主要用于避開 Vue 不能檢測到屬性被刪除的限制,但是你應該很少會使用它。
舉例如上述所示。
(5)Vue.directive( id, [definition] )
參數:
- {string} id
- {Function | Object} [definition]
注冊或獲取全局指令。
?
轉載于:https://www.cnblogs.com/zyjhandsome/p/11200845.html
超強干貨來襲 云風專訪:近40年碼齡,通宵達旦的技術人生總結
- 上一篇: Selenium + Grid + Te
- 下一篇: html5倒计时秒杀怎么做,vue 设