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

标签：on()   dos   基础   指令   func   app   nan   模板   重要   

组件：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 基础重要组件 模板指令 事件绑定

标签：on()   dos   基础   指令   func   app   nan   模板   重要   

原文地址：http://www.cnblogs.com/yangjiajie/p/7620520.html