第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 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- Amazon - removed your selling privileges and placed a temporary hold on any funds - 1
Hello, We are writing to let you know that we have removed your selling privileges and placed a temp ...
- Fluent Python: Slice
Pyhton中序列类型支持切片功能,比如list: >>> numbers = [1, 2, 3, 4, 5] >>> numbers[1:3] [2, 3] tu ...
- 404 Note Found -（课堂实战）- 项目UML设计（团队）
目录 团队信息 分工选择 课上分工 课下分工 ToDolist alpha版本要做的事情 燃尽图 UML 用例图 状态图 活动图 类图 部署图 实例图 对象图 时序图 包图 通信图 贡献分评定 课上贡 ...
- lintcode-223-回文链表
223-回文链表 设计一种方式检查一个链表是否为回文链表. 样例 1->2->1 就是一个回文链表. 挑战 O(n)的时间和O(1)的额外空间. 标签 链表 思路 找到链表中点后,翻转链表 ...
- 开发环境解决 kafka Failed to send messages after 3 tries
新建了一个kafka集群,在window下写了一个简单的producer做测试,结果遇到了消息发送失败的问题,代码如下: Properties props = new Properties(); pr ...
- PXE Centos7和Centos6
外网网卡:192.168.23.10, 内网网卡:192.168.10.2 PXE(preboot execute environment,预引导执行环境)是由Intel公司开发的最新技术,工作于Cl ...
- CentOS系统iptables防火墙的启动、停止以及开启关闭端口的操作
CentOS 配置防火墙操作实例(启.停.开.闭端口):注:防火墙的基本操作命令:查询防火墙状态:[root@localhost ~]# service iptables status停止防火墙: ...
- 这套C#编码规范写不错
自己总结的C#编码规范--1.命名约定篇:http://www.cnblogs.com/luzhihua55/p/CodingConventions1.html 自己总结的C#编码规范--2.命名选择 ...
- Hibernate 中 load() 和 get() 的区别
get 和 load 方式都是是根据 id 取得一个记录.下边详细说一下 get 和 load 的不同,因为有些时候为了对比也会把 find 加进来. 1.从返回结果上对比: load 方式检索不到的 ...
- Java容器深入浅出之数组
写在前面 关于Java的学习,特别是对于非计算机专业的同学来说,我总是主张从实践中来,到实践中去的学习方法.Java本身是一门应用性特别强的高级编程语言,因此如果能在基于实际开发的经验基础上,对Jav ...