vue 基础重要组件 模板指令 事件绑定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 基础重要组件 模板指令 事件绑定相关的知识，希望对你有一定的参考价值。
组件：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 基础重要组件 模板指令 事件绑定的主要内容，如果未能解决你的问题，请参考以下文章