一、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="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>
运行结果：
时间： 2024-08-28 14:57:47