vue實(shí)例
var data = {a: 1}
var vm = new Vue({
el: '#app',
router,
data: data,
components: {App},
template: ''
})
vm.a = 5
console.log(vm.a === data.a)
- 傳進(jìn)去的數(shù)值與外面的數(shù)值一直相等
- 在外面添加的屬性不會(huì)隨之改變
- 使用Object.freeze(obj)后在傳進(jìn)去的值不會(huì)被綁定
- 前面帶有
$的函數(shù)一般是vue的屬性或方法
vm.$data //傳進(jìn)去的data vm.$el //組件的根節(jié)點(diǎn) vm.$watch('a', function (newValue, oldValue) {}) //數(shù)據(jù)a改變之后觸發(fā)的回調(diào)函數(shù)瘾婿，不要使用剪頭函數(shù)
生命周期
-
beforeCreate、created -
beforeMount织鲸、mounted -
beforeUpdate论皆、updated -
beforeDestroy离唐、destroyed
模板語法
<span>Message: {{ msg }}</span>- 只渲染一次
<span v-once>{{ msg }}</span> - 輸出html代碼：
<p>Using v-html directive: <span v-html="rawHtml"></span></p> -
v-bind可以使用簡單表達(dá)式，也可以為元素指定屬性宫纬，如<a v-on:click="doSomething">...</a>或<a v-bind:href="url">...</a> - 也可以使用修飾符：
<form v-on:submit.prevent="onSubmit">...</form> - 縮寫：
v-bind=>:,v-on=>@
計(jì)算屬性
- 可以理解為一個(gè)內(nèi)部的方法份帐，可以隨時(shí)改變傳入的
data值 - 計(jì)算屬性寫在
computed方法中
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
- 計(jì)算屬性使用緩存，方法不使用緩存词疼，方法寫在
methods中 - 進(jìn)行較大的開銷的時(shí)候?qū)⒑瘮?shù)寫在
watch中灶伊，可以理解為自動(dòng)節(jié)流函數(shù)
class與style綁定
- 使用
v-bind控制class，v-bind中可以是一個(gè)數(shù)組寒跳，在data中指定數(shù)據(jù)，經(jīng)常與計(jì)算屬性連用 - 會(huì)講組件里面和外面的class屬性一起添加
- 使用
v-bind也可以綁定內(nèi)聯(lián)屬性竹椒，會(huì)自動(dòng)添加瀏覽器前綴
條件渲染
- 通過
v-if控制元素是否顯示童太，v-else必須緊跟在v-if的后面，也可以使用v-else-if - 也可以使用
v-show,他不會(huì)在DOM中刪除元素胸完，只是控制元素不顯示 - v-for 具有比 v-if 更高的優(yōu)先級(jí)书释。
列表渲染
- 用
v-for渲染列表，需要使用v-for="item in [array]"語法 - 可以使用
v-for="(item, index) in [array]"將數(shù)組的鍵名也加上 - 如果是對(duì)象的話赊窥，使用
v-for=value in [object] - 可以使用
v-for="(value, key, index)in object"獲取鍵名和序號(hào) - 使用
push, pop, shift, unshift, splice, sort, reverse方法更改數(shù)組時(shí)爆惧，vue會(huì)自動(dòng)監(jiān)測并重新渲染 - 使用索引直接設(shè)置和修改數(shù)組長度不會(huì)檢測并渲染
- 使用對(duì)象時(shí)，vue不會(huì)檢測對(duì)象屬性的添加或刪除锨能，但是可以使用
Vue.set(object, key, value)為對(duì)象添加屬性 - 不使用計(jì)算屬性更改數(shù)組扯再，應(yīng)該使用方法
- 截取一段范圍的
v-for:<span v-for="n in 10">{{ n }} </span> - v-for 的優(yōu)先級(jí)比 v-if 更高
事件處理
- 使用
v-on監(jiān)聽DOM事件，事件的處理方法寫在method中 - 可以將
$event作為參數(shù)傳給方法址遇，方法中可以調(diào)用原聲事件對(duì)象 - 使用修飾符達(dá)到一些目的：
-
.stop阻止單擊事件繼續(xù)傳播 -
.prevent提交事件不再重載頁面 -
.capture添加事件監(jiān)聽器時(shí)使用事件捕獲模式 -
.self只處理自己觸發(fā)的事件 -
.once處理事件只進(jìn)行一次 -
.passive只要觸發(fā)事件熄阻，立刻執(zhí)行，不等事件完成 - 使用的時(shí)候要注意順序倔约，可以串聯(lián)使用
-
- 按鍵修飾符
- 可以使用
.+數(shù)字秃殉，還有一些常用的按鍵 -
.enter,tab,delete,esc,space,up,down,left,right - 可以通過
config.keyCodes設(shè)置按鍵別名 - and so on ...不太常用
- 可以使用
表單輸入綁定
- 使用
model綁定表單元素，初始值為傳入的data - 多個(gè)復(fù)選框應(yīng)該綁定到同一個(gè)數(shù)組中
- 多個(gè)單選按鈕綁定到同一個(gè)變量中
- 下拉框應(yīng)該加一個(gè)禁用的請(qǐng)選擇，以兼容ios
-
.lazy將每次都改變的model值設(shè)置為change -
.number將用戶輸入的值轉(zhuǎn)為數(shù)值 -
trim自動(dòng)過濾首位空白字符
組件
- 全局注冊(cè)組件
Vue.component('my-component', {}) - 局部注冊(cè)
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父組件模板中可用
'my-component': Child
}
})
- 組件的data必須是函數(shù)
- 在一些規(guī)定內(nèi)部標(biāo)簽的標(biāo)簽中使用
<tr is="my-component"><tr/>來使用組件 - 盡量使用字符串模板：
<my-component my-message="hello"></my-comonent> - 使用
props接收父元素傳入的數(shù)據(jù)钾军，傳入的數(shù)據(jù)可以是一個(gè)數(shù)組或者對(duì)象 - 父組件通過
v-bind綁定傳值鳄袍，子組件不應(yīng)該修改傳入的props
Prop驗(yàn)證
props: {
propA: Number, //基礎(chǔ)類型檢測
required: true,
type: Object,
default: 1,
validator: function(value){} //自定義驗(yàn)證
}
-
type的值可以是String,Number,Boolean,Function,Object,Array,Symbol,也可以用instanceof檢測 - 先進(jìn)行
props檢測，在進(jìn)行組件注冊(cè)
自定義事件
子組件給父組件傳值
- 父組件在使用子組件的時(shí)候綁定觸發(fā)函數(shù)吏恭，將這個(gè)觸發(fā)函數(shù)寫進(jìn)自己的方法中拗小，子組件也可以有自己的方法
- 父組件在調(diào)用子組件中寫
@[方法名]=[方法值],子元素觸發(fā)在觸發(fā)事件中寫this.emit([方法名], '傳遞的數(shù)據(jù)') -
.native給組件的跟元素加原生事件
非父子組件的通信
- A組件：
bus.$emit('id-selected', 1) - B組件：
bus.$on('id-selected', function (id) { // ... })
插槽分發(fā)內(nèi)容
-
單個(gè)插槽
如果父組件使用子組件，并在子組件中還加入了其他元素砸泛，那么應(yīng)該在子元素中加入
slot元素十籍，如果父組件沒有加入其他內(nèi)容，那么將渲染slot中的html片段唇礁，如果加入了其他內(nèi)容勾栗，則渲染其他內(nèi)容。 -
具名插槽
如果父組件添加了兩個(gè)
slot元素盏筐，父組件通過slot=[名]指定子組件渲染的位置围俘。子組件通過name=[名]來確認(rèn)渲染位置。 -
作用于插槽
文檔截圖
動(dòng)態(tài)組建
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
上述代碼可以從當(dāng)前代碼選擇一個(gè)子元素渲染琢融，也可以直接用在組件對(duì)象上面
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
如果在外層家一個(gè)keep-alive元素界牡，則在切換當(dāng)前的子元素后，前一個(gè)子元素不會(huì)被清楚漾抬，而是放在內(nèi)存中宿亡，可以保留他的狀態(tài)或避免重新渲染。
雜項(xiàng)
- 寫組件的時(shí)候想好以后要不要進(jìn)行復(fù)用
- 進(jìn)行使用
v-bind和v-on的簡寫:和@ - 給子組件加
ref屬性后可以使用父組件.ref屬性值來調(diào)用子組件纳令，當(dāng)ref和v-for一起使用時(shí)挽荠，獲取到的將是一個(gè)數(shù)組
