一、学习目标

使用网络请求进行前后端交互 (重点)
理解钩子函数的作用（难点）
掌握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"。

转载于:https://www.cnblogs.com/zhangqigao/p/9604070.html

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

Vue.js函数的生命周期
一.vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期二.vue.js里面的钩子函数钩子函数昰什么相当于回调函数即让开发者在特定的时候执行自定义逻辑 1.自定义 ...
【Vue.js学习】生命周期及数据绑定
一.生命后期官网的图片说明: Vue的生命周期总结 var app = new Vue({el:"#app", beforeCreate: function(){console. ...
vue.js框架的生命周期：常用钩子函数
//组件实例化之前执行的函数 beforeCreate:function () { alert("组件实例化之前执行的函数") }, //组件实例化完毕执行的函数 created: ...
Vue 进阶系列丨生命周期
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue之MVVM、Vue实例对象、生命周期
1.初识Vue Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层(如何理解),不仅易于上手,还便于与第三方库或既有项目整合. 渐进式框架:渐进 ...
Vue 进阶语法和生命周期
文章目录 Vue 进阶语法和生命周期 16.Vue:生命周期[了解] 17.Vue:computed计算属性 18.Vue:watch监控属性 Vue 进阶语法和生命周期 a. 每个 Vue 应用都是 ...
vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
在iphoneX及以上版本从外链回退不触发事件,7P,7没发现这个bug 安卓上自测没有发现这个问题最近做项目中发现了一个问题,iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到v ...
第9章 maven的插件和生命周期
第9章 maven的插件和生命周期本章介绍了maven生命周期.插件以及如何配置插件 9.1 生命周期一般的项目都会经历这几个步骤:编译,测试,打包,部署,有些公司是手动方式,有些是自动化脚本方式 ...

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