當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

VueJS教程4

發(fā)布時(shí)間：2024/4/15 vue 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 VueJS教程4 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

參考：

官方文檔：Vue API

15、Vue指令
- 15.1 全局配置（Vue.config）
  - silent（默認(rèn)值：false），配置為true，取消Vue所有的日志與警告
  - optionMergeStrategies：自定義合并策略的選項(xiàng)
  - devtools：配置是否允許vue-devtools檢查代碼
  - errorHandler：指定組件的渲染和觀察期間未捕獲錯(cuò)誤的處理函數(shù)。這個(gè)處理韓式被調(diào)用時(shí)，可獲取錯(cuò)誤信息和Vue實(shí)例
  - wareHandler：為Vue的運(yùn)行時(shí)警告賦予一個(gè)自定義處理函數(shù)。注意這只會(huì)在開發(fā)環(huán)境下生效，在生產(chǎn)環(huán)境下會(huì)被忽略
  - ignoredElements
  - keyCodes：定義全局的鍵值，如給 v-on 自定義鍵位別名
  - performance：設(shè)置為 true 以在瀏覽器開發(fā)工具的性能/時(shí)間線面板中啟用對(duì)組件初始化、編譯、渲染和打補(bǔ)丁的性能追蹤。只適用于開發(fā)模式和支持 performance.mark API 的瀏覽器上
  - productionTip：設(shè)置為?false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示
- 15.2 全局API
  - （1）Vue.extend(options)：使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象
  - （2）Vue.nextTick([callback, context])：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM
  - （3）Vue.set( target, propertyName/index, value )
  - （4）Vue.delete( target, propertyName/index )
  - （5）Vue.directive( id, [definition] )：注冊(cè)或獲取全局指令，如自定義指令中使用。

　　接著VueJS教程3。

15、Vue指令

15.1 全局配置（Vue.config）

15.2 全局API

（1）Vue.extend(options)

　　使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。
　　data 選項(xiàng)是特例，需要注意 - 在 Vue.extend() 中它必須是函數(shù)。

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 // 創(chuàng)建構(gòu)造器 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 // 創(chuàng)建Profile實(shí)例，并掛載在一個(gè)元素上 27 new Profile().$mount("#mount-point"); 28 </script> 29 </body> 30 31 </html>

　　輸出結(jié)果："Walter White aka Heisenberg"

（2）Vue.nextTick([callback, context])

參數(shù)：

{Function} [callback]
{Object} [context]

　　在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

// 修改數(shù)據(jù) vm.msg = 'Hello' // DOM 還沒有更新 Vue.nextTick(function () {// DOM 更新了 })// 作為一個(gè) Promise 使用 (2.1.0 起新增，詳見接下來的提示) Vue.nextTick().then(function () {// DOM 更新了})

　　輸出結(jié)果：略。

（3）Vue.set( target, propertyName/index, value )

參數(shù)：

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值：設(shè)置的值。

　　向響應(yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新屬性，因?yàn)?Vue 無法探測(cè)普通的新增屬性 (比如 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>

　　輸出結(jié)果：

（4）Vue.delete( target, propertyName/index )

參數(shù)：

{Object | Array} target
{string | number} propertyName/index

　　刪除對(duì)象的屬性。如果對(duì)象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。這個(gè)方法主要用于避開 Vue 不能檢測(cè)到屬性被刪除的限制，但是你應(yīng)該很少會(huì)使用它。

　　舉例如上述所示。

（5）Vue.directive( id, [definition] )

參數(shù)：

{string} id
{Function | Object} [definition]

　　注冊(cè)或獲取全局指令。

轉(zhuǎn)載于:https://www.cnblogs.com/zyjhandsome/p/11200845.html

超強(qiáng)干貨來襲云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的VueJS教程4的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

教程
vuejs

上一篇： Selenium + Grid + Te
下一篇： RabbitMQ操作代码封装