html部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue绑定事件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="zhb1"><!--写一个div-->
形容一下自己：<input type="text" v-on:input="changetype"/><!--在input中v-on：input一个函数-->
<h1>{{name}}{{type}}</h1><!--一个h1标签，里面的{{name}}{{type}}是要从js中拿到的数据-->
<h3>{{hanshu()}}</h3><!--在h3中调用一个函数-->
<h5>{{name+"123"+(1+3)}}</h5><!--在大括号里还可以写一些表达式，但不能写复杂的语句，如if，for等-->
<!--在html中可以直接访问name，在js中要通过this.得到name-->
<a href="http://www.baidu.com">正常访问：百度</a><!--这样可以正常访问百度-->
<!--<a href="{{link}}">百度</a>--><!--这个百度不能访问，因为在标签里不能访问vue定义的变量，它只会当成字符串处理-->
<a v-bind:href="link">通过指令v-bind可以指定属性，让后从js中得到值：百度</a><!--需要使用指令才能访问，v-bind:绑定一个href属性-->
<p v-html="a标签"></p><!--通过v-html="属性名"调用js定义的标签，不建议使用这种方法-->
</div>
<div class="ondianji"><!--写一个div,类名ondianji-->
<button v-on:click="jiayi(5)">点一下加5</button><!--定义一个点击事件，点击执行jiayi这个方法-->
<p>{{count}}</p><!--在p中显示数字-->
<p v-on:mousemove="updateXY"><!--用v-on定义一个鼠标移入事件，在js中定义一个updateXY函数-->
输出鼠标当前的x和y的值：{{x}}/{{y}}
<span v-on:mousemove="stopXY"><!--使用了一个函数，在js中写方法阻止冒泡事件的发生，不掉用父级的方法-->
<!--使用事件修饰符的方式，也是阻止冒泡事件的发生：v-on:mousemove.stop=""-->
我在p标签里，但我不想获取鼠标的坐标
</span>
<a href="http://www.baidu.com" v-on:click.prevent="">正常跳转到百度：这里用v-on:click.prevent=""事件修饰符阻止跳转的默认事件发生</a>
<!--也可以同时使用两个事件修饰符，用法：v-on:click.prevent.stop=""-->
</p>
<input type="text" v-on:keyup.space.enter="input"/>
<!--给输入框添加一个按下键盘事件，使用了事件修饰符.space表示空格时执行函数.enter表示回车时执行函数，也可以写成.13,13表示回车的内部的数字-->
</div>
<!--一个小练习
<div class="lianxi">
{{lianxiname}}{{lianxiage}}{{lianxiage*3}}
<img v-bind:src="tupian"/>
<input v-bind:value="lianxiname"/>
</div>-->
<script src="../js/vue-1.js" type="text/javascript"></script>
</body>
</html>
js部分
new Vue({//new 出来一个Vue
el:'.zhb1',//el：用来获取元素，class/id/元素
data:{//data：用来声明一个对象
name:"张红宾",//对象里面用键值对存储数据
type:"真帅",//对象里面用键值对存储数据
link:"http://www.baidu.com",//定义一个百度的url，用于让html通过指令调用
a标签:'<a href="http://www.baidu.com">这是在js里定义并添加到页面的元素，可以用v-html="属性名"调用</a>',//
},
methods:{//methods:用来声明函数
changetype:function(e){//声明一个函数changetype，并接受一个事件对象e
this.type=e.target.value;//vue会把data和methods都能用this调用，
//this就是指向当前事件所绑定的元素，而e.target指向事件执行时鼠标所点击区域的那个元素
},
hanshu:function(){//声明一个hanshu函数
return"是的"; //该函数返回一个“是的”
}
},
})
new Vue({//再new 出来一个Vue
el:'.ondianji',//el：用来获取元素，class/id/元素
data:{//data：用来声明一个对象
count:0,//对象里面用键值对存储数据
x:'0',
y:'0'
},
methods:{//methods:用来声明函数
jiayi:function(shuzhi){//声明一个jiayi方法
this.count+=shuzhi;//让count加加
},
updateXY:function(e){
this.x=e.clientX;//获取鼠标放在p标签上时距离左上角的x，y的坐标
this.y=e.clientY;
},
stopXY:function(e){
e.stopPropagation();//阻止冒泡事件的发生
},
input:function(){
alert('zhb');
}
},
})
/*一个小练习
new Vue({
el:'.lianxi',
data:{
lianxiname:'xiaohong',
lianxiage:22,
tupian:'../img/d3.jpg',
},
})*/