二矫渔、Vue
1.Data屬性
2.Props屬性
父子組件
在父組件中定義數(shù)據(jù)
在使用組件式,綁定父組件中的數(shù)據(jù)
在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)
在template屬性中使用父組件中的參數(shù)
3.props校驗(yàn)
type: 指定數(shù)據(jù)類型 String Number Object ...注意不能使用字符串?dāng)?shù)組苍苞， 只能是對(duì)象大寫形式
txt1:[Number,String],//可以支持多個(gè)
txt2:String,
required: 指定是否必定輸入
txt3:{
? ? ? required:true,
? ? ? type:String
? ? ? },
default: 給默認(rèn)值或者自定義函數(shù)返回默認(rèn)值?
txt4:{
? ? ? default:100
},
如果不輸入就會(huì)返回這個(gè)默認(rèn)值
validator: 自定義函數(shù)校驗(yàn)
validator:function (value) {
? ? ? ? return value>10
? ? }
4.非props屬性
在template中設(shè)置屬性
template:"<span class='test' style='color: red'>紅色</span>"
屬性采用就近原則,在標(biāo)簽中的屬性比非props屬性,優(yōu)先級(jí)高
5.自定義事件
5.1聲明父組件
5.2自定義事件
5.3自定義子組件
5.4主動(dòng)掛載
自定義事件不僅
$on
$emit
6.插槽分發(fā)
6.1 slot插槽
子組件插槽
<slot>插槽</slot>
6.2 具名插槽
利用name屬性來具體賦值并使用
<h3 slot="header">我好帥</h3>
<slot name="header">如果沒有傳遞數(shù)據(jù),默認(rèn)顯示這段文本</slot>
6.3 插槽作用域slot-space
普通
解構(gòu)賦值
7.動(dòng)態(tài)組件
7.1. 使用方式
7.2 keep-alive
7.3 refs屬性
8.數(shù)據(jù)處理
8.1watch屬性
8.2$watch
8.3computed屬性
computed和methods定義
計(jì)算時(shí)用computed
計(jì)算屬性使用時(shí)不加括號(hào)
計(jì)算屬性是基于他們的緩存,效率較高
8.4getter和setter
getter
getter獲取值
setter
setter輸入值
9.生命周期
實(shí)例創(chuàng)建 > 實(shí)例掛載 > 實(shí)例將要更新 >實(shí)例已更新 > 調(diào)用方法 > 實(shí)例寫在
10.自定義指令
10.1基本使用
定義
Vue.directive('focus',{
//當(dāng)綁定元素插入到 DOM 調(diào)用
? ? inserted: function (el) { //元素獲取焦點(diǎn)
? ? ? ? el.focus();
? ? }
});
使用
<input type="text" v-focus/>
