vueAPI官方檔案：https://cn.vuejs.org/v2/api/
vue提供API非常多，但常用的也就以下四種，我們會從它們的功能描述、使用場景、使用方式幾個方面簡單了解其如何使用，如果有能力的同學可以去看看原始碼和具體實作！
set、delete
功能描述
作用：更改回應式資料的屬性，并確保這個新屬性同樣是回應式的，并且觸發視圖的更新，set用于向回應式物件上添加新屬性，delete用于洗掉物件的某個屬性！
set、delete的用法基本一致，這里我們將以set為例，說一下其用法！
// 用法1
Vue.set( target, key, value )
Vue.delete( target, key )
// 用法2
vm.$set( target, key, value )
vm.$delete( target, key )
說明：
- target：目標物件
- key：要添加的屬性名
- value：要添加的屬性值
注意 delete的key值在vue2.2以上版本中支持Array + index 即list[1]用法，
使用場景
假如我們有一個商品串列，每個串列包含了商品名稱、商品價格和用戶購買商品的數量，這三個欄位，但是在服務器端對于商品串列而言是沒有用戶購買商品的數量這個概念的，所以服務器只能回傳商品的名稱和價格，至于數量這個欄位需要你自己去添加上去，
例子：
<div id="app">
<ul>
<li v-for="(item, index) in goods" :key="index">
<span>名稱：{{item.name}}</span>
<span>價格：{{item.price.toFixed(2)}}</span>
<span>數量:{{item.num}}</span>
<br>
<input type="button" value="+" @click="item.num += 1">
<input type="button" value="-" @click="item.num -= 1">
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
goods: []
},
created () {
let $this = this;
setTimeout(() => {
$this.goods = [
{
name: 'android',
price: 12.99
},
{
name: 'IOS',
price: 13.99
},
{
name: 'javaScript',
price: 14.99
}
];
$this.goods.forEach(item => {
// item.num = 1;
vm.$set(item, 'num', 1);
// Vue.set(item, 'num', 1);
});
}, 3000);
}
});
</script>
這里我們在created函式鉤子里,也就是資料掛載階段，我們用了一個定時器定時3秒來模擬一個真實的網路請求，利用vue.set向goods的每個物件里默認傳進了一個num屬性，此時這個num屬性就可以實時渲染到頁面，并為input按鈕做了點擊事件，就實作了實時更新數量的需求！
注意：vm.$set和Vue.set的最終結果都是一樣的，delete的用法與set類似，大家自行看說明即可！
filter
vue的過濾器分為全域過濾器和區域過濾器！
過濾器的使用
當定義了一個 filter，可以在雙花括號插值{{ message|filter }}或者 v-bind 運算式（后者從 2.1.0+ 開始支持）的尾部，通過 | “管道符號”來使用我們定義的 filter，
創建過濾器
filter 的定義有兩種方式：
- 在創建 Vue 實體之前進行全域定義過濾器，如下，這種方式定義出的過濾器為全域使用的，
定義全域過濾器
// 創建 Vue 實體之前全域定義過濾器
Vue.filter('filterName', function (value) {
...
return retValue;
});
new Vue({...})
- 使用 filters 選項來定義本地的過濾器，如下，這種方式定義的過濾器為單檔案組件中使用，
filters: {
filterName: function (value) {
...
return retValue;
}
}
使用場景
filter（過濾器）可以用于文本格式化，文本格式化的意思為：把一些文本內容（可以是用戶輸入的內容，也可以是服務器回傳內容，或者是任何你想要進行文本處理的內容），按照你想要的格式進行重新編排，
假如我們需要把用戶輸入的英文單詞首字母轉為大寫，其余為小寫，假如我需要全域使用就可以定義一個全域過濾器！
例子：
<div id="app">
<p>{{ message|titleCase }}</p>
</div>
<script type="text/javascript">
// 定義一個全域titleCase過濾器
Vue.filter('titleCase', function(value){
//把字串所有的字母變為小寫，并根據空格轉換成字符陣列
var arr = value.toLowerCase().split(" ")
// 遍歷陣列
for(var i=0; i<arr.length; i++){
// 把第一個字符變為大寫,其余變為小寫
arr[i] = arr[i].slice(0,1).toUpperCase() + arr[i].slice(1).toLowerCase();
}
// 加上空格回傳
return arr.join(" ");
})
var app = new Vue({
el:"#app",
data:{
message: "config is an object containing vue application global configurations. "
}
})
</script>
案例二：
- 區域過濾器使用，將用戶輸入的車牌號轉為大寫
<div id="app">
<p>魯A·{{plateNum | plateNumFilter}}</p>
<br>
<input type="text" v-model="plateNum">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
plateNum: ''
},
filters: {
// val為系結的文本內容，在這里為 plateNum
plateNumFilter: function (val) {
// return 的內容就是通過 plateNumFilter過濾器重新編排之后的內容
return val.toUpperCase().substring(0, 5);
}
}
});
</script>
同時，filter 可以接收引數（filter 總接收運算式的值作為第一個引數），并且可以進行串聯（多個 filter），我們把上面的例子做一下修改，希望 filter 更加的專注，同時字串的截取可以進行復用，
<p>陜A·{{plateNum | toUpperCaseFilter | substringFilter(5)}}</p>
Vue.filter('toUpperCaseFilter', function (val) {
return val.toUpperCase();
});
Vue.filter('substringFilter', function (val, endNum) {
return val.substring(0, endNum);
});
我們創建了兩個 filter，其中 toUpperCaseFilter 會把文本內容轉化為大寫，substringFilter 會截取固定長度的字串，這樣使的它們的功能變得更加純粹，可以更好的進行復用，這也是我們比較推薦的一種寫法，利用這兩個 filter 的組合，來達到我們的目的，
注意：
當有區域和全域兩個名稱相同的過濾器時候，會以就近原則進行呼叫，即：區域過濾器優先于全域過濾器被呼叫！
directive
directive創建
與 filter 一樣，directive 同樣有兩種定義方式：
- 在創建 Vue 實體之前，通過 Vue.directive 進行全域定義指令，如下，這種方式定義的指令為全域使用的，
Vue.directive('directiveName', {
...
})
new Vue({...})
- 使用 directives 選項來定義本地的指令，如下，這種方式定義的指令為單檔案組件中使用的，
directives: {
directiveName: {
...
}
}
功能描述
directive 為 Vue 中的自定義指令，在前面學習過的 v-model、v-show 都屬于 Vue 中提供的默認指令，當 Vue 提供的默認指令不足以滿足我們的需求時，就可以通過 directive 來添加自定義指令，
使用場景
我們可以假設 Vue 中并沒有提供 v-show 的指令，那么就可以使用 directive 來模擬實作一下 v-show 做的事情，可以創建一個 v-demo 指令，根據我們傳入的條件來控制 DOM 的顯示和隱藏，先來看一下這個需求應該怎么實作，
<div id="app">
<span v-demo="isShow">Hello v-demo</span>
</div>
<script>
Vue.directive('demo', {
bind: function (el, binding, vnode, oldVnode) {
el._originalDisplay = el.style.display;
if (!binding.value) {
el.style.display = 'none';
}
},
update: function (el, binding, vnode, oldVnode) {
if (!binding.value === !binding.oldValue) return;
binding.value ? el.style.display = el._originalDisplay : el.style.display = 'none';
},
})
var vm = new Vue({
el: '#app',
data: {
isShow: true
}
});
</script>
我們可以通過控制 isShow，來控制Hello v-demo的顯示和隱藏,這個比較簡單不能實時渲染，
directive 的創建略微復雜，當通過 Vue.directive 方法來創建一個 directive 時，它接收兩個引數，第一個引數為指令名，添加的指令名可以通過v-指令名的形式來呼叫，比如Vue.directive(‘demo’, {…})，我們通過這種方式添加了一個指令名為 demo 的 directive，然后就可以在 DOM 中通過v-demo的方式來使用，
第二個引數為一個物件，這個物件提供了幾個函式鉤子用于描述 directive 創建、更新、銷毀的各個狀態，并且提供了一些引數使我們可以在這些鉤子函式里面進行操作，我們看一下它提供的鉤子函式都有哪些：
- bind：只呼叫一次，指令第一次系結到元素時呼叫，在這里可以進行一次性的初始化設定，
- inserted：被系結元素插入父節點時呼叫（僅保證父節點存在，但不一定已被插入檔案中），
- update：所在組件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前，指令的值可能發生了改變，也可能沒有，但是可以通過比較更新前后的值來忽略不必要的模板更新（詳細的鉤子函式引數如下），
- componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后呼叫，
- unbind：只呼叫一次，指令與元素解綁時呼叫，
以上所有的方法都接收 4 個引數，分別如下，
- el：指令所系結的元素，可以用來直接操作 DOM，
- binding：一個物件，包含以下屬性：
- name：指令名，不包括 v- 前綴，
- value：指令的系結值，例如，v-my-directive=“1 + 1” 中，系結值為 2，
- oldValue：指令系結的前一個值，僅在 update 和 componentUpdated 鉤子中可用，無論值是否改變都可用，
- expression：字串形式的指令運算式，例如，v-my-directive=“1 + 1” 中，運算式為 “1 + 1”，
- arg：傳給指令的引數，可選，例如，v-my-directive:foo 中，引數為 “foo”，
- modifiers：一個包含修飾符的物件，例如，v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }，
- vnode：Vue 編譯生成的虛擬節點，
- oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用，
除了 el 之外，其他引數都應該是只讀的，切勿進行修改，如果需要在鉤子之間共享資料，建議通過元素的 dataset 來進行，
參考：vue官網自定義指令
nextTick
功能描述
官網解釋
：在下次 DOM 更新回圈結束之后執行延遲回呼，在修改資料之后立即使用這個方法，獲取更新后的 DOM，
官網的說法永遠都是那么官方，我們把它用大白話解釋一下：
如果有一些方法需要在 DOM 渲染完成之后執行，那么就可以監聽 nextTick 來獲取重新渲染之后的 DOM,專業點說就是nextTick是DOM渲染的回呼方法！
使用
nextTick 的使用有兩種方式:
Vue.nextTick( [callback, context] )vm.$nextTick( [callback] )
這兩種方式的唯一區別為：this的指向不同，使用Vue.nextTick( [callback, context] )的時候this默認指向window（我們也可以根據他的第二個引數來改變它的默認指向），使用vm.$nextTick( [callback] )的時候this默認指向 呼叫它的實體（vm），
應用場景
現在有一個<p>標簽，這個標簽用來承載一段描述資訊，我們需要獲取到
展示了描述資訊之后的高度，那么就可以通過 nextTick 來實作這個需求，
let $this = this;
setTimeout(() => {
$this.msg = '這是我們的描述資訊，它很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長';
// 我們也可以使用Vue提供的ref來獲取DOM
var msgDom = document.getElementById('msg');
$this.$nextTick(function() {
console.log('msg的高度為：' + msgDom.offsetHeight);
});
}, 1000);
我們使用 nextTick 來監聽 DOM 渲染完成之后的回呼方法，這個時候獲取的 msgDom 就是重新渲染之后的 DOM 高度，
作為一個 Promise 使用 (2.1.0 起新增，詳見接下來的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})
2.1.0 起新增：如果沒有提供回呼且在支持 Promise 的環境中，則回傳一個 Promise，請注意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標瀏覽器不原生支持 Promise (IE：你們都看我干嘛)，你得自己提供 polyfill，
vue中常用的就這幾個API，如果有興趣學習更多，請參考開頭提供的vue官方api檔案！
感謝您的閱讀，如果對您有幫助，歡迎關注"CRMEB"，碼云上有我們開源的商城專案，知識付費專案，JAVA版全開源商城系統，學習研究歡迎使用，老鐵順手點個star唄，老板獎勵五毛，分你兩毛五，😂😂關注我們保持聯系！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/245256.html
標籤：其他