一.品牌案例
首先是品牌案例出手，鞏固之前的知識點，順便回顧下基本的Js方法，這裏不使用css樣式，就最基本的html表格展示:
直接上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
[v-cloak] { //用於渲染數據完成後展示
display: none
}
</style>
<body>
<div id="app">
id:<input value="id" v-model="id"><br> //輸入框綁定data中的id
name:<input value="name" v-model="name"> //name綁定車的姓名
<button @click="addCar">添加</button> //添加方法
<br>
搜索名稱關鍵字:<input v-model="keyword"> //綁定關鍵字
<table style="border:1px solid black"> //table展示
<tr> //表頭
<td>id</td>
<td>品牌名稱</td>
<td>添加時間</td>
<td>操作</td>
</tr>
<tr v-for="(item,i) in search(keyword)" :key="item.id"> //從search返回的List遍歷取值並展示，同時使用:key綁定對應的值
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td @click="deleteByIndex(i)"><button>刪除</button></td> //傳對應的索引，根據索引刪值
</tr>
</table>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
id: '', //新增id
name: '', //新增name
keyword: '', //關鍵字搜索
car: " ", //新增車輛對象
cars: [{ //默認展示的對象數組
id: 1,
name: '寶馬',
time: new Date()
}, {
id: 2,
name: '奔馳',
time: new Date()
}],
},
methods: {
addCar() { //新增車輛，獲取到輸入的id和name，並Push到this.cars即可，同時清空id和name
this.car = {
id: this.id,
name: this.name,
time: new Date
}
this.cars.push(this.car)
this.id = this.name = null
},
deleteByIndex(index) { //根據索引刪除對應的內容
this.cars.splice(index, 1)
},
search(keyword){ //根據關鍵字搜索，這裏使用foreach,js的字符串查詢，indexOf，如果=-1則沒有該字符串
//方法1: let tempList=[]
// this.cars.forEach(item => {
// if(item.name.indexOf(keyword) != -1){
// tempList.push(item)
// }
// })
// return tempList
//方法2:
let tempList = this.cars.filter(item=>{ //es6的新特性filter，用來過濾生成新數組並返回tempList，使用includes方法判斷是否包含
if(item.name.includes(keyword)){
return item
}})
return tempList
}
}
})
</script>
</body>
</html>
說明: 一些Es6的新特性
//forEach:沒辦法停止遍歷，全部都遍歷結束
//some:可以提前終止
//filter:過濾,篩選符合條件的數據
//findIndex:查找下標
過濾器
過濾器的使用:mustache和v-bind兩種指定才能使用過濾器，其他的不能使用過濾器
過濾器的定義: 並且可以有多個過濾器，內容依次往後傳遞
//data永遠都是過濾器使用傳遞過來的值
app.filter('過濾器的名稱',function(data,arg1,arg2){
return data+'123'+arg1+arg2
})
//過濾器的使用,可以傳多個參數
{{name|namenpe(arg1,arg2)}}
配合全局時間過濾器的使用:
Vue.filter('dateFormat',function(data,type='yyyy-mm-dd'){ //獲取時間並判斷轉換日期格式，可以用戶自定義
var dt = new Date(data) //轉換時間
var y = dt.getFullYear //年
var m = dt.getMonth +1 //月
var d = dt.getDate //日
if(type.toLowerCase()=='yyyy-mm-dd hh:mm:dd'){ //大小寫轉換
var h = dt.getHours //時
var mm = dt.getMinutes //分
var ss = dt.getSeconds //秒
return `${y}-${m}-${d}-${h}:${mm}:${ss}` //return格式
}else{
return `${y}-${m}-${d}`
}
})
全局過濾器:所有的vm實例都能共享，比如多個app,對應多個vm，那麼都能共享。私有過濾器:在當前的vm中定義私有過濾器:如果同名，那麼有限調用私有過濾器，就近原則:
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
},
methods: {
},
filters:{
dataFormat(dateStr,pattern){
//局部過濾器1 過濾器調用的時候採用就近原則，如名稱一致，那麼優先調用私有過濾器
}
}
})
</script>
Es6:padStart:填充字符換方法，兩個參數(maxLength,fillString=’ ') 8->08
var m = dt.getMonth +1.toString().padStart(2,'0')
自定義修飾符:
- @keyup.enter:回車鍵，
- .tab
- .delete
- .esc
- space
- up
- down
- left
- right
自定義全局按鍵修飾符:
Vue.config.KeyCodes.f2=113 //不過現在瀏覽器新特性已經支持f2了
name:<input value="name" v-model="name" @keyup.f2="addCar">
默認獲取焦點:自定義指令:v-fous:
Vue.directive('focus',{
bind:(el){ //樣式
}, //每當指令綁定到元素上時會執行的函數，只執行一次，但是剛綁定的時候還沒能插入到Dom元素中去，因此focus在這裏不生效
inserted:(el){
el.focus() //行爲，防止不生效
}, //表示元素插入到DOM中的時候會執行insrted函數
update:(el){
} //當VNode更新時會執行update，可能會觸發多次
}):
定義全局的指令，參數1:指令的名稱，在定義時前面不需要加v-前綴，但是在i調用時指令名稱前加上v-調用。參數2是一個對象，有一些指令相關的函數，這些函數可以在特定的時候執行相關操作.在每個函數中，第一個參數永遠都是el，就是原生的js對象，調用原生的dom方法。
Vue.directive('focus',{
inserted(el){
el.focus()
}
})
樣式只要綁定給了元素，不管這個元素有沒有被插入到頁面中，這個元素肯定有了一個內聯的樣式，將來元素肯定會顯示，瀏覽器會解析應用給這個元素，通常第二個參數爲binding,裏面有幾個常用的值:name,value,expression即可。demo:
Vue.directive('color',{ //定義color指令
bind(el,binding){
el.style.color=binding.value //操作原生dom改變顏色
}
})
搜索名稱關鍵字:<input v-model="keyword" v-focus v-color="'green'">
將文本框內容的顏色渲染成綠色
私有指令:綁定在vm下，和data,methods,filter同級:
directive:{
‘fontweight’:{
bind(el,binding){
el.style.fontWeight=binding.value
}
}
}
簡寫:->
'fontsize':(el,binding){ //類似存放在了bind和update上
el.style.fonsize=binding.value
}
Vue對象的生命週期:
分類:創建階段/運行階段/銷燬階段
new Vue()->初始化:->beforeCreated(第一個生命週期函數，實例完全被創建出來之前會執行)，data和methods中的內容都沒被初始化->init data and method->created(數據和方法都能被獲取到，最早的方法)->判斷是否有el,判斷是否有template，如果沒有的話就把el編譯爲模板，只是在內存中渲染好了->編譯完之後要掛載:before mount:模板編譯完成，還沒渲染到頁面->內容只是{{msg}}->將內存中編譯好的模板真實地替換到瀏覽器中->mounted()輸出真實值。->此時如果沒有其他操作，實例就不動了->如果通過插件操作頁面上的DOM節點，最早要在mounted中進行->運行階段:當數據改變時候的兩個函數:beforeUpdate/update兩個函數，這兩個函數會根據data的改變會有選擇性的觸發0-無窮大次->銷燬:beforeDestory鉤子函數:都處於可用狀態，還沒有真正進行銷燬的過程->destory,真正的進行銷燬.