《Vue.js 前端開(kāi)發(fā)技術(shù)與實(shí)踐》課件-第5章 vue實(shí)例對(duì)象

第5章vue實(shí)例對(duì)象每個(gè)Vue應(yīng)用都是通過(guò)用Vue構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)新的Vue實(shí)例開(kāi)始的。varvm=newVue({//選項(xiàng)})5.1配置對(duì)象常用的配置選項(xiàng)5.1.1methods方法事件調(diào)用的函數(shù)都在methods屬性中定義。例：methods:{

sum(){

this.total=this.price*this.count;

}

}定義方法語(yǔ)法：方法名(){}或方法名:function(){}方法調(diào)用的方式：方法名()<input

type="text"

v-model.number="price"

@keyup="sum()">5.1.2計(jì)算屬性computed當(dāng)某個(gè)屬性的值依賴(lài)于其他屬性的值時(shí)，在計(jì)算屬性中定義該屬性。定義計(jì)算屬性在computed屬性中定義，語(yǔ)法：計(jì)算屬性名：function(){//計(jì)算表達(dá)式

return結(jié)果}例：computed:{total:function(){returnthis.price*this.count}}5.1.3watch偵聽(tīng)器

watch偵聽(tīng)器是用來(lái)偵聽(tīng)數(shù)據(jù)變化時(shí)（data對(duì)象屬性或者計(jì)算屬性的變化），讓開(kāi)發(fā)者處理一些事務(wù)。定義偵聽(tīng)器語(yǔ)法：watch:{[key:string]:string|Function|Object|Array}當(dāng)一個(gè)被偵聽(tīng)屬性的值發(fā)生變化時(shí)，觸發(fā)該屬性的回調(diào)函數(shù)執(zhí)行。watch:{"price":function(newVal,oldVal){returnthis.total=newVal*this.count;},"count":function(newVal,oldVal){returnthis.total=this.price*newVal;},}5.1.4過(guò)濾器filters在輸出結(jié)果之前對(duì)數(shù)據(jù)進(jìn)行過(guò)濾（格式處理等）Vue中的過(guò)濾器分為兩種，全局過(guò)濾器和局部過(guò)濾器。（1）全局過(guò)濾器全局過(guò)濾器的定義，是定義在Vue對(duì)象上的，定義語(yǔ)法：Vue.filter(‘過(guò)濾器的名稱(chēng)’,function(參數(shù)列表){函數(shù)體})（２）過(guò)濾器調(diào)用語(yǔ)法如下：{{要過(guò)濾的數(shù)據(jù)｜過(guò)濾器名（參數(shù)列表）}}過(guò)濾器調(diào)用只用在Mustache插值和V-bind表達(dá)式中。局部過(guò)濾器的定義，是定義在Vue對(duì)象的實(shí)例上，在配置對(duì)象的filers選項(xiàng)屬性中定義。（3）局部過(guò)濾器局部過(guò)濾器定義語(yǔ)法和調(diào)用語(yǔ)法與全部過(guò)濾器的語(yǔ)法相同。局部過(guò)濾器與全部過(guò)濾器除定義的位置不同外，還有調(diào)用的范圍不相同，局部過(guò)濾器只有在該Vue實(shí)例控制的（#app）頁(yè)面區(qū)域內(nèi)有效，全部過(guò)濾器在整個(gè)頁(yè)面上所有Vue實(shí)例控制的頁(yè)面區(qū)域內(nèi)都有效。5.2

Vue實(shí)例生命周期Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是Vue實(shí)例的生命周期。在這個(gè)生命周期過(guò)程中的各個(gè)階段上會(huì)自動(dòng)執(zhí)行相應(yīng)的處理函數(shù)。5.3常用的Vue實(shí)例屬性vm.$data：獲取實(shí)例觀察的數(shù)據(jù)對(duì)象；vm.$el：獲取實(shí)例掛載的元素；vm.$options：獲取實(shí)例的初始化選項(xiàng)對(duì)象；vm.$refs：一個(gè)對(duì)象，持有注冊(cè)過(guò)ref屬性的所有DOM元素和組件實(shí)例；5.4常用的Vue實(shí)例方法5.4.1實(shí)例方法/數(shù)據(jù)（1）vm.$set（2）vm.$delete（3）vm.$watch5.4.2實(shí)例方法/事件（1）vm.$on（2）vm.$once（3）vm.$emit（4）vm.$off5.4.3實(shí)例方法/生命周期（1）vm.$mount(