第四讲：项目实战Vue快速入门-用户管理-事件处理
本帖最后由 Sian 于 2017-12-29 12:35 编辑1、最终效果图
2、需求分析：主要完成三个功能
2.1、勾选某一行前面的checkbox，对应这行文本文字变红；
2.2、单击某一行后面的删除按钮，删除对应这行的内容；
2.3、在最下面输入用户名和姓名，单击提交，新增一行内容；
3、实现解析
3.1、勾选变色，使用vue的语法指令v-model、v-bind:class
3.1.1、将checkbox绑定user.checked属性，使得事件与数据相关联；
3.1.2、再使用v-bind:class={fontColor:user.checked}，将css类fontColor与表格中的<tr>绑定，使得数据与视图相关联；
3.1.2.1、说明一下，初学者可能会看不懂v-bind:class={fontColor:user.checked}，解释一下，这句的意思是，如果user.checded为真，则当前元素绑定fontColor类，否则不绑定。还是那句话，如果不理解就记住这种写法，后续照样式模仿着用，否则就去官网看文档，建议记住！！记不住？多写几次，我在写这帖子的时候也是写了好多遍才慢慢熟练一点，只能说是熟练一点！我为什么要发帖？一方面是分享，另一方面是多写几次，熟练一下，更重要的是如果我能写清楚并且让做为初学者的你都能读懂并理解，那我理解的就更深入了。(如果没达到这效果，请轻喷……多说了两句)
3.1.3、前两步通过事件关联数据，数据再关联视图的方式，使用数据做为中间衔接件互相关联； <tr v-for="user in users" v-bind:class="{fontColor:user.checked}">
<td><input type="checkbox" v-model="user.checked"/></td>
<td>{{user.username}}</td>
<td>{{user.name}}</td>
<!-- 绑定删除事件方法 -->
<td><button v-on:click="deleteUser(user)">删除</button></td>
</tr>.fontColor{
color:red;
}3.2、删除事件的实现
3.2.1、在删除按钮中使用v-on:click="deleteUser(user)"，这是给按钮绑定一个事件方法，在<script>中要实现的，并且该方法将当前行的user传了过来，在方法实现时，函数中取出user，使用Javascript的数组方法indexOf()和splice()方法，分别获取元素在数组中的序号，以及通过序号删除该元素； <!-- 绑定删除事件方法 -->
<td><button v-on:click="deleteUser(user)">删除</button></td> deleteUser:function(user){
// 获取当前对象在数组中的位置序号
var index = this.users.indexOf(user);
// 使用数组的splice方法删除对象元素
this.users.splice(index,1);
}3.3、插入用户
3.3.1、将两个文本输入的<input>绑定全局数据对象中做为中间传值对象，方便提交时取值，再将表单提交按钮绑定事件，和删除类似 <form>
<!-- 将输入框与页面数据中的某个对象绑定，方便取值 -->
<input type="text" placeholder="请输入用户名" v-model="newUser.username"/>
<input type="text" placeholder="请输入姓名" v-model="newUser.name"/>
<!-- 绑定提交事件方法 -->
<input type="submit" value="提交" v-on:click="addUser"/>
</form>3.3.2、事件的实现，分为三步：第一步，将值取出赋值给新创建的一个user对象中；第二步，将这个对象通过数组的push()方法插入到数据的末尾；第三步，删除绑定数据的内容，方便后续再次接收，因为输入框绑定了中间对象如果不删会一直留在输入框中； addUser:function(event){
// 屏蔽表单提交的默认事件
event.preventDefault();
// 创建一个新对象，并给对象的属性赋值
var user = {
username:this.newUser.username,
name:this.newUser.name
}
// 将新对象插入到数组的末尾；
this.users.push(user);
// 清空新用户对象，方便再次输入
this.newUser = {};
},4、部分代码示例：
4.1、App.vue<!-- 1、模板结构 -->
<template>
<div id="app" align="center">
<h1>User Manager</h1>
<table>
<tr><th></th><th>用户名</th><th>姓名</th><th></th></tr>
<tr v-for="user in users" v-bind:class="{fontColor:user.checked}">
<td><input type="checkbox" v-model="user.checked"/></td>
<td>{{user.username}}</td>
<td>{{user.name}}</td>
<!-- 绑定删除事件方法 -->
<td><button v-on:click="deleteUser(user)">删除</button></td>
</tr>
<tr><td colspan="4" align="center">
<form>
<!-- 将输入框与页面数据中的某个对象绑定，方便取值 -->
<input type="text" placeholder="请输入用户名" v-model="newUser.username"/>
<input type="text" placeholder="请输入姓名" v-model="newUser.name"/>
<!-- 绑定提交事件方法 -->
<input type="submit" value="提交" v-on:click="addUser"/>
</form>
</td></tr>
</table>
</div>
</template>
<!-- 2、JS处理 -->
<script>
export default {
name: 'app',
// 数据集合
data(){
return {
users:[],
newUser:{},
};
},
// 初始化方法
created:function(){
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then(function(response){
// console.log(response.data);
this.users = response.data;
});
},
// 方法集合
methods:{
deleteUser:function(user){
// 获取当前对象在数组中的位置序号
var index = this.users.indexOf(user);
// 使用数组的splice方法删除对象元素
this.users.splice(index,1);
},
addUser:function(event){
// 屏蔽表单提交的默认事件
event.preventDefault();
// 创建一个新对象，并给对象的属性赋值
var user = {
username:this.newUser.username,
name:this.newUser.name
}
// 将新对象插入到数组的末尾；
this.users.push(user);
// 清空新用户对象，方便再次输入
this.newUser = {};
},
}
}
</script>
<!-- 2、样式处理 -->
<style scoped>
table,th,td{
border:1px solid gray;
border-collapse:collapse;
padding:5px;
}
.fontColor{
color:red;
}
</style>
4.2、main.js// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入网络请求组件
import vueResource from 'vue-resource'
Vue.use(vueResource)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
5、整个小项目基本上已经完成，在线演示链接：http://www.yusian.com/vue/demo/user_manager/
6、源工程代码下载：**** Hidden Message *****
页:
[1]