vue指令

前端没学好，参考大佬博客补一下

 

一、什么是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：在元素当中插入值

 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>
31 
32 示例
v-text

2、v-html：在元素当中不仅可以插入文本，还可以插入标签

 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>
40 
41 示例
v-html

3、v-if和v-else：根据表达式的真假值来动态插入和移除元素

4、v-show：根据表达式的真假值来显示和隐藏元素

 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>
34 
35 if-show示例
v-show

5、v-for：根据变量的值来循环渲染元素

 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>
v-for

6、v-on：监听元素事件，并执行相应的操作

 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>
v-on

6、v-bind：绑定元素的属性并执行相应的操作

 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>
v-bind

7、v-model：把input的值和变量绑定了，实现了数据和视图的双向绑定

 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>
35 
36 示例1
示例1
 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>
74 
75 示例2
示例2

8、对数组的操作

    - push  #从末尾添加
    - pop  #从末尾删除
    - shift #从头添加
    - unshift #从头删除
    - splice #删除元素。splice(index,1)  #删除这个索引的那一个
    - reverse  #反转

五、自定义指令

 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切换的小示例

 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>
View Code

 

posted @ 2018-09-21 16:19  Roc_Atlantis  阅读(189)  评论(0)  编辑  收藏  举报