第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"> <!--传入事件对象$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为 鼠标的坐标 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()"/> <!-- 事件修饰符:vue中提供的处理DOM事件细节的方式 按键修饰符:.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、仿写百度搜索框和练习
① 搜索需求:实现搜索框的搜索功能
- 对用户在输入框内输入的值进行双向数据绑定。
- 点击 "搜索" 按钮,进行网络请求
- 将请求会的数据在搜索框下进行展示
②练习需求:实现通过方向键控制搜索选项
- 绑定上下方向键的处理函数
- 对展示的数据进行样式绑定
<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> <!-- 所有的li数据,都是自己的index 我们可以定义一个nowIndex来记录当前被选中的下标 比较index 和 nowIndex 的关系 如果 index==nowIndex,那么该条件数据是被选中的数据,也就是说北京变为灰色 --> </div> <!--导入vue-resource.js,一定要在vue.js之后导入,不然会报错--> <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> <!-- 事件执行机制: 根 -> 元素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>
事件执行机制
结果:
>>>fn2 >>>fn1
结果得出:事件执行是 从 源 到 根依次执行,那我执行事件源,不想执行 除事件源之外的 事件,如下: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#按键修饰符
四、小结
- 重点:能够使用网络请求进行前后端交互
- 难点: 理解钩子函数的作用
- 注意事项:修饰符可以串联使用:@click.prevent.stop="fn"。
第5章-Vue.js交互及生命周期练习的更多相关文章
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
- Vue.js系列:生命周期钩子
开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论. 生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法.从初始化开始到它被破坏时,对象都会遵循不 ...
- 【Vue.js学习】生命周期及数据绑定
一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...
- Vue.js 2.0生命周期
1.beforeCreate 组建实例刚被创建,属性和方法等都还没有 2.created 实例已经创建完成,属性已经绑定 3.beforeMount 模板编译之前 4.mounted ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 多个Activity交互的生命周期:
一.多个Activity交互的生命周期: A Activity打开B Activity的时候: A Activity B Activity ...
- Vue2.5笔记:Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- Tim Cook在电话会议上宣布,Burberry前CEO Angela Ahrendts将在下周加入苹果
在今天的第二季度财报电话会议上,苹果公司的 CEO Tim Cook 宣布 Burberry 的前 CEO Angela Ahrendts 将在下周入职苹果,出任苹果负责零售和网上商店的高级副总裁. ...
- BZOJ 3489 A simple rmq problem 可持久化KDtree/二维线段树
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3489 题意概述: 给出一个序列,每次询问一个序列区间中仅出现了一次的数字最大是多少,如果 ...
- 直接抱过来dd大牛的《背包九讲》来做笔记
P01: 01背包问题 题目 有N件物品和一个容量为V的背包.第i件物品的费用是c[i],价值是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大. 基本思路 这是最 ...
- “Hello World!”团队——Final发布用户使用报告
博客内容: 1.用户体验报告表 2.用户评论截图 3.总结 一.用户体验报告表 用户使用报告 用户类别 用户姓名(化名) 性别 用户职业 使用频次 用户评论 新增用户 小小静 女 中学信息技术老师 8 ...
- Linux 下web开发环境搭建-jdk环境搭建
Centos 7 附:windows 下jdk环境变量 CLASSPATH .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools ...
- HDU 1257 最少拦截系统(最长递减子序列的条数)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1257 题解: #include<iostream> #include<cstdio ...
- java锁有哪些类(转)
转载来源:http://www.cnblogs.com/lxmyhappy/p/7380073.html 1.Java都有哪些锁? 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/ ...
- C#高级编程(第六版)学习:第三十一章:Windows窗体
第三十一章 Windows窗体 创建Windows窗体应用程序 在文本编辑器中输入: /* * form.cs * a simple windows form * */ using System; u ...
- Linux系统中增加swap空间大小
在我的树莓派pi3上编译dlib库时,发现由于内存不足导致编译失败.树莓派是1G内存,swap只有50M,因此将swap增加到500M,编译通过.具体设置方法如下: 使用free命令带上m参数,查看s ...
- 【Linux 命令】- more和less
more命令 more功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b ...