vue學習day2
案例3：品牌管理
添加品牌
- html部分
<div class="panel-body form-inline">
<!-- form-inline屬性讓該元素的子元素都會在一行中顯示 -->
<label>Id:<input type="text" class="form-control" v-model="id"></label>
<label>Name:<input type="text" class="form-control" v-model="name"></label>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
</div>
- methods中add()的部分
add() { // 添加的方法
// 分析：
// 1. 獲取到 id 和 name ,直接從 data 上面獲取
// 2. 組織出一個對象
// 3. 把這個對象，調用 數組的 相關方法，添加到 當前 data 上的 list 中
// 4. 注意：在Vue中，已經實現了數據的雙向綁定，每當我們修改了 data 中的數據，Vue會默認監聽到數據的改動，自動把最新的數據，應用到頁面上；
var car = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(car)
this.id = this.name = ''
}
刪除品牌
- html部分
<a href="" @click.prevent="del(item.id)">刪除</a>
- methods中del()的部分
del(id) { // 根據Id刪除數據
// 分析：
// 1. 如何根據Id，找到要刪除這一項的索引
// 2. 如果找到索引了，直接調用 數組的 splice 方法
/* this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
//splice:刪除從i開始第1個對象
// 在 數組的 some 方法中，如果 return true，就會立即終止這個數組的後續循環
return true;
}
}) */
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
})
// console.log(index)
this.list.splice(index, 1)
}
- some方法和fiNdIndex方法：some方法中可以做任何操作，findIndex更注重於查詢索引
查詢品牌
在使用 v-for 指令循環每一行數據的時候，不再直接 item in list，而是 in 一個 過濾的methods 方法，同時，把過濾條件searchName傳遞進去：
- html部分
<label>
搜索名稱關鍵字：
<input type="text" class="form-control" v-model="keywords">
</label>
//table部分
<tr v-for="item in search(keywords)" :key="item.id">
····
</tr>
- methods中search(keywords)部分
search(keywords) { // 根據關鍵字，進行數據的搜索
/* var newList = []
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList */
// 注意： forEach some filter findIndex 這些都屬於數組的新方法，
// 都會對數組中的每一項，進行遍歷，執行相關的操作；
return this.list.filter(item => {
// if(item.name.indexOf(keywords) != -1)
// 注意 ： ES6中，爲字符串提供了一個新方法，叫做 String.prototype.includes('要包含的字符串')
// 如果包含，則返回 true ，否則返回 false
if (item.name.includes(keywords)) {
return item
}
})
}
search過濾方法中，使用 數組的filter` 方法進行過濾：
search(name) {
return this.list.filter(x => {
return x.name.indexOf(name) != -1;
});
}
- 這裏又提供了兩種數組的新方法:forEach和filter，forEach對整個list進行遍歷，filter則更多用於過濾/篩選這些功能上(上述格式)
Vue調試工具vue-devtools的安裝步驟和使用
過濾器的基本使用方法
<div id="app">
<p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p>
</div>
// 定義一個 Vue 全局的過濾器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一個參數，除了可寫一個 字符串之外，還可以定義一個正則
return msg.replace(/單純/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
- 可同時使用多個過濾器，按順序依次進行直至結束
今日作業
-
indexOf和includes的差別
indexOf返回爲數值型
includes返回爲布爾型
如:int arr=[123]; if(arr.indexOf(1)!=-1) { alert('存在數字1'); } if(arr.includes(1)) { alert('存在數字1'); }一般indexOf多用於查找某元素在數組的位置，而includes多用於判斷是否存在該元素、
-
談談你對v-on的理解
v-on用於綁定html事件，可簡寫爲@，並且可以加事件修飾符/按鍵修飾符
他的優點在於無需手動綁定js事件，可以與DOM完全分開，易於理解和維護 -
@click="del(index)"和@click="del("index")"的差別是什麼前者向del事件傳的參數是index這個變量，後者是向del事件傳了“index”這個字符串
-
下列代碼六個函數的執行順序是什麼
<div onclick="m11();" @click.capture="m12()">
<div onclick="m21();" @click.capture="m22()">
<button onclick="m31();" @click="m32()">一個按鈕</button>
</div>
</div>
- m31()=>m32()=>m21()=>m22()=>m11()=>m12()
- onclick和@click應該是同級的，然後觸發順序應該是從btn執行，結束後不斷觸發父級元素的事件
-
定義一個私有指令，使加載該指令的標籤都擁有紅色字體。
- html部分
<div id="app2">
<h3 v-color="'red'">{{ msg }}</h3>
</div>
- vue實例部分
var vm2 = new Vue({
el: '#app2',
data: {
msg:"今天是vue學習day2 哈哈哈哈哈哈哈"
},
methods: {},
filters: {
},
directives: { // 自定義私有指令
'fontcolor': { // 設置字體顏色
bind: function (el, binding) {
el.style.fontcolor = binding.value
}
}
}
})
- 實現效果
![效果圖haha]()
