vue 基礎重要組件 模板指令 事件綁定
阿新 • • 發佈：2017-10-02
渲染 strong -h v-on ext ons color show 保存
組件：data methods watch
new vue({
data:{
a:1,
b:[]
},
methods:{
dosomething:function(){
this.a++;
}
},
watch:{
a:function(val,oldval){
console.log(val,oldval);
}
}
})
模板指令：html和vue對象的粘合劑
數據渲染：
- v-text:格式化處理html
- v-html:保存html
- {{ }}
控制模塊隱藏：
new vue({
data:{
isShow:true
}
})
- v-if:不渲染 <p v-if=‘isShow‘></p>
- v-show 渲染，通過display=none方式隱藏 <p v-show=‘isShow‘></p>
渲染循環列表：
new vue({
data:{
itme:[{label:‘apple‘},{label:‘banana‘}]
}
})
<ul>
<li v-for=‘item in items‘>
<p v-text=‘item.label‘></p>
</li>
</ul>
事件綁定：
v-on
<button v-on:click="dothis"></button>
或者<button @click="dothis"></button>
methods:{dothis:functon(){}}
v-bind:屬性和類的綁定
因為比較常用，所以可以省略“v-bind"，直接寫”:src“
<img v-bind:src="imgSrc"/>
<div :class=‘{red:isRed}‘></div>
vue 基礎重要組件 模板指令 事件綁定