舉一個案例，我們要拼接一個fullname，因此要監(jiān)聽到文本框數(shù)據(jù)的改變，這樣才能知道什么時候去拼接 出一個 fullname
案例結(jié)構(gòu)如下：
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
});
</script>
頁面結(jié)構(gòu)：
頁面結(jié)構(gòu)
在前兩個文本框里輸入字符串，最終拼接成一個整體的字符串。
一、利用keyup事件來實現(xiàn)
1.我們在input標(biāo)簽里綁定keyup事件
定義一個函數(shù)getFullname：
<input type="text" v-model="firstname" @keyup="getFullname"> +
<input type="text" v-model="lastname" @keyup="getFullname"> =
<input type="text" v-model="fullname">
在vm中定義方法：
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullname() {
this.fullname = this.firstname + '-' + this.lastname
}
}
});
結(jié)果如下：
keyup事件結(jié)果
二、使用watch
watch和methods平級
1.watch監(jiān)聽數(shù)據(jù)變化
使用這個 屬性，可以監(jiān)視 data 中指定數(shù)據(jù)的變化，然后觸發(fā)這個 watch 中對應(yīng)的 function 處理函數(shù)
該方法可以不用綁定事件
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
watch: {
'firstname': function(newVal){
this.fullname = newVal + '-' + this.lastname
},
'lastname': function(newVal){
this.fullname = this.firstname + '-' + newVal
}
}
});
</script>
</body>
結(jié)果如下：
watch結(jié)果
注意：watch函數(shù)有兩個變量，只是在該函數(shù)中有一個沒有用上，寫上也沒有關(guān)系
watch: {
'firstname': function(newVal,oldVal){
this.fullname = newVal + '-' + this.lastname
},
'lastname': function(newVal){
this.fullname = this.firstname + '-' + newVal
}
}
結(jié)果還是一樣：
watch結(jié)果2
2.watch監(jiān)聽路由變化
在上一篇博客中介紹了路由的基本使用
現(xiàn)在，我們把結(jié)構(gòu)照搬過來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h3>這是登錄子組件，這個組件是 奔波霸 開發(fā)的。</h3>'
}
var register = {
template: '<h3>這是注冊子組件，這個組件是 霸波奔 開發(fā)的。</h3>'
}
var router = new VueRouter({
routes: [ // 路由規(guī)則數(shù)組
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive' // 和激活相關(guān)的類
})
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router,
watch: {}
});
</script>
</body>
</html>
在watch中定義方法：
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router,
watch: {
//$route.path == this.$route.path
'$route.path': function(newVal,oldVal){
if(newVal === '/login'){
console.log('歡迎進(jìn)入login')
}else if(newVal === '/register'){
console.log('歡迎進(jìn)入register')
}
}
}
});
結(jié)果如下：
watch監(jiān)聽路由變化
三、computed計算屬性的使用
在 computed 中，可以定義一些 屬性，這些屬性，叫做 【計算屬性】， 計算屬性的本質(zhì)，就是 一個方法，只不過我們在使用 這些計算屬性的時候，是把它們的名稱直接當(dāng)作屬性來使用的；并不會把 計算屬性當(dāng)作方法去調(diào)用；
computed和methods平級
注意1： 計算屬性，在引用的時候，一定不要加 () 去調(diào)用，直接把它當(dāng)作普通 屬性去使用就好了；
注意2： 只要 計算屬性，這個 function 內(nèi)部，所用到的 任何 data 中的數(shù)據(jù)發(fā)送了變化，就會立即重新計算 這個 計算屬性的值
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
watch: {},
computed: {
'fullname': function(){
return this.firstname + '-' + this.lastname
}
}
});
</script>
</body>
注意：
1.fullname沒有在data中定義
2.在compute定義fullname后直接return出去就好
注意3： 計算屬性的求值結(jié)果，會被緩存起來，方便下次直接使用； 如果 計算屬性方法中，所有的任何數(shù)據(jù)，都沒有發(fā)生過變化，則不會重新對計算屬性求值；
例：我們在fullname函數(shù)中定義輸出一個ok，并且在主頁中調(diào)用輸出fullname
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
</div>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
watch: {},
computed: {
'fullname': function(){
console.log('ok')
return this.firstname + '-' + this.lastname
}
}
});
</script>
</body>
打開頁面：
打開頁面
輸入值之后結(jié)果如下：
結(jié)果
也就是說，不會因為頁面中調(diào)用幾次函數(shù)去執(zhí)行幾次，只會根據(jù)函數(shù)執(zhí)行來調(diào)用函數(shù)
四、watch、computed和methods之間的對比
-
computed屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。主要當(dāng)作屬性來使用； -
methods方法表示一個具體的操作，主要書寫業(yè)務(wù)邏輯； -
watch一個對象，鍵是需要觀察的表達(dá)式，值是對應(yīng)回調(diào)函數(shù)。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作；可以看作是computed和methods的結(jié)合體；
