一、什么是VUE?
它是构建用户界面的JavaScript框架(让它自动生成js,css,html等)
二、怎么使用VUE?
1、引入vue.js
2、展示HTML
<div id="app">
<p>{{msg}}</p>
<p>{{ 80 2 }}</p>
<p>{{ 20>30 }}</p>
<h1 v-text="msg"></h1>
<h1 v-html="hd"></h1>
<h1 v-html="str"></h1>
</div>
3、建立一个vue对象
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
msg:"你好啊",
hd:"<input type='button' value='啦啦'>",
str:"你妹的"
}
})
</script>
三、数据绑定
1、插入文本{{ }}。如上例,也可以放表达式
2、插入html:v-html
四、vue的指令
指令:是带有v-前缀的特殊属性,通过属性来操作元素
1、v-text:在元素当中插入值
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <p>{{msg}}</p>
13 <p>{{ 80 2 }}</p>
14 <p>{{ 20>30 }}</p>
15 <h1 v-text="msg"></h1>
16 <h1 v-html="hd"></h1>
17 <h1 v-html="str"></h1>
18 </div>
19 <script>
20 new Vue({
21 el:"#app", //表示当前这个元素开始使用vue
22 data:{
23 msg:"你好啊",
24 hd:"<input type='button' value='啦啦'>",
25 str:"你妹的"
26 }
27 })
28 </script>
29 </body>
30 </html>
2、v-html:在元素当中不仅可以插入文本,还可以插入标签
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <h1>问卷调查</h1>
13 <form action="" method="post">
14 <input type="checkbox">香蕉
15 <input type="checkbox">苹果
16 <input type="checkbox">橘子
17 <input type="checkbox" @click="qita">其他
18 <div v-html="htmlstr" v-show="test"></div>
19 </form>
20 </div>
21 <script>
22 new Vue({
23 el:"#app", //表示当前这个元素开始使用vue
24 data:{
25 htmlstr:'<textarea></textarea>',
26 test:false //默认是隐藏的
27 },
28 methods:{
29 qita:function () {
30 this.test = !this.test //当一点击其他的时候让显示
31 }
32 }
33
34 });
35
36 </script>
37
38 </body>
39 </html>
3、v-if和v-else:根据表达式的真假值来动态插入和移除元素
4、v-show:根据表达式的真假值来显示和隐藏元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <p v-if="pick">我是海燕</p>
13 <p v-show="temp">呼啦啦呼啦啦</p>
14 <p v-show="ok">你喜欢我吗?</p>
15 </div>
16 <script>
17 var vm = new Vue({
18 el:"#app", //表示当前这个元素开始使用vue
19 data:{
20 // pick:true //显示
21 pick:false, //移除,用注释给替换了
22 // temp :true , //显示
23 temp :false, //隐藏
24 ok:true
25 }
26 });
27 window.setInterval(function() {
28 vm.ok =! vm.ok;
29 },1000) //1000代表1秒
30 </script>
31
32 </body>
33 </html>
5、v-for:根据变量的值来循环渲染元素
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 <style>
10 ul li{
11 list-style: none;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="app">
17 <ul>
18 <li v-for="item in arr"> <!-- 对一个数组的循环 -->
19 {{ item }}
20 </li>
21 </ul>
22 <ul>
23 <li v-for="(item,index) in arr">
24 {{ item }}:{{index}}
25 </li>
26 </ul>
27 <ul>
28 <li v-for="item in obj">
29 {{ item }}
30 </li>
31 </ul>
32 <ul>
33 <li v-for="(item,key,index) in obj">
34 {{ item }}:{{ key }}:{{ index }}
35 </li>
36 </ul>
37 <ul>
38 <li v-for="item in obj2">
39 {{ item.username }}
40 {{ item.age }}
41 {{ item.sex }}
42 </li>
43 </ul>
44 <div v-for="i in 8"> <!--循环8次,打印1 2 3 4 5 6 7 8 -->
45 {{ i }}
46 </div>
47 </div>
48 <script>
49 var vm = new Vue({
50 el:"#app",
51 data:{
52 arr:[11,22,33,34],
53 obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
54 obj2:[
55 {username:"jason"},
56 {age:20},
57 {sex:"male"}
58 ]
59 }
60 })
61 </script>
62 </body>
63 </html>
6、v-on:监听元素事件,并执行相应的操作
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 <style>
10 ul li{
11 list-style: none;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="app">
17 <ul>
18 <li v-for="item in arr"> <!-- 对一个数组的循环 -->
19 {{ item }}
20 </li>
21 </ul>
22 <ul>
23 <li v-for="(item,index) in arr">
24 {{ item }}:{{index}}
25 </li>
26 </ul>
27 <ul>
28 <li v-for="item in obj">
29 {{ item }}
30 </li>
31 </ul>
32 <ul>
33 <li v-for="(item,key,index) in obj">
34 {{ item }}:{{ key }}:{{ index }}
35 </li>
36 </ul>
37
38 <input type="button" value="点我吧" v-on:click="show()">
39 <input type="button" value="点我吧" @click="show()">
40
41 <!--以下三种方式都可以-->
42 <a href="http://www.baidu.com">我想去百度</a>
43 <a v-bind:href="url">我想去百度</a>
44 <a :href="url">我想去百度</a>
45 </div>
46 <script>
47 var vm = new Vue({
48 el:"#app",
49 data:{
50 arr:[11,22,33,34],
51 obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
52 str:"我来了",
53 url:"http://www.baidu.com"
54 },
55 methods:{
56 show:function () {
57 alert(123);
58 alert(vm.str);
59 // alert(this.str) //如果没有vm,就直接用this
60 }
61 }
62 })
63 </script>
64 </body>
65 </html>
6、v-bind:绑定元素的属性并执行相应的操作
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 <style>
10 .bk_1{
11 width: 200px;
12 height: 200px;
13 background-color: silver;
14 }
15 .bk2_2{
16 width: 200px;
17 height: 200px;
18 background-color: darkorange;
19 }
20 .bk_3{
21
22 border: 5px solid #000;
23 }
24 </style>
25 </head>
26 <body>
27 <div id="app">
28 <a href="http://www.baidu.com" v-bind:title="msg">腾讯</a> <!--绑定标题-->
29 <a href="http://www.baidu.com" title="啦啦啦">点我</a> <!--绑定标题-->
30 <div v-bind:class="bk"></div>
31 <div v-bind:class="bk2"></div>
32
33 <div :class="{bk_1:temp,bk_3:temp}">加油,吧</div> <!-- #temp一定是一个布尔值,为true是就使用bk_2,为false就不为他-->
34 <div :class="[bk2,bk3]"></div> <!--如果是多个类就用[bk1,bk2,],就显示两个类的样式-->
35 </div>
36 <script>
37 var vm = new Vue({
38 el:"#app",//表示在当前这个元素开始使用VUe
39 data:{
40 msg:"我想去腾讯上班",
41 bk:"bk_1",
42 bk2:"bk2_2",
43 bk3:"bk_3",
44 // temp: false,
45 temp: true
46 }
47 })
48 </script>
49 </body>
50 </html>
7、v-model:把input的值和变量绑定了,实现了数据和视图的双向绑定
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <input v-model="msg">
13 <input v-model="msg" value="this is test">
14 <p>{{msg}}</p>
15 <input type="button" value="变化" @click="change">
16 </div>
17 <script>
18 new Vue({
19 el:"#app", //表示当前这个元素开始使用vue
20 data:{
21 // msg:"",
22 msg:"aaaaa"
23 },
24 methods:{
25 change:function () {
26 this.msg=512
27 }
28 }
29 });
30
31 </script>
32
33 </body>
34 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 <style>
10 .cccc{
11 display: none;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="app">
17 <div>
18 <input type="text" placeholder="姓名" v-model="username">
19 <input type="text" placeholder="年龄" v-model="age">
20 <input type="text" v-model="msg" class="cccc">
21 <input type="submit" value="添加" @click="add">
22 </div>
23 <div>
24 <table cellpadding="0" border="1">
25 <tr v-for="(item,index) in arr">
26 <td><input type="text" v-model="item.username"></td>
27 <td><input type="text" v-model="item.age"></td>
28 <td><input type="button" value="删除" @click="del(index)"></td>
29 <td><input type="button" @click="edit(index)" v-model="item.msg"></td>
30 </tr>
31 </table>
32 </div>
33 </div>
34 <script>
35 new Vue({
36 el:"#app", //表示当前这个元素开始使用vue
37 data:{
38 username:"",
39 age:"", //变量的初始化
40 arr:[],
41 msg:"编辑"
42 },
43 methods:{
44 add:function () {
45 this.arr.push(
46 {
47 "username":this.username,
48 "age":this.age,
49 "msg":this.msg
50 }
51 );
52 console.log(this.arr) //打印的是一个数组
53 },
54 del:function (index) {
55 this.arr.splice(index,1); //删除索引对应的哪一个值
56 },
57 edit:function (index) {
58 console.log(index);
59 if (this.arr[index].msg=="保存"){
60 // alert(this.arr[index].msg);
61 this.arr[index].msg="编辑";
62 }else{
63 this.arr[index].msg="保存";
64 }
65
66 }
67 }
68
69 })
70 </script>
71
72 </body>
73 </html>
8、对数组的操作
- push #从末尾添加
- pop #从末尾删除
- shift #从头添加
- unshift #从头删除
- splice #删除元素。splice(index,1) #删除这个索引的那一个
- reverse #反转
五、自定义指令
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9
10 </head>
11 <body>
12 <div id="app">
13 <input type="text" v-focus>
14 </div>
15 <script>
16 new Vue({
17 el:"#app",
18 data:{
19
20 },
21 directives:{ //directives定义指令的
22 focus:{ //focus指令的名字
23 inserted:function (els) { //els绑定的这个元素
24 //inserted当绑定的这个元素 <input type="text" v-focus>显示的时候,
25 els.focus(); //获取焦点的一个方法,和以前的时候是一样的
26 els.style.backgroundColor="blue";
27 els.style.color='#fff'
28 }
29 }
30 }
31 })
32 </script>
33 </body>
34 </html>
六、实现tag切换的小示例
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width">
7 <title>Title</title>
8 <script src="vue.js"></script>
9 <style>
10 ul li{
11 list-style: none;
12 display: inline-block;
13 border: 1px solid cornflowerblue;
14 height: 50px;
15 width: 200px;
16 background: cornflowerblue;
17 text-align: center;
18 line-height: 50px;
19
20 }
21 </style>
22 </head>
23
24 <body>
25 <div id="mybox">
26 <ul>
27 <li><span v-on:click="qh(true)">二维码登录</span></li>
28 <li><span v-on:click="qh(false)">邮箱登录</span></li>
29 </ul>
30 <div v-if="temp">
31 <img src="erweima.png" alt="">
32 </div>
33 <div v-if="!temp"> <!--取反-->
34 <form action="http://mail.163.com" method="post">
35 <!--method是为了安全 ,action:提交的地址-->
36 <p>邮箱:<input type="email"></p>
37 <p>密码:<input type="password"></p>
38 <p><input type="submit" value="登录"></p>
39 </form>
40 </div>
41 </div>
42 <script>
43 new Vue({
44 el:"#mybox", //表示当前这个元素开始使用vue
45 data:{
46 temp:true
47 },
48 methods:{
49 qh:function (t) {
50 this.temp=t
51 }
52 }
53 })
54 </script>
55 </body>
56 </html>