本內(nèi)容為系列內(nèi)容，全部?jī)?nèi)容請(qǐng)看我的vue教程分類
點(diǎn)擊事件
還記得jquery是怎么綁定點(diǎn)擊事件的嗎
$("button").click(function(){
console.log('我被點(diǎn)擊了')
});
那么vue是如何綁定點(diǎn)擊事件呢？就要使用 v-on來(lái)監(jiān)聽(tīng)dom的事件
首先實(shí)例化一個(gè)vue,定義一個(gè)數(shù)字 count
<script>
let vm = new Vue({
el: '#app',
data() {
return {
count: 1
}
},
created() {
},
})
</script>
然后我們?cè)陧?yè)面中設(shè)置一個(gè)按鈕并綁定上點(diǎn)擊事件，""里面也是可以直接寫表達(dá)式的，這里我們點(diǎn)擊事件就是增加 data在中 count的值，并且把count也渲染到頁(yè)面中來(lái)
<div id="app">
<button v-on:click="count++">click</button>
<div>輸出：{{count}}</div>
</div>
打開(kāi)瀏覽器來(lái)看看效果
定義方法
那我們總不能一直將點(diǎn)擊事件寫在 ""里面吧，況且有些非常復(fù)雜的邏輯呢？
這里我們就可以在 methods中定義方法，這個(gè)methods也是實(shí)例化vue需要傳遞的屬性，我們這里定義一個(gè)sayHello的方法
<script>
let vm = new Vue({
el: '#app',
methods: {
sayhello() {
console.log('hello world');
}
},
data() {
return {
count: 1
}
},
created() {
},
})
</script>
然后在頁(yè)面的 v-on中使用這個(gè)方法 ，注意 v-on可以簡(jiǎn)寫為 @
<button @click="sayhello">click</button>
來(lái)到瀏覽器查看效果，是可以的
按鍵事件
那么vue的按鍵事件該如何監(jiān)聽(tīng)呢？
這里舉例一個(gè)場(chǎng)景：我們很多人有這個(gè)習(xí)慣，輸入框輸入完成后 點(diǎn)擊鍵盤的回車鍵 提交表單是吧
首先我們?cè)?methods中定義一個(gè) submit方法
methods: {
sayhello() {
console.log('hello world');
},
submit() {
console.log('我提交了');
}
},
然后我們?cè)陧?yè)面中綁定監(jiān)聽(tīng)按鈕事件keyup就是按鈕事件
<input type="text" @keyup.enter="submit">
查看效果
具體有哪些呢 這里有個(gè)官網(wǎng)的截圖
講了這么多了我們來(lái)個(gè)綜合練習(xí)，我們把 v-bind那一節(jié)的代碼拷貝過(guò)來(lái),做一些簡(jiǎn)單的修改，一個(gè)正常開(kāi)發(fā)的邏輯
首先我們將 data中的 userlist初始化為空數(shù)組，因?yàn)閷?shí)際開(kāi)發(fā)這個(gè)數(shù)組要從后端去取數(shù)據(jù)
data() {
return {
count: 1,
userlist: [],
user: {
name: 'lookroot',
age: 12,
sex: 2,
avatar: ''
},
sexlist: [
{ count: 1, name: '男' },
{ count: 2, name: '女' },
]
}
},
然后是從后臺(tái)加載數(shù)據(jù)，因?yàn)槲覀儧](méi)有后臺(tái)，所以加載假數(shù)據(jù)，也就是提前寫死這個(gè)數(shù)據(jù)，這里只是實(shí)現(xiàn)這個(gè)過(guò)程
我們?cè)?methods定義方法 loadData用來(lái)初始化數(shù)據(jù)
methods: {
//模擬加載數(shù)據(jù)
loadData() {
//從后臺(tái)加載中 實(shí)際開(kāi)發(fā)這個(gè) res 應(yīng)該從后端獲取....
console.log('加載數(shù)據(jù)中');
const res = [
{ name: 'lookroot', age: 20, sex: 1, avatar: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=218375221,1552855610&fm=111
{ name: 'lili', age: 21, sex: 2, avatar: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1305353222,2352820043&fm=26&gp=
];
console.log('加載完成');
// 賦值給 data中 userlist
this.userlist = res;
},
},
那么這么初始化數(shù)據(jù)定義好了 什么時(shí)候調(diào)用呢?這就要用到我們前面講的 生命周期了
這里要使用到 created 這個(gè)周期，因?yàn)榇藭r(shí) data已經(jīng)初始化成功了，如果你在這個(gè)生命周期前面調(diào)用的話，就會(huì)報(bào)錯(cuò)找不到 這個(gè) userlist，那么我們就在這里調(diào)用剛剛的 loadData這個(gè)方法，完成初始化數(shù)據(jù)
// 在這個(gè)生命周期去后臺(tái)讀取數(shù)據(jù)
created() {
//調(diào)用初始化數(shù)據(jù)的方法
this.loadData();
},
那么現(xiàn)在我們?cè)诖蜷_(kāi)頁(yè)面的時(shí)候就會(huì)自動(dòng)初始化數(shù)據(jù)了
然后我們來(lái)操作這個(gè)表單，給存儲(chǔ)按鈕綁定一個(gè)點(diǎn)擊事件，但是這個(gè)時(shí)候我們點(diǎn)擊按鈕會(huì)發(fā)現(xiàn)為啥頁(yè)面刷新了？
<form action="">
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
<input type="text" v-model="user.avatar">
<select v-model="user.sex">
<option :value="sex.count" v-for="(sex,index) in sexlist">{{sex.name}}</option>
</select>
<button @click="submit">存儲(chǔ)</button>
</form>
這個(gè)原因是 button 是html表單中的默認(rèn)提交，只要點(diǎn)了就會(huì)提交到指定頁(yè)面，但是我們使用vue不想讓它提交頁(yè)面，也不需要提交頁(yè)面，那么怎么做呢？
修改一下這個(gè)綁定的點(diǎn)擊事件，這個(gè)prevent可以阻止頁(yè)面的默認(rèn)事件，這樣頁(yè)面就不會(huì)跳轉(zhuǎn)了！
<button @click.prevent="submit">存儲(chǔ)</button>
然后我們修改一下這個(gè) submit事件，就是把當(dāng)前表單的user對(duì)象插入到userlist中
submit() {
//假裝提交后臺(tái)了
this.userlist.push(this.user);
}
然后我們來(lái)瀏覽器看看效果，這里細(xì)心的朋友會(huì)發(fā)現(xiàn)，我第一存儲(chǔ)表單是沒(méi)添加頭像地址，第二次添加了頭像，為啥第一次添加的用戶也有同一個(gè)頭像呢？
這就是因?yàn)槲覀冎苯硬迦氲?this.user，沒(méi)有拷貝數(shù)據(jù)，所以每次插入 userlist其實(shí)是同一個(gè)對(duì)象
所以這里我們需要進(jìn)行一下拷貝 也可以使用 JSON.parse(JSON.stringify(obj))
submit() {
let user = Object.assign({}, this.user);
this.userlist.push(user);
}
好的再次查看效果發(fā)現(xiàn)沒(méi)有這個(gè)
做到這里大家發(fā)現(xiàn)了沒(méi)有 通過(guò)這上面的數(shù)據(jù)綁定 事件觸發(fā) 數(shù)據(jù)更新 這不就是我前面講的 mvvm 嗎？大家認(rèn)真體會(huì)?。?/p>
