第5章-Vue.js交互及生命周期练习
生活随笔
收集整理的這篇文章主要介紹了
第5章-Vue.js交互及生命周期练习
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、學(xué)習(xí)目標(biāo)
- 使用網(wǎng)絡(luò)請求進(jìn)行前后端交互 (重點(diǎn))
- 理解鉤子函數(shù)的作用? （難點(diǎn)）
- 掌握Vue.js過濾器的使用方法
- 了解Vue.js事件的深入用法? (重點(diǎn))
二、仿寫留言板
2.1、實(shí)現(xiàn)"顯示評論"按鈕的功能
- 使用網(wǎng)絡(luò)請求，請求"請求列表" 數(shù)據(jù)
- 解析 "評論列表" 數(shù)據(jù)
- 展示"評論列表的數(shù)據(jù)"
2.2、點(diǎn)擊顯示評論，顯示數(shù)據(jù)
說明：當(dāng)我們點(diǎn)擊評論的時候，則顯示相關(guān)數(shù)據(jù)，測試第三方接口：http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187
<body><div id="box"><button @click="search">顯示評論</button><ul><li v-for="item in arr"><h4>{{ item.commentTxt }}</h4><p>{{ item.createAt | time }}</p></li></ul></div><script src="js/vue.js"></script><script src="js/vue-resource.js"></script><script>//定義過濾器 Vue.filter('time',function(val){//只顯示日期，不顯示時間//方法：字符串的截取：substr(start,length)return val.substr(0,10);});var vm = new Vue({el: "#box",data: {arr: []},methods: {search: function(){this.$http.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380" +"/v3/topic/topicHomeByLabel?pageIndex=1&" +"token=b544cd63-6d42-46fe-a96c-3cf96bae3113" +"&topicId=62187").then(function(res){//then()中如果只傳入一個處理函數(shù)，那么默認(rèn)是處理請求成功的情況//console.log(res.data);this.arr = res.data.data.commentList;})}}});</script> </body> 顯示評論2.3、無需點(diǎn)擊，自動顯示評論
說明：因?yàn)槲覀冊亠@示評論的時候，一般情況下不需要任何操作，自動顯示評論，所以我們就應(yīng)該在 vue 對象創(chuàng)建之前 就應(yīng)該加載這部分?jǐn)?shù)據(jù)，所以我們就會使用到 beforeCreate的鉤子。所以優(yōu)化后的代碼，如下：
<body><div id="box"><button>顯示評論</button><ul><li v-for="item in arr"><h4>{{ item.commentTxt }}</h4><p>{{ item.createAt | time }}</p></li></ul></div><script src="js/vue.js"></script><script src="js/vue-resource.js"></script><script>//定義過濾器 Vue.filter('time',function(val){//只顯示日期，不顯示時間//方法：字符串的截取：substr(start,length)return val.substr(0,10);});var vm = new Vue({el: "#box",data: {arr: []},beforeCreate: function(){this.$http.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380" +"/v3/topic/topicHomeByLabel?pageIndex=1&" +"token=b544cd63-6d42-46fe-a96c-3cf96bae3113" +"&topicId=62187").then( function(res){//then()中如果只傳入一個處理函數(shù)，那么默認(rèn)是處理請求成功的情況//console.log(res.data);this.arr = res.data.data.commentList;});}});</script> </body> 頁面數(shù)據(jù)自動加載小結(jié)：
- 使用網(wǎng)絡(luò)請求進(jìn)行前后端交互
- 理解鉤子函數(shù)的作用 (難點(diǎn))
- 賬務(wù)Vue.js過濾器的使用方法
三、仿寫百度搜索框
3.1、Vue中事件對象的獲取
語法：
@click=fn($event) $event: 對象實(shí)例：
<body><div id="box"><!--傳入事件對象$event--><div class="div1" @click="fn($event)"></div></div><script src="js/vue-resource.js"></script><script src="js/vue.js"></script><script>var vm = new Vue({el: "#box",data:{},methods: {fn: function(e){//e: event事件對象,e.clientX,e.clientY為 鼠標(biāo)的坐標(biāo) console.log(e.clientX,e.clientY);}}});</script> </body> 事件對象的獲取3.2、事件修飾符
概念：v-on指令提供了時間修飾符來處理DOM事件細(xì)節(jié)
按鍵修飾符：.enter，.up，.down 等等
prevent修飾符：阻止事件的默認(rèn)行為
語法：
<input type="text" @keydown.up="fn()" @keydown.down="fn2()"/> //按鍵按下后執(zhí)行的事件具體使用：
<body><div id="box"><input type="text" @keydown.up="fn1()"/><input type="text" @keydown.down="fn2()"/><!--事件修飾符：vue中提供的處理DOM事件細(xì)節(jié)的方式按鍵修飾符：.up，.down，.ctrl，.enter，.space....語法：@click.修飾符='fn'--></div><script src="js/vue-resource.js"></script><script src="js/vue.js"></script><script>var vm = new Vue({el: "#box",data:{},methods: {fn1: function(){console.log("up");},fn2: function(){console.log("down");}}});</script> </body> 事件修飾符3.3、仿寫百度搜索框和練習(xí)
① 搜索需求：實(shí)現(xiàn)搜索框的搜索功能
- 對用戶在輸入框內(nèi)輸入的值進(jìn)行雙向數(shù)據(jù)綁定。
- 點(diǎn)擊 "搜索" 按鈕，進(jìn)行網(wǎng)絡(luò)請求
- 將請求會的數(shù)據(jù)在搜索框下進(jìn)行展示
?②練習(xí)需求：實(shí)現(xiàn)通過方向鍵控制搜索選項(xiàng)
- 綁定上下方向鍵的處理函數(shù)
- 對展示的數(shù)據(jù)進(jìn)行樣式綁定
這里面用到了一些事件修飾符。
3.4、事件執(zhí)行機(jī)制
事件執(zhí)行機(jī)制：
- 根 -> 元素1 -> 元素2 -> 事件源(target)
- 先捕獲，后冒泡
- 捕獲：從根 到 事件源
- 冒泡： 從事件源 到 根
示例：
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;}.div1 {background: pink;padding: 50px;}.div2 {background: yellow;}</style> </head> <body><!--事件執(zhí)行機(jī)制：根 -> 元素1 -> 元素2 -> 事件源(target)先捕獲，后冒泡捕獲：從根 到 事件源冒泡： 從事件源 到 根--><div id="box"><div class="div1" @click="fn1"><div class="div2" @click="fn2"></div></div></div><script src="js/vue.js"></script><script>var vm = new Vue({el: "#box",data: {},methods: {fn1: function(){console.log("fn1");},fn2: function(){console.log("fn2");}}});</script> </body> 事件執(zhí)行機(jī)制結(jié)果：
>>>fn2 >>>fn1結(jié)果得出：事件執(zhí)行是 從 源 到 根依次執(zhí)行，那我執(zhí)行事件源，不想執(zhí)行 除事件源之外的 事件，如下：stop:阻止冒泡
<div class="div2" @clicl.stop="fn2"></div>更多事件處理：
事件處理：https://cn.vuejs.org/v2/guide/events.html
事件修飾符：https://cn.vuejs.org/v2/guide/events.html#事件修飾符
按鍵修飾符：https://cn.vuejs.org/v2/guide/events.html#按鍵修飾符
四、小結(jié)
- 重點(diǎn)：能夠使用網(wǎng)絡(luò)請求進(jìn)行前后端交互
- 難點(diǎn)： 理解鉤子函數(shù)的作用
- 注意事項(xiàng)：修飾符可以串聯(lián)使用：@click.prevent.stop="fn"。
轉(zhuǎn)載于:https://www.cnblogs.com/zhangqigao/p/9604070.html
總結(jié)
以上是生活随笔為你收集整理的第5章-Vue.js交互及生命周期练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 修改Docker0网桥默认网段
- 下一篇： 从babel实现es6类的继承来深入理解