前面我們發現Vue中的數據根據數據類型可以調用ES6中的函數方法,所以在這一章,我們會單獨開出一個小節講解新接觸到的ES6語法,隨着案例的複雜,bugs也逐漸涌現,需要注意的地方一般都是容易出現bugs的地方,所以將注意點和bugs合併,並且添加業務邏輯來幫助從頂端理解思路,這裏重點用來概述Vue或相關重要概念
0.業務邏輯
1.ES6
1.數組.forEach(回調函數名稱(當前對象,當前索引))
2.數組.splice(要刪除元素開始索引,要刪除元素個數)
3.var 第一個查詢到元素的索引=數組.indexOf(查詢元素)
4.var 滿足條件對象的索引=數組.findIndex(回到函數(當前對象))
5.var 滿足條件對象組成的數據=數組.filter(回調函數(當前對象))
6.布爾值=字符串.includes("字符串")
2.Vue
1.v-for指令:v-for="(user,index) in 數組(返回數組的函數())"
2.v-text指令:v-text="標籤中的內容"
3.html
1.細線表格:
table style="background:"#000""
td style="background:"#fff""
4.bugs
1.搜索框用的是雙向數據綁定data加鍵盤enter監聽,表格詳情是通過遍歷data顯示
這樣會發現enter一旦執行修改data,原始的data就會遺失
搜索框不進行鍵盤enter監聽
表格詳情遍歷search函數返回的數據
2.添加點擊事件由於表單元素button和a標籤有默認的點擊事件,所以添加的點擊事件無法正確執行
給@click添加.prevent修飾符
3.沒有通過script.src引入Vue文件
4.在全局函數內部通過this.data獲取VM數據是錯誤的
在數組.filter(回調函數(當前對象))的回調函數中使用this.dataName獲取數據,這裏filter是window的方法,要在函數外部通過var self=this,保留Vue的數據屬性,再在函數內部通過self.dataName調用
5.重點
Vue是數據驅動界面,數據發生改變,頁面上的數據就會重新渲染
一.頁面結構
1.提交表單元素
2.表格
二.頁面樣式
1.整體文字居中
2.細線表格
3.表格居中
三.頁面數據
1.學院信息表
2.添加學員信息
3.搜索框信息
四.頁面方法
1.添加學員方法
2.刪除學員方法
3.搜索方法
五.全局日期過濾器
