<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
{{message}}
<button v-on:click="changeMessage">点击改变</button> // 给按钮添加点击事件 运行changeMessage 函数
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box', //获取id为box的元素
data:{
message:"Hello Vue!"
},
methods:{
changeMessage:function(){
this.message="hello hahaha"
}
}
})
</script>
</html>
//二次视频学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on实例</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <p>本场比赛得分：{{mark}}</p> <input type="button" value="加分" v-on:click="addMark"> <!---v-on绑定事件-> <input type="button" value="减分" @click="removeMark"> <!--@click 这是一种简写的形式--> <input type="text" name="" v-model="mark2" v-on:keyup.enter="onenter"><!--.enter 绑定enter键。 也可写成 。13 写成对应的键盘码--> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ mark:0, mark2:2, }, methods:{ // 方法属性 名字不可改 addMark:function(){ // addMark 名可以写成任何的 this.mark++; // this 指的是 id为 app的 这个实例化对象 }, removeMark:function(){ this.mark-- }, onenter:function(){ //this.mark=this.mark+parseInt(this.mark2); // 直接获取mark 值 this.mark=this.$data.mark+parseInt(this.mark2); // 层级获取 属性 } } }) </script> </html>