成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.nextTick，Vue.set，Vue.delete，Vue.filter學(xué)習(xí)

junnplus / 588人閱讀

摘要：用法在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。只要觀察到數(shù)據(jù)變化，將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果對象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。

Vue.nextTick([callback,context])

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

//修改數(shù)據(jù)
vm.msg = "Hello";
//DOM還沒有更新
Vue.nextTick(function(){
    //DOM更新了
})
//作為一個Promise使用（2.1.0起新增）
Vue.nextTick().then(function(){
    //DOM更新了
})
2.1.0 起新增：如果沒有提供回調(diào)且在支持 Promise 的環(huán)境中，則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標(biāo)瀏覽器不原生支持 Promise (IE：你們都看我干嘛)，你得自己提供 polyfill。
實例：
//模板


  
{{msg}}

  
Message got outside $nextTick: {{msg1}}

  
Message got inside $nextTick: {{msg2}}

  
Message got outside $nextTick: {{msg3}}

  


//頁面初始渲染時只有msg有值。
//Vue實例
new Vue({
    el:"#app",
    data:{
        msg:"Hello Vue",
        msg1:"",
        msg2:"",
        msg3:""
    },
    methods:{
    //第一次點擊時,更改數(shù)據(jù)msg。
        changeMsg(){
            this.msg = "Hello world";
            this.msg1 = this.$refs.msgDiv.innerHTML;//更改數(shù)據(jù)后還沒有掛載到dom上，此時操作數(shù)據(jù)還是原來的數(shù)據(jù)
            this.$nextTick(() => {
              this.msg2 = this.$refs.msgDiv.innerHTML;//dom更新之后執(zhí)行，此時數(shù)據(jù)更改。
            });
            this.msg3 = this.$refs.msgDiv.innerHTML;//與msg1一樣。
        }
    }
})
Vue異步執(zhí)行DOM更新。只要觀察到數(shù)據(jù)變化，Vue將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果同一個watcher被多次觸發(fā)，只會被推入到隊列中一次，這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和DOM操作上非常重要。然后，在下一個的事件循環(huán)tick中，Vue在內(nèi)部嘗試對異步隊列使用原生Promise.then和MessageChannel，如果執(zhí)行環(huán)境不支持，會采用setTimeout(fn,0)代替。
例如：當(dāng)你設(shè)置vm.someDate = "new value",該組件不會立重新渲染。當(dāng)刷新隊列時，組件會在事件循環(huán)隊列清空時的下一個tick更新。多數(shù)情況下我們不需要關(guān)心這個過程，但是如果你想在DOM狀態(tài)更新后做點什么，這就可能會有點棘手。雖然Vue.js通常鼓勵開發(fā)人員沿著數(shù)據(jù)驅(qū)動的方式思考，避免直接接觸DOM，但是有時候我們確實要這么做。為了在數(shù)據(jù)變化之后等待Vue完成更新DOM，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback).這樣回調(diào)函數(shù)在DOM更新完成后就會調(diào)用。
Vue.set( target, key, value )

參數(shù)：

{Object|Array} target
{string | number} key
{any} value

返回值：設(shè)置的值。
用法：
向響應(yīng)式對象添加一個屬性，并確保這個新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于響應(yīng)式對象上添加新屬性，因為Vue無法探測普通的新增屬性。(比如this.myObject.newProperty = "hi");

注意對象不能是Vue實例，或則Vue實例的根數(shù)據(jù)對象。
data(){
    return{
        some:{
            name:"",
            sex:""
        }
    }
}
mounted(){
//這種寫法雖然可以新增屬性，但是不會觸發(fā)視圖更新。
    this.some.age = 24,
}
//正確寫法
mounted(){
    this.$set(this.some,"age",24)
}
Vue.delete( target, key )

參數(shù)：

{Object|Array}target
{String|number}key/index

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

目標(biāo)對象不能是一個Vue實例或Vue實例的根數(shù)據(jù)對象
 data : {
        namelist : {
           id : 1, 
           name : "李四"
        }       
}

// 刪除name
delete this.namelist.name;//js方法
Vue.delete(this.namelist,"name");//vue方法。
Vue.filter( id, [definition] )

參數(shù):

{string} id
{Function} [definition]

用法：

// 注冊
Vue.filter("my-filter", function (value) {
  // 返回處理后的值
})

// getter，返回已注冊的過濾器
var myFilter = Vue.filter("my-filter")

vue.js允許自定義過濾器，可用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和v-bind表達(dá)式。過濾器應(yīng)該被添加在JavaScript表達(dá)式的尾部，由管道符號表示：

//在雙花括號中
{{message | capitalize}}
//在v-bind中

你可以在一個組件的選項中定義本地的過濾器：

filters:{
    capitalize:function(value){
        if(!value) return "";
        value = value.toString();
        return value.charAt(0).toUpperCase()+value.slice(1)
    } 
}

或則在創(chuàng)建Vue實例之前全局定義過濾器：

Vue.filter("capitalize",function(value){
    if(!value) return "";
    value = value.toString();
    return value.charAt(0).toUpperCase()+value.slice(1);
})
new Vue();

過濾器函數(shù)總接收表達(dá)式的值（之前操作鏈的結(jié)果）作為第一個參數(shù)。在上述例子中，capitalize過濾器函數(shù)將會收到message的值作為第一個參數(shù)。
過濾器可以串聯(lián)：

{{message | filterA |filterB}}

在這個例子中，filterA被定義為接收單個參數(shù)的過濾器函數(shù)，表達(dá)式message的值將作為參數(shù)傳入函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù)filterB，將filterA的結(jié)果傳遞到filterB中。
過濾器是JavaScript函數(shù)，因此可以接收參數(shù)：

{{message | filter("arg1",arg2)}}

這里，filterA內(nèi)定義為接收三個參數(shù)的過濾器函數(shù)。其中message的值作為第一個參數(shù)，普通字符串‘a(chǎn)rg1’作為第二個參數(shù)，表達(dá)式arg2的值作為第三個參數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99755.html

相關(guān)文章

  • Vue源碼學(xué)習(xí)（二）——從宏觀看Vue

    摘要：上一篇文章我們寫到從入口文件一步步找到的構(gòu)造函數(shù)，現(xiàn)在我們要去看看實例化經(jīng)歷的過程的構(gòu)造函數(shù)我們知道的構(gòu)造函數(shù)在中不明白的可以去看上一篇文章源碼學(xué)習(xí)筆記一。 上一篇文章我們寫到從入口文件一步步找到Vue的構(gòu)造函數(shù)，現(xiàn)在我們要去看看Vue實例化經(jīng)歷的過程 Vue的構(gòu)造函數(shù) 我們知道Vue的構(gòu)造函數(shù)在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

    AndroidTraveler 評論0 收藏0

  • vue源碼分析系列之入口文件分析

    摘要：中引入了中的中引入了中的中，定義了的構(gòu)造函數(shù)中的原型上掛載了方法，用來做初始化原型上掛載的屬性描述符，返回原型上掛載的屬性描述符返回原型上掛載與方法，用來為對象新增刪除響應(yīng)式屬性原型上掛載方法原型上掛載事件相關(guān)的方法。 入口尋找 入口platforms/web/entry-runtime-with-compiler中import了./runtime/index導(dǎo)出的vue。 ./r...

    kgbook 評論0 收藏0

  • Vue全局API總結(jié)

    摘要：帶圖原文鏈接地址用于創(chuàng)建一個子類用來掛載在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如等方法等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。只在獨立構(gòu)建時有效 帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創(chuàng)建一個子類Vue,用$mount來掛載 con...

    lemon 評論0 收藏0

  • Vue全局API總結(jié)

    摘要：帶圖原文鏈接地址用于創(chuàng)建一個子類用來掛載在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如等方法等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。只在獨立構(gòu)建時有效 帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創(chuàng)建一個子類Vue,用$mount來掛載 con...

    nifhlheimr 評論0 收藏0

  • Vue全局API總結(jié)

    摘要：帶圖原文鏈接地址用于創(chuàng)建一個子類用來掛載在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如等方法等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。只在獨立構(gòu)建時有效 帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創(chuàng)建一個子類Vue,用$mount來掛載 con...

    light 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<