vue之指令

時間  2019-11-08
標籤 vue 指令 简体版
原文   原文鏈接

vue之指令

 

 

1、什麼是VUE？css

它是構建用戶界面的JavaScript框架（讓它自動生成js,css，html等）html

 

2、怎麼使用VUE？vue

一、引入vue.jspython

二、展現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>

三、創建一個vue對象安全

<script>
    new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
            msg:"你好啊",
            hd:"<input type='button' value='啦啦'>",
            str:"你妹的"
        }
    })
</script>

 

3、數據綁定app

一、插入文本{{ }}。如上例，也能夠放表達式框架

二、插入html：v-htmlide

 

4、vue的指令函數

指令：是帶有v-前綴的特殊屬性，經過屬性來操做元素

 

一、v-text：在元素當中插入值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app" v-text="str"> </div>
<div id="app1">{{str}}</div>


<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的


    new Vue({
        el: '#app',
        data: {
            str: 'hello vue'
        }
    });
    new Vue({
        el: '#app1',
        data: {
            str: 'hello vue'
        }
    })

</script>

</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<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>
<script>
    new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
            msg:"你好啊",
            hd:"<input type='button' value='啦啦'>",
            str:"你妹的"
        }
    })
</script>
</body>
</html>

示例
View Code

 

二、v-html：在元素當中不只能夠插入文本，還能夠插入標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app" v-html="string"> </div>
<div id="app1" v-html="str"></div>


<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的


    new Vue({
        el: '#app',
        data: {
            string: '<h1>hello</h1>'
        }
    });
    new Vue({
        el: '#app1',
        data: {
            str: 'hello vue'
        }
    })

</script>

</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h1>問卷調查</h1>
    <form action="" method="post">
        <input type="checkbox">香蕉
        <input type="checkbox">蘋果
        <input type="checkbox">橘子
        <input type="checkbox"  @click="qita">其餘
        <div v-html="htmlstr" v-show="test"></div>
    </form>
</div>
<script>
    new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
            htmlstr:'<textarea></textarea>',
            test:false  //默認是隱藏的
        },
        methods:{
            qita:function () {
                this.test = !this.test  //當一點擊其餘的時候讓顯示
            }
        }

    });

</script>

</body>
</html>

示例
View Code

 

三、v-if和v-else：根據表達式的真假值來動態插入和移除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app">

    <div v-if="role=='var'">
        <h1>美女</h1>
    </div>
    <div v-else-if="role == 'vvar'">
        <h1>男</h1>
    </div>
    <div v-else>
        <h1>不</h1>
    </div>


</div>


<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的


    new Vue({
        el: '#app',
        data: {
            role: 'var'
        }
    });

</script>

</body>
</html>
View Code

 

四、v-show：根據表達式的真假值來顯示和隱藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="pick">我是海燕</p>
    <p v-show="temp">呼啦啦呼啦啦</p>
    <p v-show="ok">你喜歡我嗎?</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
//           pick:true  //顯示
           pick:false,   //移除，用註釋給替換了
//            temp :true ,  //顯示
           temp :false,   //隱藏
           ok:true
        }
    });
    window.setInterval(function() {
        vm.ok =! vm.ok;
    },1000)  //1000表明1秒
</script>

</body>
</html>

if-show示例
if-show

 

五、v-for：根據變量的值來循環渲染元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
</head>
<body>

<div id="app">

    <ul>
        <li v-for="like in hobby">{{ like }}</li>
    </ul>

    <ul>
        <li v-for="student in students">姓名：{{student.name}} <br> 年齡：{{student.age}}</li>
    </ul>

</div>


<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的

    new Vue({
        el: '#app',
        data: {
            hobby: ['抽菸', '喝酒', '燙頭'],
            students: [
                {
                    name: '張三',
                    age: 2,
                },
                {
                    name: '李四',
                    age: 2,
                }
            ]
        }
    })


</script>

</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="item in arr">   <!-- 對一個數組的循環 -->
               {{ item }}
           </li>
       </ul>
         <ul>
           <li v-for="(item,index) in arr">
               {{ item }}:{{index}}
           </li>
       </ul>
         <ul>
           <li v-for="item in obj">
               {{ item }}
           </li>
       </ul>
          <ul>
           <li v-for="(item,key,index) in obj">
               {{ item }}:{{ key }}:{{ index }}
           </li>
       </ul>
          <ul>
           <li v-for="item in obj2">
               {{ item.username }}
               {{ item.age }}
               {{ item.sex }}
           </li>
       </ul>
        <div v-for="i in 8">  <!--循環8次，打印1 2 3 4 5 6 7 8 -->
            {{ i }}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arr:[11,22,33,34],
                obj:{a:"張三",c:"李四",b:"王麻子",d:"王大拿"},
                obj2:[
                    {username:"jason"},
                    {age:20},
                    {sex:"male"}
                ]
            }
        })
    </script>
</body>
</html>
View Code

 

六、v-on：監聽元素事件，並執行相應的操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: red;
        }

    </style>
</head>
<body>

<div id="app">

     <!--v-bind是能夠省略的-->
    <h1 :class="{ active: isActive }">55555</h1>
    <button @click="changeColor">點擊</button>

</div>


<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的

    new Vue({
        el: '#app',
        data: {
            isActive: false,
        },
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive;
            }
        }
    });

</script>

</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="item in arr">   <!-- 對一個數組的循環 -->
               {{ item }}
           </li>
       </ul>
         <ul>
           <li v-for="(item,index) in arr">
               {{ item }}:{{index}}
           </li>
       </ul>
         <ul>
           <li v-for="item in obj">
               {{ item }}
           </li>
       </ul>
          <ul>
           <li v-for="(item,key,index) in obj">
               {{ item }}:{{ key }}:{{ index }}
           </li>
       </ul>

        <input type="button" value="點我吧" v-on:click="show()">
        <input type="button" value="點我吧" @click="show()">

        <!--如下三種方式均可以-->
        <a href="http://www.baidu.com">我想去百度</a>
        <a v-bind:href="url">我想去百度</a>
        <a :href="url">我想去百度</a>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arr:[11,22,33,34],
                obj:{a:"張三",c:"李四",b:"王麻子",d:"王大拿"},
                str:"我來了",
                url:"http://www.baidu.com"
            },
            methods:{
                show:function () {
                    alert(123);
                    alert(vm.str);
//                    alert(this.str)  //若是沒有vm,就直接用this
                }
            }
        })
    </script>
</body>
</html>
View Code

 

七、v-bind：綁定元素的屬性並執行相應的操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .bk_1{
            width: 200px;
            height: 200px;
            background-color: silver;
        }
        .bk2_2{
             width: 200px;
            height: 200px;
            background-color: darkorange;
        }
       .bk_3{

            border: 5px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" v-bind:title="msg">騰訊</a>   <!--綁定標題-->
        <a href="http://www.baidu.com" title="啦啦啦">點我</a>   <!--綁定標題-->
        <div v-bind:class="bk"></div>
        <div v-bind:class="bk2"></div>

        <div :class="{bk_1:temp,bk_3:temp}">加油,吧</div>  <!-- #temp必定是一個布爾值，爲true是就使用bk_2,爲false就不爲他-->
        <div :class="[bk2,bk3]"></div> <!--若是是多個類就用[bk1,bk2,],就顯示兩個類的樣式-->
    </div>
    <script>
        var vm = new Vue({
            el:"#app",//表示在當前這個元素開始使用VUe
            data:{
                msg:"我想去騰訊上班",
                bk:"bk_1",
                bk2:"bk2_2",
                bk3:"bk_3",
//                temp: false,
                temp: true
            }
        })
    </script>
</body>
</html>
View Code

 

八、v-model：把input的值和變量綁定了，實現了數據和視圖的雙向綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: red;
        }

    </style>
</head>
<body>

<div id="app">

    <!--v-bind是能夠省略的-->
    <input type="text" v-model="name">
    <input type="checkbox" value="男" v-model="gender">
    <input type="checkbox" value="女" v-model="gender">
    <select v-model="girls">
        <option>11</option>
        <option>22</option>
        <option>33</option>
    </select>

    <textarea></textarea>

    <hr>
    {{ name }}
    {{ gender }}
    {{ girls }}
</div>


<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的

    new Vue({
        el: '#app',
        data: {
            name: 'ward',
            gender: [],
            girls: [],
        },
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive;
            }
        }
    });

</script>

</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg">
    <input v-model="msg" value="this is test">
    <p>{{msg}}</p>
    <input type="button" value="變化" @click="change">
</div>
<script>
    new Vue({
        el:"#app",  //表示當前這個元素開始使用vue
        data:{
//            msg:"",
            msg:"aaaaa"
        },
        methods:{
            change:function () {
                this.msg=512
            }
        }
    });

</script>

</body>
</html>

示例1
View Code

 

九、對數組的操做

    - push  #從末尾添加
    - pop  #從末尾刪除
    - shift #從頭添加
    - unshift #從頭刪除
    - splice #刪除元素。splice(index,1)  #刪除這個索引的那一個
    - reverse  #反轉

 

十、指令修飾符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: green;
        }
    </style>
</head>
<body>

    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>學科</th>
                    <th>成績</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python</td>
                    <!--將進行數據的計算，不用number這個修飾符將會進行字符串的拼接-->
                    <td><input type="text" v-model.number.lazy="python"/></td>
                </tr>
                <tr>
                    <td>Vue</td>
                    <!--失去焦點後計算-->
                    <td><input type="text" v-model.lazy="vue"/></td>
                </tr>
                <tr>
                    <td>Go</td>
                    <!--trim去掉左右兩邊的空白格-->
                    <td><input type="text" v-model.trim="go"/></td>
                </tr>
                <tr>
                    <td>總成績</td>
                    <td>{{ sumScore }}</td>
                </tr>
            </tbody>
        </table>
        <hr>
        {{ python }}
        {{ vue }}
        {{ go }}
        {{ sumScore }}
    </div>

    <script>
        // 數據模板引擎
        // v-開頭的指令是幫助咱們渲染數據用的
        let vm = new Vue({
            el: "#app",
            data: {
                python: 88,
                vue: 100,
                go: 65
            },
            computed: {
                sumScore: function () {
                    console.log(1);
                    return this.python + this.vue + this.go;
                },
            },
            watch: {
                python: function () {
                    return this.python + 1;
                }
            }
        })
    </script>

</body>
</html>
View Code

 

十一、指令獲取DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
           color: red;
        }
        .a {
           color: #b2dba1;
        }

    </style>
</head>
<body>

<div id="app">
    <div ref="myRef" class="a">Peiqi</div>
    <!--<button v-on:click="changeColor">點擊</button>-->
    <button @click="changeColor">點擊</button>

</div>

<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的

    new Vue({
        el: '#app',
        data: {
            bd: 'https://www.baidu.com/',
            isActive: 'active'
        },
        methods: {
            changeColor: function () {
                console.log(this);
                // 將class中的東西都覆蓋掉了
                this.$refs.myRef.className = this.isActive;
            }
        }
    });

</script>

</body>
</html>
View Code

 

十二、指令計算屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.min.js"></script>
    <style>
        .active {
            color: red;
        }

    </style>
</head>
<body>

    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>學科</th>
                    <th>成績</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Python</td>
                    <td><input type="text" v-model="python"/></td>
                </tr>
                <tr>
                    <td>Vue</td>
                    <td><input type="text" v-model="vue"/></td>
                </tr>
                <tr>
                    <td>Go</td>
                    <td><input type="text" v-model="go"/></td>
                </tr>
                <tr>
                    <td>總成績</td>
                    <td>{{ sumScore }}</td>
                </tr>
            </tbody>
        </table>
        <hr>
        {{ python }}
        {{ vue }}
        {{ go }}
        {{ sumScore }}
    </div>


<script>

    //數據模板引擎
    //v-開頭的指令是幫助咱們來渲染數據用的

    new Vue({
        el: '#app',
        data: {
            python: 99,
            vue: 100,
            go: 98,
        },
        computed: {
            sumScore: function () {
                return this.python + this.vue + this.go
            },
        },
        // 爲了解耦
        watch: {
          python: function () {
              return this.python + 1
          }
        },
        // 事件對應的函數
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive;
            }
        }
    });

</script>

</body>
</html>
View Code

 

 

5、自定義指令

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="./static/vue.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div id="app">
        <div v-bind:class="{ box: isShow}" v-pos.right.bottom="leftBottom">Hello Vue!</div>
    </div>

    <script>
        // 數據模板引擎
        // v-開頭的指令是幫助咱們渲染數據用的

        Vue.directive("pos", function (el, bindding) {
            console.log("el: ", el);
            console.log("bindding: ", bindding);
            if (bindding.value) {
                el.style['position'] = 'fixed';
                for (let key in bindding.modifiers) {
                    el.style[key] = 0;
                }
                // el.style['right'] = 0;
                // el.style['bottom'] = 0;
            }
        });

        let vm = new Vue({
            el: "#app",
            data: {
                leftBottom: true,
                isShow: true,
            },
        })
    </script>

</body>
</html>
View Code

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-focus>
</div>
<script>
       new Vue({
            el:"#app",
            data:{

            },
           directives:{ //directives定義指令的
                focus:{   //focus指令的名字
                    inserted:function (els) {    //els綁定的這個元素
                        //inserted當綁定的這個元素  <input type="text" v-focus>顯示的時候，
                        els.focus();  //獲取焦點的一個方法，和之前的時候是同樣的
                        els.style.backgroundColor="blue";
                        els.style.color='#fff'
                    }
                }
           }
        })
    </script>
</body>
</html>
View Code

 

6、Vue過濾器

 

過濾器是在數據到達用戶的最後一步進行簡單的過濾處理，複雜的仍是要用計算屬性或者方法。

// 咱們兩個需求 一個是價格展現後面自動加「元」
//  單位 毫米和米的轉換
// HTML頁面
<div>
        <p>價格展現</p>
        <input type="text" v-model="price">
        {{price | currency('USD')}}
</div>
<div>
        <p>換算</p>
        <input type="text" v-model="meters">
        {{meters | meter}}
 </div>
// js 代碼
Vue.filter('currency', function (val, unit) {
    val = val || 0;
    var ret = val+ unit
    return ret
});

Vue.filter('meter', function (val) {
    val = val || 0;
    return (val/1000).toFixed(2) + "米"
});
new Vue({
    el: '#app',
    data: {
        price: 10,
        meters: 10,
    }
});

過濾器 filter
View Code

 

7、實現tag切換的小示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid cornflowerblue;
            height: 50px;
            width: 200px;
            background: cornflowerblue;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>

<body>
<div id="mybox">
    <ul>
        <li><span v-on:click="qh(true)">二維碼登陸</span></li>
        <li><span v-on:click="qh(false)">郵箱登陸</span></li>
    </ul>
    <div v-if="temp">
        <img src="erweima.png" alt="">
    </div>
    <div v-if="!temp">  <!--取反-->
        <form action="http://mail.163.com" method="post">
            <!--method是爲了安全   ，action：提交的地址-->
            <p>郵箱：<input type="email"></p>
            <p>密碼：<input type="password"></p>
            <p><input type="submit" value="登陸"></p>
        </form>
    </div>
</div>
<script>
    new Vue({
        el:"#mybox",  //表示當前這個元素開始使用vue
        data:{
            temp:true
        },
        methods:{
            qh:function (t) {
                this.temp=t
            }
        }
    })
</script>
</body>
</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程