一、vue是什么？
一个mvvm框架(库)、和angular类似，比较容易上手、小巧，让我们的代码更加专注于业务逻辑，而不是去关注DOM操作
二、vue和angular之间的区别
vue——简单易学
指令以v-xx
一片html代码配合上json，再new出来vue实例
个人维护项目
适合：移动端项目，小巧
angular——上手难
指令以ng-xxx
所有属性和方法都挂在$scope身上
angular由google维护
适合：pc端项目
共同点：不兼容低版本的IE
三、vue的基本使用
1、基本雏形
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue雏形1</title> 6 <script src="vue.js"></script> 7 <script> 8 window.onload=function () { 9 var c=new Vue({ //可以不定义这个对象直接new，或者也可以把变量名变为其他的都行：如abc 10 el:'#box', //选择器：可以是id,class，tagName 11 data:{ //数据 12 msg:'welcome vue' 13 } 14 }); 15 16 }; 17 </script> 18 </head> 19 <body> 20 <di id="box"> 21 {{msg}} 22 </di> 23 </body> 24 </html>
运行结果：
2、常用指令
2.1v-model 一般表单元素(input) 双向数据绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>常用指令</title> 6 <script src="vue.js"></script> 7 <script> 8 window.onload=function () { 9 var abc=new Vue({ 10 el:'#box', 11 data:{ 12 msg:'welcome vue', 13 msg2:12, 14 msg3:true, 15 arr:['apple','pear','banana','orange'], 16 json:{a:'apple',b:'pear',c:'banana',d:'orange'} 17 } 18 }); 19 20 }; 21 </script> 22 </head> 23 <body> 24 <di id="box"> 25 <input type="text" v-model="msg"> //当改变input的值时，下面{{msg}}的值也会改变同时下面的input也会同时改变 26 <!--一个input也行--> 27 <input type="text" v-model="msg"> 28 <br> 29 {{msg}} 30 <br> 31 {{msg2}} 32 <br> 33 {{msg3}} 34 <br> 35 {{arr}} 36 <br> 37 {{json}} 38 </di> 39 </body> 40 </html>
运行结果：
2.2、循环：v-for="变量名 in 对象"
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, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title>循环</title> 9 <script src="vue.js"></script> 10 <script> 11 window.onload=function () { 12 var abc=new Vue({ 13 el:'#box', 14 data:{ 15 msg:'welcome vue', 16 msg2:12, 17 msg:true, 18 arr:['apple','pear','banana','orange'], 19 json:{a:'apple',b:'pear',c:'banana',d:'orange'} 20 } 21 }); 22 23 }; 24 </script> 25 </head> 26 <body> 27 28 <div id="box"> 29 <ul> 30 <li v-for="value in arr"> 31 {{value}} {{$index}} //循环遍历出arr数组的值和当前值的索引 32 </li> 33 </ul> 34 <hr> 35 <ul> 36 <li v-for="value in json"> 37 {{value}} {{$index}} {{$key}} //循环遍历出json文件的值，索引以及当前值的键名 38 </li> 39 </ul> 40 41 <hr> 42 <ul> 43 <li v-for="(k,v) in json"> 44 {{k}} {{v}} {{$index}} {{$key}} //一件键值对的形式进行便利 45 </li> 46 </ul> 47 </div> 48 49 </body> 50 </html>
运行结果：
2.3、事件
2.3.1：v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 <script> 8 window.onload=function () { 9 var c=new Vue({ 10 el:'#box', 11 data:{//数据 12 msg:'welcome vue', 13 msg2:12, 14 msg:true, 15 arr:['apple','pear','banana','orange'], 16 json:{a:'apple',b:'pear',c:'banana',d:'orange'} 17 }, 18 methods:{//方法 19 add:function () { 20 this.arr.push('tomato'); //this指的是当前的对象c 21 22 } 23 } 24 }); 25 26 }; 27 </script> 28 </head> 29 <body> 30 <div id="box"> 31 <input type="button" value="按钮" v-on:click="add()" > //事件 32 <ul> 33 <li v-for="vaule in arr"> 34 {{vaule}} 35 </li> 36 </ul> 37 </div> 38 </body> 39 </html>
运行结果：当点击按钮会添加一个tomato在数组里
2.3.2：显示与隐藏：v-show="true/false"
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>点击按钮div消失</title> 6 <script src="vue.js"></script> 7 <script> 8 window.onload=function () { 9 var c=new Vue({ 10 el:'#box', 11 data:{//数据 12 a:true, //将a的值初始化为true,设置为显示 13 msg:'welcome vue', 14 msg2:12, 15 msg:true, 16 arr:['apple','pear','banana','orange'], 17 json:{a:'apple',b:'pear',c:'banana',d:'orange'} 18 } 19 20 }); 21 22 }; 23 </script> 24 </head> 25 <body> 26 <div id="box"> 27 <input type="button" value="按钮" v-on:click="a=false"> //点击之后将a的值变为false，设置为隐藏 28 <div style=" 100px;height: 100px;background-color: red" v-show='a' > //设置为显示 29 30 </div> 31 </div> 32 </body> 33 </html>
运行结果：点击按钮div消失
3、简易留言版：实现添加数据删除数据
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简易留言板</title> 6 <link rel="stylesheet" href="lib/bootstrap.min.css"> 7 8 <script src="lib/jquery-1.7.2.js"></script> 9 <script src="lib/bootstrap.js"></script> 10 <script src="vue.js"></script> 11 <script> 12 window.onload=function () { 13 new Vue({ 14 el:'#box', //选择器 15 data: { //数据 16 myData: [], 17 username: '', 18 age:'', 19 nowIndex:-100 //一定要将nowIndex设置为不可能的数 20 }, 21 methods:{ 22 add:function () { //向数组添加对象，属性为name和age，值分别是username和age 23 this.myData.push({ //this指向的是当前的new出来的vue对象 24 name:this.username, //将第一个input框的值赋给name 25 age:this.age //将第二个input框的值赋给age 26 }); 27 this.username=''; //将当前对象的username的值置为空 28 this.age=''; //当前对象的age的值置为空 29 30 }, 31 deleteMsg:function (n) { 32 if(n==-2){ 33 this.myData=[]; //将数组置为空 34 }else{ 35 this.myData.splice(n,1); //删除当前项 36 } 37 } 38 } 39 }); 40 }; 41 </script> 42 </head> 43 <body> 44 <div class="container" id="box"> 45 <form role="form"> 46 <div class="form-group"> 47 <label for="username">用户名：</label> 48 <input type="text" id="username" v-model="username" class="form-control" placeholder="输入姓名"> 49 </div> 50 <div class="form-group"> 51 <label for="age">年 龄：</label> 52 <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄"> 53 </div> 54 <div class="form-group"> 55 <input type="button" value="添加" class="btn btn-primary" v-on:click="add()"> //点击添加，触发add()函数，向数组添加数据 56 <input type="reset" value="重置" class="btn btn-danger"> //将input框置为空 57 </div> 58 </form> 59 <hr> 60 <table class="table table-bordered table-hover"> 61 <caption class="h2 text-info"> 62 用户信息表 63 </caption> 64 <tr> 65 <th class="text-center">序号</th> 66 <th class="text-center">名字</th> 67 <th class="text-center">年龄</th> 68 <th class="text-center">操作</th> 69 </tr> 70 <tr class="text-center" v-for="item in myData"> 71 <td>{{$index+1}}</td> 72 <td>{{item.name}}</td> 73 <td>{{item.age}}</td> 74 <td> 75 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex={{$index}}">删除</button>//点击按钮触发模态框，将当前数组值的索引赋给nowIndex 76 </td> 77 </tr> 78 79 <tr v-show="myData.length!=0"> //如果数组的长度不等于零，”删除全部“显示出来 80 <td colspan="4" class="text-right"> 81 <button class="btn btn-danger btn-sm"data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2"> 82 删除全部 83 </button> 84 </td> 85 </tr> 86 <tr v-show="myData.length==0"> //如果数组长度等于零，”暂无数据“显示出来 87 <td colspan="4" class="text-center text-muted" > 88 <p>暂无数据....</p> 89 </td> 90 </tr> 91 </table> 92 <!--模态框 弹出框--> 93 <div role="dialog" class="modal" id="layer"> //模态声明 94 95 <div class="modal-dialog"> //窗口声明 96 <div class="modal-content"> //内容声明 97 <div class="modal-header"> //声明标题 98 <button type="button" class="close" data-dismiss="modal"> //data-dismiss表示点击X这个模态框消失 99 <span>×</span> 100 </button> 101 <h4 class="modal-title"> 102 确认删除吗？ 103 </h4> 104 </div> 105 <div class="modal-body text-right"> 106 <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button> //点击取消，模态框消失 107 <button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button> //点击确定删除当前数据，并且模态框消失 108 </div> 109 </div> 110 </div> 111 </div> 112 </div> 113 114 </body> 115 </html>
运行结果：
