日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > vue >内容正文

vue

VueJS教程4

發布時間:2024/4/15 vue 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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 在啟動時生成生產提示
    • 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] ):注冊或獲取全局指令,如自定義指令中使用。

  接著VueJS教程3。


15、Vue指令

15.1 全局配置(Vue.config)

?

15.2 全局API

(1)Vue.extend(options)

  使用基礎 Vue 構造器,創建一個“子類”。參數是一個包含組件選項的對象。
  data 選項是特例,需要注意 - 在 Vue.extend() 中它必須是函數。

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="mount-point"> </div> 12 13 <script> 14 // 創建構造器 15 var Profile = Vue.extend({ 16 template: `<p>{{firstName}} {{lastName}} aka {{alias}}</p>`, 17 data: function () { 18 return { 19 firstName: "Walter", 20 lastName: "White", 21 alias: "Heisenberg" 22 } 23 } 24 }); 25 26 // 創建Profile實例,并掛載在一個元素上 27 new Profile().$mount("#mount-point"); 28 </script> 29 </body> 30 31 </html>

  輸出結果:"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年碼齡,通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的VueJS教程4的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。