Vue.js示例：GitHub提交（watch数据，created钩子，filters过滤）； 网格组件(功能：1.检索，2排序)；

 

GitHub提交

codePen:   https://codepen.io/chentianwei411/pen/wEVPZo

注意：频繁看案例，可能会被限制。

重点：

1. 表单输入绑定, 单选按钮的使用。
2. watch监听
3. created及生命周期
4. filters过滤器。

杂：

1. String对象: indexOF()查找索引方法，replace()替换方法，slice(startIndex, endIndex)切割方法。
2. <a>的target特性。<a href='/xxx' target="_blank">xxx</a> 在新的窗口打开document.

---

 

Grid component

本示例创建了一个可复用组件，可结合外部数据来使用它

MyCode Pen: https://codepen.io/chentianwei411/pen/pxoWLY

分析方法： 

1. 敲打一遍代码
2. 在白纸上画草图，然后按照数据流动方向，分出不同的功能。
3. 然后在按照功能逐步分析理解代码。
4. 排序功能， 用到了sort(function(a, b) { return  1 | -1 | 0 })

 

知识点：

1. 类绑定 

v-bind:class="{ 类名: 数据对象 | 函数}"

上面的语法表示： “类名”这个类是否有效，是根据冒号后面的数据或函数的返回值来确定的。true则生效。

---

绑定的数据对象可以不在内联定义在模版里：

<div v-bind:class="{ classObject }"></div>

data: {
　classObject: {
　　active: true,
　}
}

---

还可以绑定一个返回对象的computed属性中的函数。

<div v-bind:class="{计算属性函数名}"></div>

这样就可以根据复杂的条件来进行选择是否添加这个类。
常用并且强大的方法。

---

还可以使用三元表达式。

---

检索 + 过滤 功能

2. JavaScritp Array filter() Method

创建一个新array，内含所有通过测试函数的原array元素。

3. HTML中的特性名是大小写不敏感的。所以使用DOM中的模版时，驼峰的prop名需要使用等价的kebab-case命名。

4. Object的方法 ES5的方法，比较麻烦，已经可以用编辑的=方法。 有的方法仍有用。

Object.keys(person)  ／／得到person对象的可以修改的properties的name 

var person = {
    firstName: "John",
    lastName : "Doe",
    language : "EN"
}
Object.keys(person) 
//[firstName, lastName, language]

  

5 some()方法

检查一个数组中，是否有可以通过测试函数的元素。如果发现一个元素满足测试添加，就返回true。并停止检查剩下的元素。

小结：

data:  一个数组，内部是对象。

目标：根据某些条件得到数组中的部分元素（格式是对象）。

    data: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ]

        data = data.filter(function (row) {
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        }) 

Array.filter(测试函数),   Object.keys(obj),   Array.some(测试函数)

data.filter(function(row) { ... })   ／／此处遍历data中每个元素对象。返回满足的元素，组成新的Array.

Object.keys(row)　　　　　　　／／此处得到元素对象的key的数组集合

[...].some( function(key) { ... })   ／／此处判断数组集合是否有满足测试条件的元素，有则返回true。结束。

  

---

 

排序功能：

分析：

1. 目标：根据columns中的列名来排序，columns= ["name", "power"]
2. 因此：分解为按照name排序，和power排序两种。
3. 使用sort()方法进行排序。sort()使用的是一种排序方法。这里是语法糖。

操作：

1. 在table表头增加一个click事件。绑定对应的column。

   <th v-for='key in columns' @click="sortBy(key)">

2. 增加data选项。问2个问题。

• 用谁排序？  答：sortKey字符串， 用于存column的名字，
• 排序的状态是什么？ 答： sortOrders对象  用于储存所有columns的升序／降序排列状态，
  • 1代表ascend,
  • -1代表descend。

  data: function() {
    var sortOrders = {}
    this.columns.forEach(function(key){
      sortOrders[key] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders
    }
  },

3. 添加sortBy(key)方法，当用户点击table表头后，发生什么？

• 把columns的name,传给sortKey数据， 告诉程序用户操作的列，
• 改变sortOrders的值，告诉程序用另一种排序方式。 （1/-1切换）

  methods: {
    sortBy: function(key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }

4. 初始化Vue实例中定义的data是动态响应数据。它们的变化会被监听。然后从新render对应DOM树。

　会再次渲染<tbody>中的<tr>。因此会调用计算属性中的方法filteredData()。

   我们在filteredData方法中，把之前检索到的数据的按照升序／降序排列。然后返回排序后的数据。

  computed: {
    filteredData: function() {
　　　　。。。之前检索数据data...略。。。
var sortKey = this.sortKey　　　　　　　　／／根据哪个列来排序。
      var order = this.sortOrders[sortKey]   ／／order的值是1或-1。用它来决定最终的排序。
      if (sortKey) {
        data = data.sort(function(a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order   ／／可以使用嵌套if语句。
        })
      }
      
      return data
    },
  },

---

CSS知识点：

 1. user-select是什么

CSS特性， user-select: auto|none|text|all;

用户能否选中text。选中了可以复制／剪。如果使用none选项，则不能选中，也就不能复制。

2. 用纯css,画出一个箭头。

.arrow {
  display: inline-block;
  vertical-align: middle;
   0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid ;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}