一、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，或者也可以把变量名变为其他的都行：如abc10 ????????????????el:‘#box‘, //选择器：可以是id,class，tagName11 ????????????????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指的是当前的对象c21 ????????????????????????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="width: 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>运行结果：
vue.js介绍，常用指令，事件，以及制作简易留言版
原文地址：http://www.cnblogs.com/15fj/p/8046137.html