一：vue实例
1.实例
新建项目：
2.程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <!-- 第一个vue示例 --> 12 <div id="app"> 13 <p>{{msg}}</p> 14 </div> 15 <script> 16 // 创建vue实例 17 var vm = new Vue({ 18 el: ‘#app‘, 19 data: { 20 msg: ‘hello vue!‘ 21 } 22 }); 23 </script> 24 </body> 25 </html>
效果：
二：知识点
1.v-cloak解决插值闪烁问题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 [v-cloak] { 10 display: none; 11 } 12 </style> 13 14 </head> 15 <body> 16 <!-- 解决插值表达式闪烁问题 --> 17 <div id="app"> 18 <p v-cloak>{{msg}}</p> 19 </div> 20 21 <script src="./lib/vue-2.4.0.js"></script> 22 <script> 23 var vm = new Vue({ 24 el: ‘#app‘, 25 data: { 26 msg: ‘hello vue!‘ 27 } 28 }); 29 </script> 30 </body> 31 </html>
2.v-text与插值表达式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <p v-text="msg"></p> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: ‘#app‘, 23 data: { 24 msg: ‘hello vue!‘ 25 } 26 }); 27 </script> 28 </body> 29 </html>
效果：
区别：
v-text默认没有闪烁问题的
插值表达式可以在前后放其他的内容
v-text会覆盖元素中原本的内容，插值表达式只会替换自己的占位符，不会把整个元素的内容进行清空
3.v-html渲染html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <p v-html="msg2"></p> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: ‘#app‘, 23 data: { 24 msg: ‘hello vue!‘, 25 msg2:‘<h1>这是一个H标签</h1>‘ 26 } 27 }); 28 </script> 29 </body> 30 </html>
效果：
4.v-bind：绑定属性指令
其中，在v-bind后的mytitle被认为是一个变量，然后可以进行表达式运算
可以被简写为:title="mytitle"。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <input type="button" value="按钮" v-bind:title="mytitle"> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: ‘#app‘, 23 data: { 24 msg: ‘hello vue!‘, 25 mytitle:‘自定义属性‘ 26 } 27 }); 28 </script> 29 </body> 30 </html>
效果：
5.v-on：事件机制
可以简写@click="show”
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <input type="button" value="按钮" v-on:click="show"> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: ‘#app‘, 23 data: { 24 msg: ‘hello vue!‘ 25 }, 26 methods:{ 27 show:function(){ 28 alert("hello on"); 29 } 30 } 31 }); 32 </script> 33 </body> 34 </html>
三：案例
1.跑马灯
method中的方法调用data中的数据需要使用this
使用=>，使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="button" value="浪起来" @click="lang"> 13 <input type="button" value="低调" @click="stop"> 14 <h4>{{msg}}</h4> 15 </div> 16 <script> 17 var vm=new Vue({ 18 el:‘#app‘, 19 data:{ 20 msg:‘继续方玉，不要浪 ‘, 21 timeId:null 22 }, 23 methods:{ 24 lang(){ 25 if(this.timeId!=null) return; 26 this.timeId=setInterval(() => { 27 var start=this.msg.substring(0,1); 28 var end=this.msg.substring(1); 29 this.msg=end+start 30 },1000) 31 }, 32 stop(){ 33 clearInterval(this.timeId); 34 this.timeId=null; //需要重新置为null 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
效果：
四：事件修饰符
1.事件修饰符的介绍
stop：阻止冒泡
prevent：阻止默认事件
capture：添加事件监听器时使用事件捕获模式
self：只当事件在该元素本身触发时触发回调
once：事件只触发一次
2.stop
基础程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 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="divhandle"> 19 <input type="button" value="浪起来" @click="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:‘#app‘, 26 data:{ 27 msg:‘继续方玉，不要浪 ‘ 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
效果：
· 阻止冒泡程序：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 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="divhandle"> 19 <input type="button" value="浪起来" @click.stop="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:‘#app‘, 26 data:{ 27 msg:‘继续方玉，不要浪 ‘ 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
3.prevent
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <a href="http://www.baidu.com" @click.prevent="linkclick">百度</a> 19 </div> 20 <script> 21 var vm=new Vue({ 22 el:‘#app‘, 23 data:{ 24 msg:‘继续方玉，不要浪 ‘ 25 }, 26 methods:{ 27 linkclick(){ 28 console.log("百度"); 29 } 30 } 31 }) 32 </script> 33 </body> 34 </html>
4.capture
从外到里进行捕获
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 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.capture="divhandle"> 19 <input type="button" value="浪起来" @click.stop="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:‘#app‘, 26 data:{ 27 msg:‘继续方玉，不要浪 ‘ 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
5.self
只有自己触发才会触发，类似于冒泡或者捕获这种被动的触发就不会被触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 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.self="divhandle"> 19 <input type="button" value="浪起来" @click="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:‘#app‘, 26 data:{ 27 msg:‘继续方玉，不要浪 ‘ 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
6.once
只触发一次，以后不再起作用，而且可以串联
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <a href="http://www.baidu.com" @click.prevent.once="linkclick">百度</a> 19 </div> 20 <script> 21 var vm=new Vue({ 22 el:‘#app‘, 23 data:{ 24 msg:‘继续方玉，不要浪 ‘ 25 }, 26 methods:{ 27 linkclick(){ 28 console.log("百度"); 29 } 30 } 31 }) 32 </script> 33 </body> 34 </html>
五：v-model
1.v-model数据双向绑定
如果在input中输入文本，则vm.msg可以查看新输入的文本；同样，在控制台上vm.msg=‘6667777‘进行赋值，则input框中的数据也会进行改变
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="msg"> 13 </div> 14 15 <script> 16 var vm=new Vue({ 17 el:‘#app‘, 18 data:{ 19 msg:‘学习代码‘ 20 }, 21 methods:{ 22 23 } 24 }) 25 </script> 26 </body> 27 </html>
2.简易计算器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="n1"> 13 <select name="" id="" v-model="opt"> 14 <option value="+">+</option> 15 <option value="-">-</option> 16 <option value="*">*</option> 17 <option value="/">/</option> 18 </select> 19 <input type="text" v-model="n2"> 20 <input type="button" value="=" @click="calc"> 21 <input type="text" v-model="result"> 22 </div> 23 <script> 24 var vm=new Vue({ 25 el: ‘#app‘, 26 data: { 27 n1: 0, 28 n2: 0, 29 result: 0, 30 opt: ‘+‘ 31 }, 32 methods:{ 33 calc(){ 34 switch(this.opt){ 35 case ‘+‘: 36 this.result=parseInt(this.n1)+parseInt(this.n2); 37 break; 38 case ‘-‘: 39 this.result=parseInt(this.n1)-parseInt(this.n2); 40 break; 41 case ‘*‘: 42 this.result=parseInt(this.n1)*parseInt(this.n2); 43 break; 44 case ‘/‘: 45 this.result=parseInt(this.n1)/parseInt(this.n2); 46 break; 47 } 48 } 49 } 50 }); 51 </script> 52 </body> 53 </html>
六：在vue中使用样式
1.
原文：https://www.cnblogs.com/juncaoit/p/11367668.html