vue.js介绍，常用指令，事件，以及制作简易留言版

一、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>&times;</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>

运行结果：