vue中的v-bind与v-on的使用
(1)实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-bind v-on</title> <script src="../lib/vue.js"></script> </head> <body> <div class="app"> <input type="button" v-bind:title="myTitle" value="按钮1" v-on:click="show"> <!-- v-bind用来绑定属性 --><!-- v-on用来绑定点击事件 --> <input type="button" :title="myTitle" value="按钮2" v-on:mouseover="show"> <!-- v-bind:title可以简写为:title --><!-- v-on用来绑定鼠标移动事件 --> <input type="button" v-bind:title="myTitle + '后来增加的内容'" value="按钮3" v-on:mouseout="show"> <!-- v-bind中引号内容可看做一个js中的表达式,因此可进行连接字符串的操作,写合法的js表达式--> </div> <script> var vm = new Vue({ 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绑定到事件中,实现效果。