html+file+绑定事件,内容绑定,事件绑定

内容绑定,事件绑定

v-text:

v-html:

v-on:

1.v-text,{{}}都能设置标签的文本值

基础{{message}}

new Vue({

el: '#app',

data: {

message: "hello Vue!!!"

}

})

2.v-html:设置标签的innerHtml

new Vue({

el: '#app',

data: {

content: "vue入门"

}

})

3.v-on:事件监听

{{food}}

new Vue({

el: '#app',

data: {

food:"西蓝花炒蛋"

},

methods:{

doIt:function(){

alert("doIt");

},

changeFood:function(){

// console.log(this.food);

this.food += "好好吃!"

}

}

})

例子:计数器

{{num}}

new Vue({

el: '#app',

data: {

num: 0

},

methods:{

up:function(){

// console.log("up");

this.num++;

},

down:function(){

// console.log("down");

this.num--;

}

}

})