v-on
点击事件，要写在methods里面
事件处理方法
- 完整格式：v-on:事件名=“函数名” 或 v-on:事件名="函数名(参数...)"
- 缩写格式：@事件名="函数名" 或 @事件名="函数名(参数)" 注意@后面没有：
- event：函数中的默认形参，代表原生DOM事件，当调用的函数有多个参数传入时，需要使用原生DOM事件，则通过$event作为实参传入，用于监听DOM事件
<!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>Document</title> </head> <body> <div id="app"> <h3>1. 事件处理方法 v-on 或 @</h3> <button v-on:click="say">Say {{msg}}</button> <!-- $event代表的是原生 的Dom事件 --> <button @click="warn('hello', $event)">Warn</button> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'Hello World!!', num: 0 }, methods: { //定义事件处理函数 say: function (event) { // event代表的是Dom原生事件， Vue.js它会自动 的将它传入进来， alert(this.msg) alert(event.target.innerHTML) }, warn: function (name, event) { //如果说函数有多个参数，而双需要使用原生事件，则需要使用 $event 作为 参数传入 alert(name + ',' + event.target.tagName) } } }) </script> </body> </html>
事件修饰符
- .stop阻止单击事件继续传播
- .prevent阻止事件默认行为
- .once点击事件只会触发一次
<!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>Document</title> </head> <body> <div id="app"> <h3>2. 事件修饰符</h3> <!-- 2.1 防止单击事件继续传播 --> <div @click="todo"> <!-- 点击doThis之后还会触发todo事件 --> <button @click="doThis">单击事件会继续传播</button> </div> <br> <div @click="todo"> <!-- .stop作用：是阻止事件的传播，点击doThis之后不会触发todo事件 --> <button @click.stop="doThis">阻止单击事件会继续传播</button> </div> <br> <!-- 2.2 阻止事件的默认行为，不加prevent会跳转到百度 --> <a href="http://www.baidu.com" @click.prevent="doStop">百度</a> <!-- 2.3 点击事件只会触发一次 --> <button @click.once="doOnly">点击事件只会触发一次：{{num}}</button> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 0 }, methods: { //定义事件处理函数 doThis: function () { alert('doThis....') }, todo: function () { alert('todo....') }, doStop: function () { alert('doStop...href默认行为已经被阻止') }, doOnly: function () { this.num ++ } }, }) </script> </body> </html>
按键修饰符
- 格式： v-on:keyup.按键名 或 @keyup.按键名
- 常用按键名
- .enter .tab .delete .esc .space .up .down
<!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>Document</title> </head> <body> <div id="app"> <h3>按键修饰符或按键码</h3> <!-- 回车键可以用做提交表单数据，比如搜索框 --> <input type="text" @keyup.enter="keyEnter"> <input type="text" @keyup.space="keySpace"> <input type="text" @keyup.13="keyCode"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', methods: { //定义事件处理函数 keyEnter: function () { alert('当前按的是回车键') }, keySpace: function() { alert('当前按的是空格键') }, keyCode: function () { alert('按的是13') } }, }) </script> </body> </html>
例子二
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <script src="../static/vue.min.js"></script> <style> .active{ color: red; } </style> </head> <body> <div id="app"> <h1 :class="{active: isActive}">钢铁侠</h1> <!-- 添加class属性为active --> <button v-on:click="ChangeColor">点我让钢铁侠变红</button> </div> <script> new Vue({ el:"#app", data:{ isActive: false }, methods:{ ChangeColor:function () { this.isActive = !this.isActive; // 取反 }, } } ) </script> </body> </html>
v-bind
通过class列表和style指定样式是数据绑定的一个常见需求，他们都是元素的属性，都用v-bind处理，其中表达式结果的类型可以是：字符串，对象或数组
语法格式
- v-bind:class="表达式" 或 :class="表达式"
class的表达式可以为：
- 字符串 :class="activeClass"
- 对象 :class="{active:isActive,error:hasError}"
- 数组 :class="['active','error']" 注意要加上单引号，不然获取的是data中的值
style的表达式一般为对象
- :style="{color:activeColor,fontSize+'px'}"
- 注意：对象中的value值activeColor和fontSize是data中的属性
例子一：
<!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>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <style> .active{ color:green; } .delete{ background: red; } .error{ font-size: 35px; } </style> </head> <body> <div id="app"> <h3>Class绑定，v-bind:class 或者 :class</h3> <!-- <p class="active">字符串表达式</p> --> <p v-bind:class="activeClass">字符串表达式</p> <!-- key值是样式名，value是data中绑定的属性 --> <!-- 当isDelete为true的时候，delete就会进行渲染 --> <p :class={delete:isDelete,error:hasError}> 对象表达式</p> <p :class="['active','error']">数组表达式</p> <h3>Style绑定，v-bind:style 或 :style</h3> <p :style="{color: activeColor, fontSize: fontSize + 'px'}">Style绑定</p> </div> <script> new Vue({ el: "#app", data: { activeClass: 'active', isDelete: false, hasError: true, activeColor: 'red', fontSize: 100 } }) </script> </body> </html>
例子二：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <!-- 引用vue--> <script src="../static/vue.min.js"></script> <style> .box { width: 200px; height: 200px; background-color: red; } .active{ background-color: green; } </style> </head> <body> <div id="app"> <button v-on:click = 'handlerChange'>切换颜色</button> <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class--> <img v-bind:src="imgSrc" v-bind:alt="msg"> <div class="box" v-bind:class = '{active:isActive}'></div> </div> <script> new Vue({ el: '#app', data() { return { imgSrc:'./1.jpg', msg:'美女', isActive:true } }, methods:{ handlerChange(){ this.isActive = !this.isActive; }, } }) </script> </body> </html>
<div class="box" v-bind:class = '{active:isActive}'></div>
div原来有一个class属性，值只有一个box，通过v-bind绑定了一个属性active，isActive为true时把active添加到class里，为false时不添加
<button v-on:click = 'handlerChange'>切换颜色</button>
绑定了一个v-on的click事件，当第一次点击按钮时，去methods里找handlerChange，因为刚开始isActive为true（data里），点击后取反为false，
这时data里的也为false，所以没有active属性
v-on和v-bind的简写
v-bind可以简写为 ： v-on可以简写为@
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <!-- 引用vue--> <script src="../static/vue.min.js"></script> <style> .box { width: 200px; height: 200px; background-color: red; } .active{ background-color: green; } </style> </head> <body> <div id="app"> <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button> <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class--> <img :src="imgSrc" :alt="msg"> <div class="box" :class = '{active:isActive}'></div> </div> <script> // v-bind和v-on的简便写法 : @ new Vue({ el: '#app', data() { return { imgSrc:'./1.jpg', msg:'美女', isActive:true } }, methods:{ handlerChange(){ this.isActive = false; }, handlerLeave(){ this.isActive = true; } } }) </script> </body> </html>
