vue實例上常見屬性和方法
- vm.$el 指代的是當前的元素
- vm.$nextTick 延遲執行 dom操作必備
- vm.$watch 監控數據變化
- vm.$data 當前數據對象
- vm.$options 所有的選項
- vm.$set
- vm.$mount 掛載 單元測試 在內存中掛載vue實例 此時只能用$mount屬性
vue中的指令
template
vue自帶的標籤，能實現循環且渲染時不帶標籤名，可以理解爲透明容器，template上不能增加key屬性，需要給真實的元素添加key。
<template v-for="(item,key) in fruits">
<li :key="key">{{item}}</li>
</template>
v-if v-else
<div v-if="false">
<span>1</span>
<input type="text" key="1">
</div>
<div v-else>
<span>2</span>
<input type="text" key="2">
</div>
<!--或者-->
<template v-if="false">
<span>1</span>
<input type="text" key="1">
</template>
<template v-else>
<span>2</span>
<input type="text" key="2">
</template>
v-show
<!--需要注意：v-show不能用在template標籤上-->
<div v-show="false">
<span>1</span>
</div>
<div v-show="true">
<span>2</span>
</div>
注意：v-if / else和v-show的區別：
v-if(else)處理是否添加dom節點到頁面上，v-show則是在操作style,顯示和隱藏，
另外v-show不能用在template標籤上，即 <template v-show="false">不生效</template>
v-html
可以解析字符串裏的標籤，需要注意的是，搭配表單雙向綁定時，不要直接把輸入的內容顯示出來，防止xss攻擊。
XSS（Cross Site Scripting）攻擊全稱跨站腳本攻擊，是爲不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫爲XSS，XSS是一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。比如這些代碼包括HTML代碼和客戶端腳本。（摘自百度百科）
v-model
<input type="text" :value="value" @input="input">
<!--語法糖 實現雙向綁定-->
<input type="text" v-model="value">
checkbox
- 多個checkbox時，需要給每一個設置value
<!--一個複選框-->
<input type="checkbox" v-model="checks">{{checks}}
<!--多個複選框-->
<input type="checkbox" v-model="checks" value="1">
<input type="checkbox" v-model="checks" value="2">
<input type="checkbox" v-model="checks" value="3">{{checks}}
radio
實現radio的分組，也可以通過v-model
<input type="radio" v-model="gender" value="male">男
<input type="radio" v-model="gender" value="female">女
select
<select v-model="select">
<option value="0" disabled>請選擇</option>
<option v-for="o in options" :value="o.id" :key="o.id">{{o.title}}</option>
</select>
filter
- 需要對展現的數據進行包裝，但是不能改變原來的數據
- 過濾器和指令都是沒有this指向的
- filter定義的方法也可以綁在單獨的實例裏，但是一般都是直接綁在Vue上
<div id="app">
{{a | toUpper(3)}}
</div>
data(){
return {
a:'12345'
}
},
Vue.filter('toUpper',function(value,count=1){
return value.slice(0,count).toUpperCase()+value.slice(count)
})
自定義指令
一個指令定義對象可以提供如下幾個鉤子函數
-
bind：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。 -
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 -
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
<div v-color="'red'">顏色</div>
<!-- el 元素-->
<!-- bingdings 綁定的屬性-->
<!-- vnode 虛擬節點-->
<!-- oldVnode 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用-->
Vue.directive('color',function(el,bingdings,vnode){
el.style.border = `1px solid $(bingdings.value)`
})
常見場景（原理:事件代理）
let vm = new Vue({
el:'#app',
directives:{
'click-outside'(el,bingdings,vnode,oldVnode){
//綁定給document 捕獲到事件發生在誰身上
document.addEventListener('click',(e)=>{
if(!el.contains(e.target)){
vnode.context[bingdings.expression]()
}
})
}
}
})