第一章 Vue之代码基本结构、插值表达式、事件修饰符
知识点: 1、vue基本代码结构 2、插值表达式 v-cloak v-text v-html v- bind(缩写为:) v-on(缩写为:@) v-model v-for v-if v-sow 3、事件修饰符 :.stop .prevent .capture .self .once
1、基本代码结构
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <!--将来new的Vue实例会控制这个元素中的所有内容--> <!--View层:Vue实例控制的这个元素区域--> <div id="app"> <!-- 插值表达式--> <h1>{{msg}}</h1> </div> <script> //2.创建一个vue实例 //注意,当我们导入包之后,再浏览器内存中就多了一个Vue构造函数 //我们new出来的这个vm对象,就是我们MVVM中的VM调度者 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 //这里的data就是MVVM中的M,专门用来保存页面所需的数据 data: { //data属性中存放的是el中要用到的数据 msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 //员不再手动操作Dom元素了 } }) </script> </body> </html>
2、插值表达式v-cloak,v-html,v-text,v-on,v-bind等使用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Vue不提倡我们操作Dom--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <!--使用v-cloak能够解决插值表达式闪烁的问题,只会替换自己的占位符,不会将整个元素内容替换 --> <!-- 插值表达式:{{变量}} --> <p v-cloak>{{msg}}</p> <!-- 默认v-text没有闪烁问题,但是会覆盖元素中原本的内容--> <h2 v-text="msg">111</h2> <!-- 默认v-text没有闪烁问题,且会解析html标签,但是会覆盖元素中原本的内容--> <p v-html="msg2"></p> <!--v-bind:是vue中提供的用于绑定属性的指令,且可以写js表达式--> <input type="button" value="按钮" v-bind:title="mytitle+ '1222'"> <input type="button" value="按钮" :title="mytitle+ '1222'"> <!--v-bind简写版--> <!-- Vue提供了v-on绑定事件:click ,mouseover --> <input type="button" value="按钮" :title="mytitle+ '1222'" v-on:click="show"> <input type="button" value="按钮" :title="mytitle+ '1222'" @click="show"> <!--v-on简写版--> </div> <script> new Vue({ el:'#app', data:{ msg:123, msg2:'<h1>我是一个H1</h1>', mytitle:'我是标题' }, methods:{//这个methods属性中定义了当前Vue实例所有可用的方法 //定义方法 show:function(){ alert("v-on使用") } } }) </script> </body> </html>
3、v-model双向数据绑定
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <!--插值表达式--> <h1>{{msg}}</h1> <!-- v-bind 只能实现数据的单项绑定,从M到V,无法实现数据的双向绑定 --> <input type="text" :value="msg"> <!-- v-model 实现数据的双向绑定,从M到V,也可从V到M --> <input type="text" v-model="msg"> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 } }) </script> </body> </html>
4、v-for循环指令
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <!--插值表达式--> <h1>{{msg}}</h1> <!-- 遍历普通数组--> <p v-for="(item,id) in list">值为:{{item}},索引为:{{id}}</p> <!-- 遍历字典,注意属性key的使用,且key必须为数字或者字符串--> <p v-for="user in listDic" :key="user.id">值为:{{user.id}},索引为:{{user.userName}}</p> <!-- 遍历对象,除了key,value,还有一个索引--> <p v-for="(value,key,i) in userObj">索引:{{i}},值:{{value}},键:{{key}}</p> <!-- 迭代数字--> <p v-for="count in 2">循环次数为:{{count}}</p> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 list:[2,3,4,5], listDic:[ {id:1,userName:"yang"}, {id:2,userName:"jie"}, ], userObj:{ id :1, name:'yangaaa', gender:'男' }, msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 } }) </script> </body> </html>
5、v-show/v-if指令
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <!--插值表达式--> <h1>{{msg}}</h1> <input type="button" value="taggle" @click="taggle"> <!-- v-if的特点,每次都会重新删除或者创建元素,耗性能--> <!-- v-show的特点,每次不会重新进行Dom元素的删除和创建,只会切换元素display:none 样式--> <h1 v-if="flag">v-if</h1> <h1 v-show="flag">v-show</h1> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 flag:true, msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 },methods:{ taggle(){ this.flag = !this.flag } } }) </script> </body> </html>
6、事件修饰符
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <style> .inner{ height: 150px; background-color: aqua; } </style> </head> <body> <div id="app"> <!-- @click.stop = "btnHandler" stop 阻止冒泡 @click.prevent="linkClick" prevent阻止默认行为 @click.capture="divHandler" capture 捕获机制 @click.self="divHandler" self 只有点击当前元素,才会触发 @click.prevent.once="divHandler" once只触发一次事件 --> <div class="inner" @click="divHandler"> <input type="button" value="点击" @click.stop="btnHandler"> </div> <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a> <div class="inner" @click.capture="divHandler"> <input type="button" value="点击" @click.stop="btnHandler"> </div> <div class="inner" @click.self="divHandler"> <input type="button" value="点击" @click.stop="btnHandler"> </div> <div class="inner" @click.prevent.once="divHandler"> <input type="button" value="点击" @click.stop="btnHandler"> </div> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 }, methods:{ divHandler(){ console.log("div 触发的事件") }, btnHandler(){ console.log("button 点击事件") }, linkClick(){ console.log("百度一下") } } }) </script> </body> </html>
7、跑马灯程序
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="浪起来" @click="start"> <input type="button" value="低调" @click="stop"> <h4>{{msg}}</h4> </div> <script> //注意:在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过 //this.属性名 或this.方法名来进行访问 ,这里的this,就表示我们new除开的vm实例对象 new Vue({ el:'#app', data:{ msg:'猥琐发育,别浪~~!', intervalId:null //定义定时器id }, methods:{ //1、绑定点击事件 v-on //2、字符串截取 //3、定时器 start(){ console.log(this.msg) //记录并开启定时器 if(this.intervalId != null) return this.intervalId = setInterval( () => { //获取头字符 var s = this.msg.substring(0,1) //获取除头外所有字符 var e = this.msg.substring(1) this.msg = e + s },400) //注意:vm实例会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把最新 //的数据,从data上同步到页面中去 }, stop(){ //清除定时器 clearInterval(this.intervalId) this.intervalId = null; } } }) </script> </body> </html>
8、计算器程序
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" @click="cal"> <input type="text" v-model="result"> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 n1:0, n2:0, result:0, opt:'+', msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 }, methods:{ cal(){ //推荐这种写法 switch (this.opt) { case "+": this.result = parseInt(this.n1) + parseInt(this.n2) break; case "-": this.result = parseInt(this.n1) - parseInt(this.n2) break; case "*": this.result = parseInt(this.n1) * parseInt(this.n2) break; case "/": this.result = parseInt(this.n1) / parseInt(this.n2) break; } //偷懒写法,不建议 // var codeStr = ' parseInt(this.n1) ' + this.opt +' parseInt(this.n2)' // this.result = eval(codeStr) } } }) </script> </body> </html>
本文来自博客园,作者:小白啊小白,Fighting,转载请注明原文链接:https://www.cnblogs.com/ywjfx/p/12538663.html