1.鉤子函數(shù)mounted
表示頁面一加載進來就執(zhí)行函數(shù)里面的內(nèi)容(和window.onload類似)
注意:mounted鉤子函數(shù)的名字不能隨便取,不能寫在methods中,
鉤子函數(shù)是頁面一加載完畢就執(zhí)行該函數(shù)
使用方法:
1.給dom元素加ref屬性
2.通過this.$refs.ref的值 來獲取要操作的dom
mounted(){
// document.getElementById('inputId').focus()
//通過this.$refs.ref的值來獲取dom
//this.$refs.inputRefId
this.$refs.inputRefId.focus()
console.log(this.$refs)//對象
console.log(this.$refs.inputRefId)//獲取到dom元素
},
2.全局自定義指令Vue.directive()局部自定義指令
1.全局自定義指令
自定義指令通過Vue.directive('自定義指令的名稱',{inserted:function(el,binding){}})創(chuàng)建,它有兩個參數(shù),一個是自定義指令的名字,可以隨便取,但是全部小寫,另一個是一個對象,表示自定義指令的配置項
Inserted(el,binding)鉤子函數(shù),表示自定義指令插入到標簽中的時候就執(zhí)行,它有兩個參數(shù),el表示使用自定義指令的元素,,binding表示自定義指令的信息
用法:
用法1:直接在標簽中插入v-自定義屬性的名稱
1.在要操作的元素添加v-自定義屬性的名稱
2.使用el操作元素,el代表自定義指令綁定的
用法2:在標簽中插入v-自定義屬性的名稱="data中的屬性名"
1.在要操作的元素添加v-自定義屬性的名稱
2.使用el操作元素,el代表自定義指令綁定的
color是在data中定義的屬性,,color:"red"
2.局部自定義指令
局部自定義指令通過在組件內(nèi)部使用directives屬性創(chuàng)建,放自定義指令的容器directives是一個對象,每個自定義指令也是一個對象,里面有Inserted(el,binding)鉤子函數(shù)
3.全局過濾器和局部過濾器
1.全局過濾器的定義方式:
通過Vue.filter("",function(管道符號|左邊參數(shù)的值,其他參數(shù)1,其他參數(shù)2){})方法創(chuàng)建過濾器,第一個參數(shù)是過濾器的名字,第二個參數(shù)是過濾器的處理函數(shù),在處理函數(shù)中,第一個參數(shù)是默認參數(shù),是要過濾的數(shù)據(jù),其他的參數(shù)可以自行設(shè)置
注意:需要在要過濾的數(shù)據(jù)結(jié)構(gòu)上面加 管道符 | 過濾器的名稱
2.局部過濾器的定義方式
局部過濾器通過在組件內(nèi)部使用filters屬性創(chuàng)建,放過濾器的容器filters是一個對象,每個過濾器是一個函數(shù),需要return
4.computed計算屬性
創(chuàng)建計算屬性通過computed關(guān)鍵字,它是一個對象
開發(fā)時,能用computed實現(xiàn)的時候,就用computed實現(xiàn),需要執(zhí)行異步操作的時候,就要用到watch
computed:{
//這里的fullName是一個計算屬性,它是一個函數(shù),但是這個函數(shù)可以當(dāng)成屬性來使用,就是不用在data中定義fullName屬性,可以直接被使用在操作dom
fullName(){
return this.firstName+this.lastName
}
},
沒有再data中設(shè)置fullName屬性,但是它可以直接被當(dāng)成一個屬性來使用
5.watch監(jiān)聽器
watch監(jiān)聽器用來監(jiān)聽data中數(shù)據(jù)的值，只要監(jiān)聽的數(shù)據(jù)一變化绒尊，它就能執(zhí)行相應(yīng)的函數(shù)
創(chuàng)建監(jiān)聽器通過watch屬性耻卡，它是一個對象
1.監(jiān)聽data中普通屬性,里面的函數(shù)名是data中你要監(jiān)聽的屬性的名稱
2.監(jiān)聽data中的屬性是對象,里面的函數(shù)名是固定的,handler
6.使用filter()方法實現(xiàn)搜索功能
value表示數(shù)組中的每一項
搜索功能:
思路:設(shè)置搜索的內(nèi)容是searchdata,判斷user數(shù)組中的品牌名稱name是否有searchdata,如果有,返回帶有關(guān)鍵字的列表
這里使用了filter方法返回一個新數(shù)組,然后使用indexOf判斷name中是否有關(guān)鍵字
computed:{
newlist(){
方法1 ES5
var that=this
function ishave(value){
return value.name.indexOf(that.searchdata) !== -1
}
var templist=this.user.filter(ishave)
return templist
2.方法2使用ES6箭頭函數(shù)
return this.user.filter(value => value.name.indexOf(this.searchdata) !== -1)
},
}
7.axios
1.get請求
方法1
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
方法2
axios.get('/user', {
params: { //參數(shù)
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.post請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
8.組件化和模塊化
模塊化和組件化概念的解讀
? 什么是模塊化：是從代碼的角度分析問題伶贰；把可復(fù)用的代碼，抽離為單獨的模塊杯瞻；
? CommonJS 模塊化規(guī)范帅刀；
? 模塊化的好處：提高了代碼的復(fù)用率，提供模塊作用域的概念赡若，防止全局變量污染；方便了程序員之間 代碼互相調(diào)用团甲；
? 什么是組件化：組件化是從頁面UI的角度進行分析問題的斩熊；把頁面中可復(fù)用的UI結(jié)構(gòu)，抽離為單獨的組件伐庭；
? 組件化的好處：方便了UI結(jié)構(gòu)的重用；隨著項目開發(fā)的深入分冈，手中可用的組件會越來越多圾另；elementUI
9.全局組件和私有組件
1.全局組件在使用的時候才確定關(guān)系
定義組件的語法
? Vue.component('組件的名稱', { 組件的配置對象 })
2.私有組件,在定義的時候就確定了關(guān)系
使用的時候,以<my-com2></my-com2>的形式放到vm1控制的#app的區(qū)域,放到其他區(qū)域會報錯
