Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Document</title> 5 <!-- 1.导入Vue 包 --> 6 <script type="text/javascript" src="./static/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <p>{{ msg }}</p> 12 </div> 13 14 15 <script type="text/javascript"> 16 17 18 19 //2.穿件一个vue的实例 20 var vm=new Vue({ 21 el:'#app' , //选择器，选择要控制的区域 22 data:{ 23 //data 属性中，存放的是el 中要用到的数据 24 msg:'wellcom shuishan!!' 25 } 26 }) 27 </script> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02.v-choak的学习</title> 6 <style> 7 [v-cloak]{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="app"> 14 <!-- 使用 v-cloak 可以解决 插值表达式闪烁的问题--> 15 <p v-cloak>{{msg}}</p> 16 17 <h4 v-text="msg"></h4> 18 19 <div> 20 <h3>区别 v-text 和 v-cloak</h3> 21 <ul> 22 <li>1、默认v-text是没有闪烁问题的。</li> 23 <li>2、v-text会覆盖元素中原本的内容，但是插值表达式只会替换里面的占位符，不会把整个元素内容替换</li> 24 </ul> 25 </div> 26 <hr> 27 <div>{{msg2}}</div> 28 <div v-html="msg2"></div> 29 30 31 </div> 32 <script type="text/javascript" src="./static/vue.js"></script> 33 <script type="text/javascript"> 34 var vm=new Vue({ 35 el:"#app", 36 data:{ 37 msg:"123", 38 msg2:"<h1>这是第二条演示数据。</h1>" 39 } 40 }) 41 </script> 42 </body> 43 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02.v-choak的学习</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <!-- 使用 v-cloak 可以解决 插值表达式闪烁的问题--> <p v-cloak>{{msg}}</p> <h4 v-text="msg"></h4> <div> <h3>区别 v-text 和 v-cloak</h3> <ul> <li>1、默认v-text是没有闪烁问题的。</li> <li>2、v-text会覆盖元素中原本的内容，但是插值表达式只会替换里面的占位符，不会把整个元素内容替换</li> </ul> </div> <hr> <p>v-html 可以用来渲染HTML标签</p> <div>{{msg2}}</div> <div v-html="msg2">11111111111</div> <hr> <p>v-bind 提供用于绑定属性的指令</p> <input type="button" value="按钮" title="提示：123"> <input type="button" value="按钮" v-bind:title="mytitle"> <input type="button" value="按钮" v-bind:title="mytitle+'后缀添加一些内容'"> <input type="button" value="按钮" :title="mytitle+'简写 可以只保留冒号'" id="btn" v-on:click="show"> </div> <script type="text/javascript" src="./static/vue.js"></script> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ msg:"123", msg2:"<h1>这是第二条演示数据。</h1>", mytitle:"这是一个自己定义的title。" }, methods:{ show:function () { alert("ok") } } }) // document.getElementById('btn').onclick=function () { // alert("ok") // } </script> </body> </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02.v-choak的学习</title> 6 <style> 7 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="button" value="浪起来" @click="lang"> 13 <input type="button" value="低调， 别浪！" v-on:click="stop"> 14 <h4>{{ msg }}</h4> 15 </div> 16 <script type="text/javascript" src="./static/vue.js"></script> 17 <script type="text/javascript"> 18 var vm=new Vue({ 19 el:"#app", 20 data:{ 21 msg:"猥琐发育，别浪！", 22 intervalId:null, 23 }, 24 methods:{ 25 lang(){ 26 //关于this指向问题 一、 27 // var _this=this; 28 // // console.log(this.msg); 29 // setInterval(function () { 30 // var start=_this.msg.substring(0,1); 31 // var end=_this.msg.substring(1); 32 // _this.msg=end+start; 33 // },400) 34 //关于this指向问题 二、 35 if(this.intervalId !=null) return; 36 this.intervalId=setInterval(() => { 37 var start=this.msg.substring(0,1); 38 var end=this.msg.substring(1); 39 this.msg=end+start; 40 },400) 41 }, 42 stop(){ 43 clearInterval(this.intervalId); 44 this.intervalId=null; 45 } 46 47 } 48 49 }) 50 51 52 </script> 53 </body> 54 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- 1.导入Vue 包 --> 7 <script type="text/javascript" src="./static/vue.js"></script> 8 <style> 9 .inner{ 10 height: 150px; 11 background-color: darkgoldenrod; 12 } 13 </style> 14 </head> 15 <body> 16 17 <div id="app"> 18 19 <!--<div class="inner" v-on:click="divHandler">--> 20 <!--<input type="button" value="干他" v-on:click.stop="btnHandler">--> 21 <!--</div>--> 22 23 <div class="inner" v-on:click="divHandler"> 24 <input type="button" value="干他" v-on:click.stop="btnHandler"> 25 </div> 26 <a href="https://www.baidu.com" v-on:click.prevent="sayHello">链接到百度</a> 27 <hr> 28 <div class="inner" v-on:click.capture="divHandler"> 29 <input type="button" value="干他" v-on:click="btnHandler"> 30 </div> 31 <hr> 32 33 <div class="inner" v-on:click="divHandler"> 34 <input type="button" value="干他" v-on:click="btnHandler"> 35 </div> 36 <hr> 37 使用.self 38 <div class="inner" v-on:click.self="divHandler"> 39 <input type="button" value="干他" v-on:click="btnHandler"> 40 </div> 41 <hr> 42 <a href="https://www.baidu.com" v-on:click.prevent.once="sayHello">链接到百度</a> 43 </div> 44 45 46 <script type="text/javascript"> 47 48 var vm=new Vue({ 49 el:'#app' , //选择器，选择要控制的区域 50 data:{ 51 }, 52 methods:{ 53 divHandler(){ 54 console.log("div 被干了") 55 }, 56 btnHandler(){ 57 console.log("btn 被干了") 58 }, 59 sayHello(){ 60 console.log("你好呀，兄嘚") 61 } 62 63 } 64 }) 65 </script> 66 </body> 67 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- 1.导入Vue 包 --> 7 <script type="text/javascript" src="./static/vue.js"></script> 8 </head> 9 <body> 10 11 <div id="app"> 12 v-bind 实现数据的单向绑定 13 v-model 实现数据的双向数据绑定 同时，只能用在表单元素中 14 <p>{{ msg }}</p> 15 <input type="text" v-model="msg" style=" 100%"> 16 </div> 17 18 19 <script type="text/javascript"> 20 21 22 23 //2.穿件一个vue的实例 24 var vm=new Vue({ 25 el:'#app' , //选择器，选择要控制的区域 26 data:{ 27 //data 属性中，存放的是el 中要用到的数据 28 msg:'wellcom shuishan!!' 29 } 30 }) 31 </script> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- 1.导入Vue 包 --> 7 <script type="text/javascript" src="./static/vue.js"></script> 8 </head> 9 <body> 10 11 <div id="app"> 12 <input type="text" v-model="n1"> 13 <select 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="=" v-on:click="plus"> 21 <input type="text" v-model="result"> 22 </div> 23 24 25 <script type="text/javascript"> 26 27 28 29 //2.穿件一个vue的实例 30 var vm=new Vue({ 31 el:'#app' , //选择器，选择要控制的区域 32 data:{ 33 //data 属性中，存放的是el 中要用到的数据 34 n1:0, 35 n2:0, 36 result:0, 37 opt:"+" 38 }, 39 methods:{ 40 plus(){ 41 switch (this.opt) { 42 case '+':this.result=parseInt(this.n1)+parseInt(this.n2); 43 break; 44 case '-':this.result=parseInt(this.n1)-parseInt(this.n2); 45 break; 46 case '*':this.result=parseInt(this.n1)*parseInt(this.n2); 47 break; 48 case '/':this.result=parseInt(this.n1)/parseInt(this.n2); 49 break; 50 } 51 52 } 53 } 54 }) 55 </script> 56 </body> 57 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="./static/vue.js"></script> 7 <style> 8 .red{ 9 color:red; 10 } 11 .thin{ 12 font-weight: 200; 13 } 14 .italic{ 15 font-style: italic; 16 } 17 .active{ 18 letter-spacing: 0.5em; 19 } 20 </style> 21 </head> 22 <body> 23 24 <div id="app"> 25 <h1 v-bind:class="['thin','italic']">使用数组来设置类，用来做样式的测试使用。</h1> 26 27 <h1 v-bind:class="['thin','italic',flag?'active':'']">数组，用三元表达式控制</h1> 28 29 30 <h1 v-bind:class="['thin','italic',{'active':flag}]">数组，嵌入对象控制</h1> 31 32 <h1 v-bind:class="{active:flag,thin:true,italic:true,red:true}">数组，直接使用对象控制</h1> 33 34 <h1 v-bind:class="classObj">数组，直接使用对象控制</h1> 35 </div> 36 37 38 <script type="text/javascript"> 39 40 //2.穿件一个vue的实例 41 var vm=new Vue({ 42 el:'#app' , //选择器，选择要控制的区域 43 data:{ 44 //data 属性中，存放的是el 中要用到的数据 45 flag:true, 46 classObj:{active:true,thin:true,italic:true,red:true} 47 } 48 }) 49 </script> 50 </body> 51 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="./static/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <h1 v-bind:style="{color:'red','font-weight':200}">1.在用 Vue 构建大型应用时推荐使用</h1> 12 <h1 v-bind:style="styleObje">2.在用 Vue 构建大型应用时推荐使用</h1> 13 <h1 v-bind:style="[styleObje,styleObje2]">3.在用 Vue 构建大型应用时推荐使用</h1> 14 </div> 15 16 17 <script type="text/javascript"> 18 19 //2.穿件一个vue的实例 20 var vm=new Vue({ 21 el:'#app' , //选择器，选择要控制的区域 22 data:{ 23 //data 属性中，存放的是el 中要用到的数据 24 styleObje:{color:'red','font-weight':200}, 25 styleObje2:{'font-style':'italic'} 26 } 27 }) 28 </script> 29 </body> 30 </html>
v-for循环
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="./static/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <!--<p>{{list[0]}}</p>--> 12 遍历数组 13 <p v-for="item,i in list">{{item}}>>>{{i}}</p> 14 遍历属性 15 <p v-for="user in list2">{{user.id}}------{{user.name}}</p> 16 遍历对象 17 <p v-for="(val,key,index) in user">{{val}}---{{key}}---{{index}}</p> 18 迭代数字 19 <p v-for="count,index in 10">这是第*{{count}}--索引{{index}}次循环</p> 20 </div> 21 22 23 <script type="text/javascript"> 24 25 //2.穿件一个vue的实例 26 var vm=new Vue({ 27 el:'#app' , //选择器，选择要控制的区域 28 data:{ 29 list:[1,2,3,4,5,6], 30 list2:[ 31 {id:1,name:"111"}, 32 {id:2,name:"222"}, 33 {id:3,name:"333"}, 34 {id:4,name:"444"} 35 ], 36 user:{ 37 id:4, 38 name:"rico", 39 gender:"男" 40 } 41 } 42 }) 43 </script> 44 </body> 45 </html>
v-for 中key的使用注意事项
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="./static/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <!--<p>{{list[0]}}</p>--> 12 <!--遍历数组--> 13 <!--<p v-for="item,i in list">{{item}}>>>{{i}}</p>--> 14 <!--遍历属性--> 15 <!--<p v-for="user in list2">{{user.id}}------{{user.name}}</p>--> 16 <!--遍历对象--> 17 <!--<p v-for="(val,key,index) in user">{{val}}---{{key}}---{{index}}</p>--> 18 <!--迭代数字--> 19 <!--<p v-for="count,index in 10">这是第*{{count}}--索引{{index}}次循环</p>--> 20 <div> 21 <label for="">Id: 22 <input type="text" v-model="id"> 23 </label> 24 <label for="">Name: 25 <input type="text" v-model="name"> 26 </label> 27 <input type="button" value="添加" v-on:click="add"> 28 </div> 29 <p v-for="item in list2"> 30 <input type="checkbox"> 31 {{item.id}}---{{item.name}} 32 </p> 33 </div> 34 35 36 <script type="text/javascript"> 37 38 //2.穿件一个vue的实例 39 var vm=new Vue({ 40 el:'#app' , //选择器，选择要控制的区域 41 data:{ 42 id:"", 43 name:"", 44 list:[1,2,3,4,5,6], 45 list2:[ 46 {id:1,name:"李斯"}, 47 {id:2,name:"嬴政"}, 48 {id:3,name:"赵高"}, 49 {id:4,name:"韩非"} 50 ], 51 user:{ 52 id:4, 53 name:"rico", 54 gender:"男" 55 } 56 }, 57 methods:{ 58 add(){ 59 this.list2.push({id:this.id,name:this.name}) 60 } 61 } 62 63 }) 64 </script> 65 </body> 66 </html>