第四讲：项目实战Vue快速入门-用户管理-事件处理

Sian

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、前两步通过事件关联数据，数据再关联视图的方式，使用数据做为中间衔接件互相关联；

[HTML] 纯文本查看 复制代码

      <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>

[CSS] 纯文本查看 复制代码

.fontColor{
  color:red;
}

3.2、删除事件的实现
3.2.1、在删除按钮中使用v-on:click="deleteUser(user)"，这是给按钮绑定一个事件方法，在<script>中要实现的，并且该方法将当前行的user传了过来，在方法实现时，函数中取出user，使用Javascript的数组方法indexOf()和splice()方法，分别获取元素在数组中的序号，以及通过序号删除该元素；

[HTML] 纯文本查看 复制代码

        <!-- 绑定删除事件方法 -->
        <td><button v-on:click="deleteUser(user)">删除</button></td>

[JavaScript] 纯文本查看 复制代码

    deleteUser:function(user){
      // 获取当前对象在数组中的位置序号
      var index = this.users.indexOf(user);
      // 使用数组的splice方法删除对象元素
      this.users.splice(index,1);
    }

3.3、插入用户
3.3.1、将两个文本输入的<input>绑定全局数据对象中做为中间传值对象，方便提交时取值，再将表单提交按钮绑定事件，和删除类似

[HTML] 纯文本查看 复制代码

        <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()方法插入到数据的末尾；第三步，删除绑定数据的内容，方便后续再次接收，因为输入框绑定了中间对象如果不删会一直留在输入框中；

[JavaScript] 纯文本查看 复制代码

    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

[JavaScript] 纯文本查看 复制代码

<!-- 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

[JavaScript] 纯文本查看 复制代码

// 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、源工程代码下载：

游客，如果您要查看本帖隐藏内容请回复