一、学习目标

使用网络请求进行前后端交互 (重点)
理解钩子函数的作用（难点）
掌握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 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

随机推荐

关于Amazon.com Seller 网络以及IP地址更换官方回答
Greetings from Amazon Seller Support, I understand your concern that there will be a change of IP ad ...
Centos 7 zabbix 实战应用
实际需求:公司已经有了100台服务器,现在需要使用zabbix全部监控起来. 先出个方案(规划) 常规监控:cpu,内存,磁盘,网卡问题:怎样快速添加100台机器方法1:使用克隆的 ...
Requests库入门——应用实例-网络图片的爬取与保存（好看的小姐姐≧▽≦）
在B站学习这一节的时候,弹幕最为激烈,不管大家是出于什么目的都想体验一下网络爬虫爬取图片的魅力,毕竟之前的实例实话说都是一些没有太大作用的信息. 好了,直接上代码: import requests i ...
Scrum立会报告+燃尽图（十一月二十五日总第三十三次）：展示博客
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2413 项目地址:https://git.coding.net/zhang ...
dcom初步窥探一
一.问题带入: 从delphi 5开始,有许多人都面临过这样的问题:com应用开发出来并且在本机上运行一切正常,但是一旦分发出去实施远程访问时,就无法正常运行了.我自己有段时间在看到“拒绝访问”错误提 ...
【每日scrum】NO.8
(1) 在图的设计过程中掌握了图的基本运算函数的算法的理解和程序的有效吸收,包括图的深度和广度优先的遍历,对图的联通分量的求解,图的最小生成树,图的拓扑排序,图的关键路径, (2)在迪杰斯特拉算法的基 ...
“我爱淘”第二冲刺阶段Scrum站立会议7
完成任务: 完成学院分类的点击查看书籍功能,可以点击书的条目查看书的详细信息.将登陆界面以及注册发布界面完善了一下修复一些bug. 计划任务: 将书的详细信息进行完善,并且可以点击收藏以及已预订等功能 ...
lintcode-496-玩具工厂
496-玩具工厂工厂模式是一种常见的设计模式.请实现一个玩具工厂 ToyFactory 用来产生不同的玩具类.可以假设只有猫和狗两种玩具. 您在真实的面试中是否遇到过这个题? Yes 样例 ToyF ...
BOM对象属性定时器的调用
使count中的内容,自动切换 <body> <h1 id="count"></h1> </body> //获取count var ...
Java实现的词频统计
要求: 1.读取文件: 2.记录出现的词汇及出现频率: 3.按照频率降序排列: 4.输出结果. 概要: 1.读取的文件路径是默认的,为了方便调试,将要统计的文章.段落复制到文本中即可:2.只支持英文: ...

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