vue中的v-bind与v-on的使用
（1）实例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>v-bindv-on</title>
<scriptsrc="../lib/vue.js"></script>
</head>
<body>
<divclass="app">
<inputtype="button"v-bind:title="myTitle"value="按钮1"v-on:click="show">
<!--v-bind用来绑定属性--><!--v-on用来绑定点击事件-->
<inputtype="button":title="myTitle"value="按钮2"v-on:mouseover="show">
<!--v-bind:title可以简写为:title--><!--v-on用来绑定鼠标移动事件-->
<inputtype="button"v-bind:title="myTitle+'后来增加的内容'"value="按钮3"v-on:mouseout="show">
<!--v-bind中引号内容可看做一个js中的表达式，因此可进行连接字符串的操作，写合法的js表达式-->
</div>
<script>
varvm=newVue({
el:'.app',
data:{
myTitle:'我是一个title'
},
methods:{
show:function(){
alert('你好呀！')
}//定义了一个方法show，通过v-on绑定到事件中，实现效果
}
})
</script>
</body>
</html>
（2）摘要
v-bind用来绑定属性（v-bind:title="myTitle"），v-on用来绑定事件（v-on:click="show"）。
v-bind：绑定的属性名称可简写为：绑定的属性名称。
v-on:绑定的事件名称可简写为@绑定的事件名称。
v-bind中引号内容可看做一个js中的表达式，因此可进行连接字符串的操作，可以写其他合法的js表达式。
在vm中的methods对象中定义方法--show:function(){alert('你好呀！')}。通过v-on绑定到事件中，实现效果。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56721.shtml
