当前位置：首页 >

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

发布时间：2025/3/20 49 豆豆

生活随笔收集整理的这篇文章主要介绍了第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交互及生命周期练习的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。