技術標籤：vue清除繫結的class

點選上方 藍字 關注我們

vue生命週期

1. beforeCreat
2. created
3. beforeMount
4. mounted
5. beforeDestroy
6. destroyed
7. beforeUpdate
8. updated

模板語法

• v-html
• v-text

計算屬性 方法 偵聽器

varvm=newVue({
el:"#app",
data:{
firstName:'zhao',
lastName:'gary',
fullName:'garyzhao',
age:28
},
watch:{
firstName:function(){''+
console.log('計算了一次')
 
this.fullName=this.firstName+''+this.lastName
},
lastName:function(){
console.log('計算了一次')
this.fullName=this.firstName+''+this.lastName
}
},
methods:{
//計算屬性
fullName:function(){
console.log('計算了一次')
returnthis.firstName+""+this.lastName
}
},
//、、計算屬性有快取
computed:{
fullName:function(){
console.log('計算了一次')
returnthis.firstName+""+this.lastName
 
}
}
})

computed get set 屬性

computed:{
fullName:{
get:function(){
returnthis.firstName+this.lastName
},
set:function(value){
vararr=value.split("")
console.log(arr)

}
}
}

vue 繫結樣式

：class ="{}"物件
：class ="[]"陣列變數可以有多個變數
：style 物件
：style ="[{},{}]"陣列

條件渲染

v-showdisplay:none
v-if不渲染
 

v-if
v-else-if
v-else

條件渲染時，當條件不同時VUE會嘗試複用相同的DOM，若希望不被複用，就需要對每個情況的DOM元素取個key名「input 加key值 可以清除input快取」

列表渲染

1. 陣列直接改變不起作用，需要用下面的方法

pop
push
shift
unshift
splice
sort
reverse

2. 通過改變資料的引用地址，來改變資料

佔位符

物件迴圈

動態加屬性不行，通過下面方法來改屬性

Vue.set()
vm.$set()

事件繫結

@click.prevent阻止預設行為
@click.selfself要求click事件只有在e.tartget=e.currentTaget
@click.once只執行一次
@click.capture事件捕獲，遵循從外部到內部(事件冒泡是從內部到外部
@keydowm.ctrl鍵盤修飾符
@click.right/left/middle滑鼠修飾符

表單繫結

v-model
v-model.lazy輸入框失去焦點時載入，提高效能
v-model.number輸入框中的數字轉化成數字型別
v-model.trim去除輸入框內容的首尾空格

點個在看你最好看