iOS开发笔记 一天到晚游泳的余

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 541|回复: 0

[Vue.js] 第四讲:项目实战Vue快速入门-用户管理-事件处理

[复制链接]
  • TA的每日心情
    发光
    2019-4-19 14:50
  • 签到天数: 366 天

    [LV.9]以坛为家II

    发表于 2017-12-28 15:57:01 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2017-12-29 12:35 编辑

    1、最终效果图
    屏幕快照 2017-12-28 下午3.04.05.png
    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、源工程代码下载:
    游客,如果您要查看本帖隐藏内容请回复


    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2020-8-15 21:15 , Processed in 0.205367 second(s), 22 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表