當前位置：首頁 > 前端技术 > vue >内容正文

vue

第5章-Vue.js交互及生命周期练习

發布時間：2025/3/20 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了第5章-Vue.js交互及生命周期练习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、學習目標

使用網絡請求進行前后端交互 (重點)
理解鉤子函數的作用? （難點）
掌握Vue.js過濾器的使用方法
了解Vue.js事件的深入用法? (重點)

二、仿寫留言板

2.1、實現"顯示評論"按鈕的功能

使用網絡請求，請求"請求列表" 數據
解析 "評論列表" 數據
展示"評論列表的數據"

2.2、點擊顯示評論，顯示數據

說明：當我們點擊評論的時候，則顯示相關數據，測試第三方接口：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()中如果只傳入一個處理函數，那么默認是處理請求成功的情況//console.log(res.data);this.arr = res.data.data.commentList;})}}});</script> </body> 顯示評論

2.3、無需點擊，自動顯示評論

說明：因為我們再顯示評論的時候，一般情況下不需要任何操作，自動顯示評論，所以我們就應該在 vue 對象創建之前就應該加載這部分數據，所以我們就會使用到 beforeCreate的鉤子。所以優化后的代碼，如下：

<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()中如果只傳入一個處理函數，那么默認是處理請求成功的情況//console.log(res.data);this.arr = res.data.data.commentList;});}});</script> </body> 頁面數據自動加載

小結：

使用網絡請求進行前后端交互
理解鉤子函數的作用 (難點)
賬務Vue.js過濾器的使用方法

三、仿寫百度搜索框

3.1、Vue中事件對象的獲取

語法：

@click=fn($event) $event: 對象

實例：

<body><div id="box"><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為鼠標的坐標 console.log(e.clientX,e.clientY);}}});</script> </body> 事件對象的獲取

3.2、事件修飾符

概念：v-on指令提供了時間修飾符來處理DOM事件細節

按鍵修飾符：.enter，.up，.down 等等

prevent修飾符：阻止事件的默認行為

語法：

<input type="text" @keydown.up="fn()" @keydown.down="fn2()"/> //按鍵按下后執行的事件

具體使用：

<body><div id="box"><input type="text" @keydown.up="fn1()"/><input type="text" @keydown.down="fn2()"/></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、仿寫百度搜索框和練習

① 搜索需求：實現搜索框的搜索功能

對用戶在輸入框內輸入的值進行雙向數據綁定。
點擊 "搜索" 按鈕，進行網絡請求
將請求會的數據在搜索框下進行展示

?②練習需求：實現通過方向鍵控制搜索選項

綁定上下方向鍵的處理函數
對展示的數據進行樣式綁定

<head><meta charset="UTF-8"><title>Title</title><style>.gary {background: #ccc;}</style> </head> <body><div id="box"><input type="text" v-model="wd" @keydown.up.prevent="up" @keydown.down="down"/><button @click="search">搜索</button><ul><li v-for="(item,index) in arr" :class="{gary: index==nowIndex}">{{ item }}</li></ul></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/vue-resource.js"></script><script>var vm = new Vue({el: "#box",data: {arr: [],wd: '',base_url: "https://sug.so.360.cn/suggest",nowIndex: -1},methods: {search: function(){this.$http.jsonp(this.base_url,{params: {word: this.wd}},{emulateJSON:true}).then(function(res){this.arr = res.data.s;});},up: function(){this.nowIndex--;if(this.nowIndex < 0){this.nowIndex = this.arr.length -1;}},down: function(){this.nowIndex++;if (this.nowIndex > this.arr.length-1){this.nowIndex = -1;}}}});</script> </body> 仿寫百度搜索框練習

這里面用到了一些事件修飾符。

3.4、事件執行機制

事件執行機制：

根 -> 元素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><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> 事件執行機制

結果：

>>>fn2 >>>fn1

結果得出：事件執行是從源到根依次執行，那我執行事件源，不想執行除事件源之外的事件，如下：stop:阻止冒泡

更多事件處理：

事件處理：https://cn.vuejs.org/v2/guide/events.html

事件修飾符：https://cn.vuejs.org/v2/guide/events.html#事件修飾符

按鍵修飾符：https://cn.vuejs.org/v2/guide/events.html#按鍵修飾符

四、小結

重點：能夠使用網絡請求進行前后端交互
難點：理解鉤子函數的作用
注意事項：修飾符可以串聯使用：@click.prevent.stop="fn"。

轉載于:https://www.cnblogs.com/zhangqigao/p/9604070.html

總結

以上是生活随笔為你收集整理的第5章-Vue.js交互及生命周期练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。