vue之指令

本文轉載自查看原文 2018-01-25 20:50 1417

一、什么是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>

示例

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>

示例

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>

if-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>

View Code

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>

View Code

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>

View Code

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>

示例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>

示例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>

View Code

六、實現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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue指令 vue的指令 vue指令 Vue指令學習Vue(一)：vue的基本指令 Vue（4）Vue指令的學習1 vue常見4種指令 Vue - 內部指令 Vue 常用指令 vue 安裝指令