1.名稱案例使用keyup實(shí)現(xiàn)
<div id="app">
//分析：
(1).我們要監(jiān)聽(tīng)到文本框數(shù)據(jù)的改變群嗤，這樣才能知道什么時(shí)候去拼接出一個(gè)fullname
(2).如何監(jiān)聽(tīng)到文本框的數(shù)據(jù)改變
<input type="text" v-model="firstname" @keyup="getFullname">+<input type="text" v-model="lastname" @keyup="getFullname">=<input type="text" v-model="fullname">
</div>
var vm = new Vue({
el:'#app',
data:{
firstname:' ',
lastname:' ',
fullname:' '
}
methods:{
getFullname(){
this.fullname = this.firstname+'-'+this.lastname
}
}
})
2.使用watch監(jiān)聽(tīng)文本框數(shù)據(jù)的變化
<div id="app">
<input type="text" v-model="firstname">+<input type="text" v-model="lastname">=<input type="text" v-model="fullname">
</div>
var vm = new Vue({
el:'#app',
data:{
firstname:' ',
lastname:' ',
fullname:' '
}
methods:{},
watch:{
//使用這個(gè)屬性扑庞，可以監(jiān)視data中指定數(shù)據(jù)的變化淡溯，然后觸發(fā)這個(gè)watch中對(duì)應(yīng)的function處理函數(shù)
'firstname':function(newVal,oldVal){
//newVal是表示監(jiān)聽(tīng)到的新的數(shù)據(jù)，oldVal表示舊的數(shù)據(jù)
//this.fullname = this.firstname+'-'+this.lastname
this.fullname = newVal+'-'+this.lastname
},
'lastname':function(newVal){
this.fullname=this.firstname+'-'+newVal
}
}
})
3.watch監(jiān)視路由地址的改變
<div id="app">
<a href="#/login">登錄</a>
<a href="#/register">注冊(cè)</a>
<router-view></router-view>
</div>
var login={
template:'<h1>登錄組件</h1>'
}
var register={
template:'<h1>注冊(cè)組件</h1>'
}
var router = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router,
watch:{
//this.$route.path
'$route.path':function(newVal,oldVal){
if(newVal === '/login'){
console.log('歡迎進(jìn)入登錄頁(yè)面')
}else if(newVal === '/register'){
console.log('歡迎進(jìn)入注冊(cè)頁(yè)面')
}
}
}
})
4.computed計(jì)算屬性的使用和三個(gè)特點(diǎn)
<div id="app">
<input type="text" v-model="firstname">+<input type="text" v-model="lastname">=<input type="text" v-model="fullname">
</div>
var vm = new Vue({
el:'#app',
data:{
firstname:' ',
lastname:' ',
}
methods:{},
computed:{
//在computed中可以定義一些屬性簿训，這些屬性叫做計(jì)算屬性咱娶，計(jì)算屬性的本質(zhì)，就是一個(gè)方法强品，只不過(guò)膘侮，我們?cè)谑褂眠@些計(jì)算屬性的時(shí)候，是把它們的名稱的榛，直接當(dāng)做屬性來(lái)使用的琼了，并不會(huì)把計(jì)算屬性，當(dāng)做方法去使用夫晌；
//注意：(1).計(jì)算屬性雕薪，在引用的時(shí)候一定不要加()去調(diào)用，直接把它當(dāng)做普通屬性去使用就好了晓淀；
(2).只要計(jì)算屬性這個(gè)function內(nèi)部所袁，所用到的任何data中的數(shù)據(jù)發(fā)生了變化，就會(huì)立即重新計(jì)算這個(gè)計(jì)算屬性的值
(3).計(jì)算屬性的求值結(jié)果凶掰，會(huì)被緩存起來(lái)燥爷，方便下次直接使用蜈亩；如果計(jì)算屬性方法中，所依賴的任何數(shù)據(jù)前翎，都沒(méi)有發(fā)生變化稚配，則不會(huì)重新對(duì)計(jì)算屬性求值
'fullname':function(){
return this.firstname+'-'+this.lastname
}
}
})
5.watch,computed,methods的對(duì)比
(1).computed屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算港华，主要當(dāng)做屬性來(lái)使用道川；
(2).methods方法表示一個(gè)具體的操作，主要書(shū)寫(xiě)業(yè)務(wù)邏輯
(3).watch一個(gè)對(duì)象苹丸，鍵是需要觀察的表達(dá)式愤惰，值是對(duì)應(yīng)的回調(diào)函數(shù)，主要用來(lái)監(jiān)聽(tīng)某些特定數(shù)據(jù)的變化赘理，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作宦言，可以看作是computed和methods的結(jié)合體
