update:Vue的列表功能举例

2018-04-05 11:01:33 +08:00 · 2018-04-05 11:01:33 +08:00 · 8747292cac
commit 8747292cac
parent 4deec8872e
3 changed files with 179 additions and 12 deletions
--- a/10-ES6/04-ES6：变量、函数扩展.md
+++ b/10-ES6/04-ES6：变量、函数扩展.md
@ -565,6 +565,7 @@ ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，t
 - [阮一峰 | ECMAScript 6 入门](http://es6.ruanyifeng.com/)
 ## 我的公众号
 想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
--- a/21-Vue基础/01-01.Vue基础语法：系统指令.md
+++ b/21-Vue基础/01-01.Vue基础语法：系统指令.md
@ -1,4 +1,7 @@
 > 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
 > 以下是正文。
 ## Vue初体验
@ -128,15 +131,15 @@
 - `.stop`  阻止冒泡。本质是调用 event.stopPropagation()。
-`.prevent`  阻止默认事件。本质是调用 event.preventDefault()。
+- `.prevent`  阻止默认事件。本质是调用 event.preventDefault()。
-`.capture`  添加事件监听器时，使用 capture 模式。
+- `.capture`  添加事件监听器时，使用 capture 模式。
-`.self`  只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
+- `.self`  只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
-``.{keyCode | keyAlias}`   只当事件是从侦听器绑定的元素本身触发时，才触发回调。
+- ``.{keyCode | keyAlias}`   只当事件是从侦听器绑定的元素本身触发时，才触发回调。
-``.native` 监听组件根元素的原生事件。
+- ``.native` 监听组件根元素的原生事件。
 写法示范：
@ -714,10 +717,11 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 `v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`是添加/删除DOM元素，而`v-show`是在这个元素上添加/移除`style="display:none"`属性。
 ## 我的公众号
 想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
-
+![](http://img.smyhvae.com/2016040102.jpg)
--- a/21-Vue基础/01-02.Vue的举例：列表功能.md
+++ b/21-Vue基础/01-02.Vue的举例：列表功能.md
@ -4,7 +4,7 @@
 ### 步骤 1：列表功能
-代码如下：
+完整的代码如下：
 ```html
 <!DOCTYPE html>
@ -111,7 +111,7 @@
-代码如下：
+完整的代码如下：
 ```html
 <!DOCTYPE html>
@ -258,12 +258,174 @@ js部分：
    // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
    var index = this.list.findIndex(function(item){
-    //根据item中的id属性来判断这个item是否是上面id中对应的数据，
+    //根据item中的id属性去匹配传进来的id
    //如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
-    return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
+    return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的index
    });
 ```
 当item被删除后，v-for会被自动调用。
 完整版代码：
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;  /*这一行，不能少：表格的两边框合并为一条*/
        }
        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }
        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }
        .form {
            width: 800px;
            margin: 20px auto;
        }
        .form button {
            margin-left: 10px;
        }
    </style>
    <script src="vue2.5.16.js"></script>
 </head>
 <body>
    <div id="app">
        <div class="form">
            编号：
            <input type="text" v-model="formData.id"> 名称：
            <input type="text" v-model="formData.name">
            <button v-on:click="addData">添加</button>
        </div>
        <table class="table">
            <th>编号</th>
            <th>名称</th>
            <th>创建时间</th>
            <th>操作</th>
            <tr v-show="list.length == 0">
                <td colspan="4">列表无数据</td>
            </tr>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <!--绑定delete事件，根据括号里的参数进行删除-->
                <td>
                    <a href="#" v-on:click="delData(item.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>
 </body>
 <script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
            //用户添加的数据
            formData: {
                id: 0,
                name: ""
            }
        },
        methods: {
            addData: function () {
                //将数据追加到list中
                var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
                this.list.push(p);
                //清空页面上的文本框中的数据
                this.formData.id = 0;
                this.formData.name = '';
            },  //注意：方法之间用逗号隔开，这个逗号不要忘记了
            delData: function (id) {
                // 0 提醒用户是否要删除数据
                if (!confirm('是否要删除数据?')) {
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }
                // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
                var index = this.list.findIndex(function (item) {
                    return item.id == id
                });
                // 2 调用方法：list.splice(待删除的索引, 删除的元素个数)
                this.list.splice(index, 1);
            }
        }
    });
 </script>
 </html>
 ```
 ### 步骤 5：按条件筛选item
 在 Vue 1.0版本中，可以通过`filterBy`这个api进行过滤。
 如果item是简单数据类型，可以这样筛选：
 ```html
    <div v-for="item in list | filterBy 'hello'">
 ```
 上方代码的意思是：找到所有item中包含`hello`的指定item。
 如果item是一个对象，比如：
 ```javascript
    list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
 ```
 上面的list数据中，我要去过滤匹配item中的name属性，可以这样筛选：
 ```html
    <div v-for="item in list | filterBy 'hello（筛选条件值）' in 'name'">
 ```
 但`filterBy`这种系统过滤器只是Vue1.0中的api，在Vue2.0中已经删除了，我们需要自定义过滤器。