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:会处理标签元素
• {{     }}

控制模块隐藏：

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>