##v-cloak v-text v-html v-bind v-on的使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 <style type="text/css"> 10 [v-cloak]{ 11 display: none; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="app"> 17 <!-- 使用v-cloak可以解决 插值表达式闪烁的问题 --> 18 <p v-cloak>{{ msg }}</p> 19 <h4 v-text="msg"></h4> 20 <!-- 默认v-text是没有闪烁问题的 --> 21 <!-- v-tsxt会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 --> 22 <div v-html="msg2"></div> 23 <!-- v-html也会覆盖元素中原本的内容,会把目标内容按html格式解析 --> 24 25 26 <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" /> --> 27 <!-- v-bind:是vue中提供的用于绑定属性的指令,就是告诉title要把mytitle当成变量处理,而不是普通字符串,缩写是 : --> 28 <!-- v-bind中可以写合法的JS表达式 --> 29 30 <input type="button" value="按钮" @click="show" /> 31 <!-- vue中提供了 v-on: 事件绑定机制 缩写是 @ --> 32 </div> 33 34 <script type="text/javascript"> 35 var vm = new Vue({ 36 el:'#app', 37 data:{ 38 msg:'123', 39 msg2:'<h1>hhhhh</h1>', 40 mytitle:'这是一个自己定义的title' 41 }, 42 methods:{ //这个methods属性中定义了当前vue实例所有可用的方法 43 show:function(){ 44 alert('hello') 45 } 46 } 47 }) 48 49 50 </script> 51 </body> 52 </html>
##跑马灯的简单实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <!-- 1.导入vue包 --> 9 <script src="lib/vue.js"></script> 10 </head> 11 <body> 12 <div id="app"> 13 <h4>{{ msg }}</h4> 14 <input type="button" value="浪起来" @click="lang"/> 15 <input type="button" value="别浪" @click="stop"/> 16 17 </div> 18 <!-- 2.创建一个要控制的区域 --> 19 <script type="text/javascript"> 20 //注意:在vm实例中如果想要获取data上的数据或者想调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问, 21 // 这里的this,就表示我们new出来的vm实例对象 22 var vm = new Vue({ 23 el:'#app', 24 data:{ 25 msg:'猥琐发育，别浪~~！', 26 intervalId:null //在 data上定义定时器Id 27 }, 28 methods:{ 29 lang(){ 30 if(this.intervalId != null)return; 31 //判定,避免每次点击都重新开启一个定时器 32 this.intervalId = setInterval( () => { //定时器 33 // => 箭头函数,让内部的this与外部的vm实例保持一致,避免访问不到vm实例中的数据 34 //获取到头的第一个字符 35 var start = this.msg.substring(0,1) 36 //获取到后面的所有字符 37 var end = this.msg.substring(1) 38 //重新拼接得到新的字符串,并赋值给this.msg 39 this.msg = end + start 40 },400) 41 42 43 //注意:vm实例会监听自己身上data中的数据改变,只要数据一发生改变,就会自动把最最新的数据从data上同步到页面中 44 // 程序员只需要关心数据,不用考虑怎样重新渲染dom 45 }, 46 stop(){ //停止计时器 47 clearInterval(this.intervalId) 48 this.intervalId = null; 49 //每当清除了定时器之后需要吧intervalId置为null,否则无法再次开启定时器 50 } 51 } 52 53 }) 54 55 // 分析: 56 // 1.给[浪起来]按钮绑定一个点击事件 57 // 2.按钮的时间处理函数中写相关的业务逻辑代码:拿到msg字符串,然后调用字符串的substring方法进行字符串的截取操作,吧第一个字符截取出来放到最后一个位置 58 // 3.为了实现点击一下按钮自动截取的功能,需要把步骤2中的代码放到一个定时器中 59 </script> 60 </body> 61 </html>
##事件修饰符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 <style type="text/css"> 10 .inner{ 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app"> 18 <!-- <div class="inner" @click="div1Handler"> 19 <input type="button" value="戳他" @click.stop="btnHandler"/> 20 使用 .stop 阻止冒泡(多层元素从里到外依次触发事件) 21 </div> --> 22 23 <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> 24 使用 .prevent 阻止默认行为 --> 25 26 <!-- <div class="inner" @click.capture="div1Handler"> 27 <input type="button" value="戳他" @click="btnHandler"/> 28 使用 .capture 实现捕获事件的触发机制 29 </div> --> 30 31 <!-- <div class="inner" @click.self="div1Handler"> 32 <input type="button" value="戳他" @click="btnHandler"/> 33 使用 .self 实现只有点击当前元素时才会触发事件处理函数,阻止自身的冒泡行为(不阻止其他元素的冒泡), 34 </div> --> 35 36 <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a> 37 使用 .once 实现只触发一次事件处理函数 38 --> 39 </div> 40 <script type="text/javascript"> 41 var vm = new Vue({ 42 el:'#app', 43 data:{ }, 44 methods:{ 45 // div1Handler(){ 46 // console.log('这是触发 inner div的点击事件') 47 // }, 48 // btnHandler(){ 49 // console.log('这是触发了 btn按钮的点击事件') 50 // } 51 linkClick(){ 52 console.log('触发了链接的点击事件') 53 } 54 } 55 }); 56 </script> 57 </body> 58 </html>
##v-model指令实现双向数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <p>{{ msg }}</p> 13 <!-- <input type="text" :value="msg" style=" 100%;"/> --> 14 <!-- v-bind只能实现单向数据绑定,从M自动到绑定到V,无法实现双向数据绑定 --> 15 16 <input type="text" v-model="msg" style=" 100%;"/> 17 <!-- 使用 v-model 指令可以实现双向数据绑定 18 注意:只能用于 表单元素(能与用户实现交互的元素)中 --> 19 </div> 20 <script type="text/javascript"> 21 var vm = new Vue({ 22 el:'#app', 23 data:{ 24 msg:'大家都是好boy' 25 }, 26 methods:{ 27 28 } 29 }) 30 </script> 31 </body> 32 </html>
##利用双向数据绑定做简易计算器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="n1" /> 13 14 <select v-model="opt"> 15 <option value ="+">+</option> 16 <option value ="-">-</option> 17 <option value ="*">*</option> 18 <option value ="/">/</option> 19 </select> 20 21 <input type="text" v-model="n2" /> 22 <input type="button" value="=" @click="calc"/> 23 <input type="text" v-model="result"/> 24 </div> 25 <script type="text/javascript"> 26 var vm = new Vue({ 27 el:'#app', 28 data:{ 29 n1:0, 30 n2:0, 31 result:0, 32 opt:'+' 33 }, 34 methods:{ 35 calc(){ 36 // switch(this.opt){ 37 // case '+': 38 // this.result = parseInt(this.n1) + parseInt(this.n2) 39 // break; 40 // case '-': 41 // this.result = parseInt(this.n1) - parseInt(this.n2) 42 // break; 43 // case '*': 44 // this.result = parseInt(this.n1) * parseInt(this.n2) 45 // break; 46 // case '/': 47 // this.result = parseInt(this.n1) / parseInt(this.n2) 48 // break; 49 // } 50 51 //注意,这还是投机取巧的方式,正式开发中尽量少用 52 var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)' 53 this.result = eval(codeStr) 54 } 55 } 56 }) 57 </script> 58 </body> 59 </html>