?

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。