vue 基础重要组件 模板指令 事件绑定

时间:2022-11-21 20:31:19

组件: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>