1. 程式人生 > >vue 基礎重要組件 模板指令 事件綁定

vue 基礎重要組件 模板指令 事件綁定

渲染 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 基礎重要組件 模板指令 事件綁定