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

GitHub提交

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

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

重点：

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

杂：

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

Grid component

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

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

分析方法：

敲打一遍代码
在白纸上画草图，然后按照数据流动方向，分出不同的功能。
然后在按照功能逐步分析理解代码。
排序功能，用到了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。结束。

排序功能：

分析：

目标：根据columns中的列名来排序，columns= ["name", "power"]
因此：分解为按照name排序，和power排序两种。
使用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 = keythis.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;width: 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;
}

转载于:https://www.cnblogs.com/chentianwei/p/9717279.html