一、学习目标

  • 使用网络请求进行前后端交互 (重点)
  • 理解钩子函数的作用  (难点)
  • 掌握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交互及生命周期练习的更多相关文章

  1. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  2. Vue.js系列:生命周期钩子

    开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论. 生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法.从初始化开始到它被破坏时,对象都会遵循不 ...

  3. 【Vue.js学习】生命周期及数据绑定

    一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...

  4. Vue.js 2.0生命周期

    1.beforeCreate 组建实例刚被创建,属性和方法等都还没有 2.created         实例已经创建完成,属性已经绑定 3.beforeMount  模板编译之前 4.mounted ...

  5. vue基本配置和生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  6. 多个Activity交互的生命周期:

    一.多个Activity交互的生命周期: A Activity打开B Activity的时候:        A Activity                    B Activity     ...

  7. Vue2.5笔记:Vue的实例与生命周期

    理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作. 首先 Vu ...

  8. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  9. 第2章-Vue.js指令

    一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

随机推荐

  1. Tim Cook在电话会议上宣布,Burberry前CEO Angela Ahrendts将在下周加入苹果

    在今天的第二季度财报电话会议上,苹果公司的 CEO Tim Cook 宣布 Burberry 的前 CEO Angela Ahrendts 将在下周入职苹果,出任苹果负责零售和网上商店的高级副总裁. ...

  2. BZOJ 3489 A simple rmq problem 可持久化KDtree/二维线段树

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3489 题意概述: 给出一个序列,每次询问一个序列区间中仅出现了一次的数字最大是多少,如果 ...

  3. 直接抱过来dd大牛的《背包九讲》来做笔记

    P01: 01背包问题 题目 有N件物品和一个容量为V的背包.第i件物品的费用是c[i],价值是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大. 基本思路 这是最 ...

  4. “Hello World!”团队——Final发布用户使用报告

    博客内容: 1.用户体验报告表 2.用户评论截图 3.总结 一.用户体验报告表 用户使用报告 用户类别 用户姓名(化名) 性别 用户职业 使用频次 用户评论 新增用户 小小静 女 中学信息技术老师 8 ...

  5. Linux 下web开发环境搭建-jdk环境搭建

    Centos 7 附:windows 下jdk环境变量 CLASSPATH .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools ...

  6. HDU 1257 最少拦截系统(最长递减子序列的条数)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1257 题解: #include<iostream> #include<cstdio ...

  7. java锁有哪些类(转)

    转载来源:http://www.cnblogs.com/lxmyhappy/p/7380073.html 1.Java都有哪些锁? 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/ ...

  8. C#高级编程(第六版)学习:第三十一章:Windows窗体

    第三十一章 Windows窗体 创建Windows窗体应用程序 在文本编辑器中输入: /* * form.cs * a simple windows form * */ using System; u ...

  9. Linux系统中增加swap空间大小

    在我的树莓派pi3上编译dlib库时,发现由于内存不足导致编译失败.树莓派是1G内存,swap只有50M,因此将swap增加到500M,编译通过.具体设置方法如下: 使用free命令带上m参数,查看s ...

  10. 【Linux 命令】- more和less

    more命令 more功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b ...