?

GitHub提交

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

注意：頻繁看案例，可能會(huì)被限制。

?

重點(diǎn)：

表單輸入綁定, 單選按鈕的使用。

watch監(jiān)聽

created及生命周期

filters過濾器。

雜：

String對(duì)象: indexOF()查找索引方法，replace()替換方法，slice(startIndex, endIndex)切割方法。

<a>的target特性。<a href='/xxx' target="_blank">xxx</a> 在新的窗口打開document.

?

?

---

?

?

Grid component

本示例創(chuàng)建了一個(gè)可復(fù)用組件，可結(jié)合外部數(shù)據(jù)來使用它

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

?

?

分析方法：?

敲打一遍代碼

在白紙上畫草圖，然后按照數(shù)據(jù)流動(dòng)方向，分出不同的功能。

然后在按照功能逐步分析理解代碼。

排序功能， 用到了sort(function(a, b) { return? 1 | -1 | 0 })

?

知識(shí)點(diǎn)：

1. 類綁定?

v-bind:class="{ 類名: 數(shù)據(jù)對(duì)象 | 函數(shù)}"

上面的語法表示： “類名”這個(gè)類是否有效，是根據(jù)冒號(hào)后面的數(shù)據(jù)或函數(shù)的返回值來確定的。true則生效。

---

綁定的數(shù)據(jù)對(duì)象可以不在內(nèi)聯(lián)定義在模版里： <div v-bind:class="{ classObject }"></div>

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

---

還可以綁定一個(gè)返回對(duì)象的computed屬性中的函數(shù)。
<div v-bind:class="{計(jì)算屬性函數(shù)名}"></div>
這樣就可以根據(jù)復(fù)雜的條件來進(jìn)行選擇是否添加這個(gè)類。
常用并且強(qiáng)大的方法。

---

還可以使用三元表達(dá)式。

?

---

?

檢索 + 過濾 功能

2. JavaScritp Array filter() Method

創(chuàng)建一個(gè)新array，內(nèi)含所有通過測(cè)試函數(shù)的原array元素。

?

3.?HTML中的特性名是大小寫不敏感的。所以使用DOM中的模版時(shí)，駝峰的prop名需要使用等價(jià)的kebab-case命名。

?

4. Object的方法?ES5的方法，比較麻煩，已經(jīng)可以用編輯的=方法。 有的方法仍有用。

Object.keys(person)? ／／得到person對(duì)象的可以修改的properties的name?

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

??

5 some()方法

檢查一個(gè)數(shù)組中，是否有可以通過測(cè)試函數(shù)的元素。如果發(fā)現(xiàn)一個(gè)元素滿足測(cè)試添加，就返回true。并停止檢查剩下的元素。

?

小結(jié)：

data:? 一個(gè)數(shù)組，內(nèi)部是對(duì)象。

目標(biāo)：根據(jù)某些條件得到數(shù)組中的部分元素（格式是對(duì)象）。

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(測(cè)試函數(shù)),? ?Object.keys(obj),? ?Array.some(測(cè)試函數(shù))

data.filter(function(row) { ... })? ?／／此處遍歷data中每個(gè)元素對(duì)象。返回滿足的元素，組成新的Array.

Object.keys(row)　　　　　　　／／此處得到元素對(duì)象的key的數(shù)組集合

[...].some( function(key) { ... })? ?／／此處判斷數(shù)組集合是否有滿足測(cè)試條件的元素，有則返回true。結(jié)束。

??

---

?

排序功能：

分析：

目標(biāo)：根據(jù)columns中的列名來排序，columns= ["name", "power"]

因此：分解為按照name排序，和power排序兩種。

使用sort()方法進(jìn)行排序。sort()使用的是一種排序方法。這里是語法糖。

操作：

1. 在table表頭增加一個(gè)click事件。綁定對(duì)應(yīng)的column。

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

?

?

2. 增加data選項(xiàng)。問2個(gè)問題。

• 用誰排序？? 答：sortKey字符串， 用于存column的名字，
• 排序的狀態(tài)是什么？ 答： sortOrders對(duì)象? 用于儲(chǔ)存所有columns的升序／降序排列狀態(tài)，
  • 1代表ascend,
  • -1代表descend。

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

?

?

3. 添加sortBy(key)方法，當(dāng)用戶點(diǎn)擊table表頭后，發(fā)生什么？

• 把columns的name,傳給sortKey數(shù)據(jù)， 告訴程序用戶操作的列，
• 改變sortOrders的值，告訴程序用另一種排序方式。 （1/-1切換）

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

?

?

4. 初始化Vue實(shí)例中定義的data是動(dòng)態(tài)響應(yīng)數(shù)據(jù)。它們的變化會(huì)被監(jiān)聽。然后從新render對(duì)應(yīng)DOM樹。

　會(huì)再次渲染<tbody>中的<tr>。因此會(huì)調(diào)用計(jì)算屬性中的方法filteredData()。

? ?我們?cè)趂ilteredData方法中，把之前檢索到的數(shù)據(jù)的按照升序／降序排列。然后返回排序后的數(shù)據(jù)。

computed: {filteredData: function() {。。。之前檢索數(shù)據(jù)data...略。。。
var sortKey = this.sortKey　　　　　　　　／／根據(jù)哪個(gè)列來排序。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知識(shí)點(diǎn)：

?1. user-select是什么

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

用戶能否選中text。選中了可以復(fù)制／剪。如果使用none選項(xiàng)，則不能選中，也就不能復(fù)制。

?

2. 用純css,畫出一個(gè)箭頭。

.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; }

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/chentianwei/p/9717279.html

總結(jié)

以上是生活随笔為你收集整理的Vue.js示例：GitHub提交（watch数据，created钩子，filters过滤）； 网格组件(功能：1.检索，2排序)；...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。