舉一個案例筹我，我們要拼接一個fullname，因此要監(jiān)聽到文本框數(shù)據(jù)的改變穆咐，這樣才能知道什么時候去拼接 出一個 fullname
案例結構如下：
<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>
頁面結構：
頁面結構
在前兩個文本框里輸入字符串骑丸，最終拼接成一個整體的字符串。
一恭取、利用keyup事件來實現(xiàn)
1.我們在input標簽里綁定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
}
}
});
結果如下：
keyup事件結果
二泰偿、使用watch
watch和methods平級
1.watch監(jiān)聽數(shù)據(jù)變化
使用這個 屬性，可以監(jiān)視 data 中指定數(shù)據(jù)的變化蜈垮，然后觸發(fā)這個 watch 中對應的 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>
結果如下：
watch結果
注意：watch函數(shù)有兩個變量，只是在該函數(shù)中有一個沒有用上攒发，寫上也沒有關系
watch: {
'firstname': function(newVal,oldVal){
this.fullname = newVal + '-' + this.lastname
},
'lastname': function(newVal){
this.fullname = this.firstname + '-' + newVal
}
}
結果還是一樣：
watch結果2
2.watch監(jiān)聽路由變化
在上一篇博客中介紹了路由的基本使用
現(xiàn)在调塌，我們把結構照搬過來
<!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' // 和激活相關的類
})
// 創(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('歡迎進入login')
}else if(newVal === '/register'){
console.log('歡迎進入register')
}
}
}
});
結果如下：
watch監(jiān)聽路由變化
三姜凄、computed計算屬性的使用
在 computed 中，可以定義一些 屬性趾访，這些屬性态秧，叫做 【計算屬性】， 計算屬性的本質扼鞋，就是 一個方法申鱼，只不過我們在使用 這些計算屬性的時候，是把它們的名稱直接當作屬性來使用的云头；并不會把 計算屬性當作方法去調用捐友；
computed和methods平級
注意1： 計算屬性，在引用的時候溃槐，一定不要加 () 去調用匣砖，直接把它當作普通 屬性去使用就好了；
注意2： 只要 計算屬性竿痰，這個 function 內部脆粥，所用到的 任何 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： 計算屬性的求值結果变隔，會被緩存起來，方便下次直接使用蟹倾； 如果 計算屬性方法中匣缘，所有的任何數(shù)據(jù)猖闪，都沒有發(fā)生過變化，則不會重新對計算屬性求值肌厨；
例：我們在fullname函數(shù)中定義輸出一個ok培慌，并且在主頁中調用輸出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>
打開頁面：
打開頁面
輸入值之后結果如下：
結果
也就是說柑爸，不會因為頁面中調用幾次函數(shù)去執(zhí)行幾次吵护，只會根據(jù)函數(shù)執(zhí)行來調用函數(shù)
四、watch表鳍、computed和methods之間的對比
-
computed屬性的結果會被緩存馅而，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用譬圣； -
methods方法表示一個具體的操作瓮恭，主要書寫業(yè)務邏輯； -
watch一個對象厘熟，鍵是需要觀察的表達式屯蹦，值是對應回調函數(shù)。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化绳姨，從而進行某些具體的業(yè)務邏輯操作登澜；可以看作是computed和methods的結合體；
