vue指令

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

目錄javascript

Vue指令

文本相關指令

<div id="app">
    <!-- 插值表達式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本會被msg替換 -->
    <p v-text='msg'>原文本</p>
    <!-- 能夠解析帶html標籤的文本信息 -->
    <p v-html='msg'></p>
    <!-- v-once控制的標籤只能被賦值一次 -->
    <p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
    // 指令: 出如今html標籤中能夠被vue解析處理的全局屬性
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>

屬性指令

<!-- 給自定義全局屬性綁定變量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式綁定全局屬性 -->
<p v-bind:title="'abc'"></p>

<!-- 單類名綁定 -->
<p v-bind:class="c1"></p>
<!-- 多類名綁定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 類名狀態綁定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多類名狀態綁定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>

<!-- 樣式綁定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data: {
            abc: "abc",
            c1: "p1",
            c2: "p2",
            c3: "p3",
            div_style: {
                width: "200px",
                height: "200px",
                backgroundColor: "cyan"
            }
        }
    })
</script>
<!-- v-bind: 指令能夠簡寫爲 : -->

事件指令

<!-- v-on: 指令 簡寫 @ -->
<!-- 不傳參事件綁定，但事件回調方法能夠獲取事件對象 -->
<p @click="fn"></p>
<!-- ()能夠傳入具體實參 -->
<p @click="fn()"></p>
<!-- ()狀況下，事件對象應該顯式傳入 -->
<p @click="fn($event)"></p>

表單指令

  1. v-model針對於表單元素html

  2. 提交必須在表單中vue

  3. v-model="控制value的變量"java

  4. v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上建立雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。python

    按鈕的事件咱們可使用 v-on 監聽事件，並對用戶的輸入進行響應。數據庫

<div id="app">
    <!-- v-model針對於表單元素 -->
    <form action="" method="get">
        <!-- 一、雙向綁定：服務於文本輸入框 -->
        <!-- v-model存儲的值爲輸入框的value值 -->
        <div>
            <input type="text" name="usr" v-model="in_val">
            <input type="password" name="ps" v-model="in_val" >
            <textarea name="info" v-model="in_val"></textarea>
        </div>

        <!-- 二、單選框 -->
        <div>
            <!-- 單選框是以name進行分組，同組中只能發生單選 -->
            <!-- v-model存儲的值爲單選框的value值 -->
            男：<input type="radio" name="sex" value="男" v-model="ra_val">
            女：<input type="radio" name="sex" value="女" v-model="ra_val">
            {{ ra_val }}
        </div>

        <!-- 三、單一複選框 -->
        <!-- v-model存儲的值爲true|false -->
        <!-- 或者爲自定義替換的值 -->
        <div>
            <input type="checkbox" v-model='sin_val' true-value="選中" false-value="未選中" />
            {{ sin_val }}
        </div>

        <!-- 四、多複選框 -->
        <!-- v-model存儲的值爲存儲值多複選框value的數組 -->
        <div>
            <input type="checkbox" value="男的" name="cless" v-model='more_val' />
            <input type="checkbox" value="女的" name="cless" v-model='more_val' />
            <input type="checkbox" value="呵呵" name="cless" v-model='more_val' />
            {{ more_val }}
        </div>
    </form>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            in_val: '',
            // 默認值能夠決定單選框默認選項
            ra_val: '男',
            // 默認值爲true，單一複選框爲選中，反之false爲不選中
            sin_val: '',
            // 數組中存在的值對應的複選框默認爲選中狀態
            more_val: ['女的','不挑']//默認選項
        }
    })
</script>

雙向綁定

同時綁定一個值，是虛擬DOM來不斷的渲染現存的DOM數組

<!--雙向綁定-->
<!--屬性指令：v-model="變量"，v-model綁定的變量控制的是表單元素的value值-->
<!--普通表單元素，用v-model直接綁定變量控制value值-->
<!--真實的DOM-->
<div id="app">
    <input type="text" v-model="v1">
    <input type="text" v-model="v1">
</div>

<!--data裏面的是虛擬DOM-->
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            v1:""
        }
    })
</script>

斗篷指令

  1. 避免頁面閃爍
  2. v-cloak針對於斗篷指令
<style>
        [v-cloak]{ display: none; }
    </style>
</head>
<body>
<div id="app" >
    <p>{{ msg }}</p>
    <p>{{ msg }}</p>
    <p>{{ msg }}</p>
    <p>{{ msg }}</p>
    <p>{{ msg }}</p>
    <p>{{ msg }}</p>
</div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:123456
        }
    })
</script>

條件指令

v-if和v-show的區別
條件渲染的值爲true|false
true表明標籤顯示方式渲染緩存

  1. v-if：false v-if不渲染到頁面session

  2. v-show ：v-show以display:none渲染到頁面,但也不會顯示app

    <div id="app">
    <p v-if="true">if指令</p>
    <p v-show="true">show指令</p>
    <p></p>
</div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#app"
    })
</script>

    1. v-if是一個家族，包含v-if,v-else-if,v-else

    2. v-if相關分支操做,在未顯示狀況下,是不會被渲染到頁面中

    3. 經過key全局屬性操做後,渲染過的分支會創建key對應的緩存,提升下一次渲染速度

    4. v-else分支只要在全部上分支都爲假時顯示，且不須要條件

    5. 若是沒有v-else,v-if在遇到下一個v-if也會結束

<div id="app">
        <!--條件指令：
            v-if="true|false"，爲假時，在頁面上不渲染，能夠隱藏標籤中的信息
            v-show="true|false"，爲假時，在頁面中用display:none渲染，雖然沒展現，可是任在頁面結構中
        -->
        <p v-if="false">if指令</p>
        <p v-show="false">show指令</p>

        <!-- v-if是一個家族
        v-if
        v-else-if
        v-else
        一、上分支成立，下分支會被屏蔽
        二、else分支只要在全部上分支都爲假時顯示，且不須要條件
        -->
        <p v-if="v1 === '1'">if分支</p>
        <p v-else-if="v1 === '2'">elif分支1</p>
        <p v-else-if="v1 === '3'">elif分支2</p>
        <p v-else>else分支</p>
        <hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '2'
        }
    })
</script>


指令案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>條件指令案例</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
        }
        .r {background-color: red}
        .y {background-color: yellow}
        .g {background-color: green}
        .action {background-color: pink;}
    </style>
</head>
<body>
<div id="app">
    <p>
        <!-- 控制高亮  action: c === 'red' if c === 'red' 成立 action 是true 成立 -->
        <button @click="changeC('red')" :class="{action: c === 'red'}">紅</button>
        <!--<button @click="changeC('red')" :class="c === 'red'? 'action': ''">紅</button>-->
        <button @click="changeC('yellow')" :class="{action: c === 'yellow'}">黃</button>
        <button @click="changeC('green')" :class="{action: c === 'green'}">綠</button>
    </p>
    <div class="wrap">
        <div class="box r" v-if="c === 'red'"></div>
        <div class="box y" v-else-if="c === 'yellow'"></div>
        <div class="box g" v-else></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // sessionStorage的生命週期與頁面標籤綁定，當標籤頁被關閉，數據庫被清空
    // localStorage是前臺永久數據庫

    // sessionStorage.name = '123';
    // localStorage.name = 'xyz';
    // localStorage.clear();


    new Vue({
        el: '#app',
        data: {
            // 頁面從新刷新加載，能夠從數據庫中獲取緩存，若是沒有，再取默認值
            // c: 'red',
            c: localStorage.c ? localStorage.c : 'red',
        },
        methods: {
            changeC(color) {
                this.c = color;
                // 每一次改變c的值，將值同步到前臺數據庫
                localStorage.c = color;  // 存
            }
        }
    })
</script>
</html>
sessionStorage的生命週期與頁面標籤綁定，當標籤頁被關閉，數據庫被清空
localStorage是前臺永久數據庫
測試
sessionStorage.name = '123';
localStorage.name = 'xyz';
清空
localStorage.clear();

循環指令

v-for,也能夠多層嵌套

<div id="app">
        <p v-for="v in title">{{ v }}</p>
</div>

</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            title:"哎呦我去 "
        }
    })
</script>
<div id="app">
    <!--v:表明值，i：表明索引>
    <p v-for="(v,i) in title">第{{ i }}個，{{ v }}</p>
</div>

</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "哎呦我去"
        }
    })
</script>
<div id="app">
        <!--循環指令：
            v-for=""
            語法：
            v-for="成員 in 容器"
        -->
        <!--一、字符串循環渲染: 能夠只遍歷值，也能夠遍歷值與索引-->
        <!--二、數組循環渲染: 能夠只遍歷值，也能夠遍歷值與索引-->
        <div>
            <p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
        </div>
        <!--三、對象循環渲染: 能夠只遍歷值，也能夠遍歷值與鍵，還能夠遍歷值、鍵與索引-->
        <div>
            <p v-for="v in people">{{ v }}</p>
        </div>
        <div>
            <p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
        </div>
        <div>
                <!--(v, k, i) v :value k:key i :index-->
            <p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
        </div>
        <br>
        <div>
            <div v-for="(stu, i) in stus">
                <hr v-if="i != 0">
                <p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
            </div>
        </div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: '循環指令',
            arr: [1, 4, 2, 5, 3],
            people: {
                name: '兔子',
                color: '粉白',
                price: 6.66,
            },
            stus: [
                {
                    name: "Bob",
                    age: 18
                },
                {
                    name: "Tom",
                    age: 17
                },
                {
                    name: "Jerry",
                    age: 19
                }
            ]
        }
    })
</script>


條件

循環指令案例（留言案例）

數組的增
push pop unshift shift splice
this.comments.unshift(this.msg);
this.comments.splice(0,0,0);
<div id="app">
        <input type="text" v-model="msg">
        <button @click="send_comment">留言</button>
        <ul>
            <li v-for="(v, i) in comments" @click="deleteMsg(i)">{{ v }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '',
            comments: []
        },
        methods: {
            send_comment() {
                // 數組的增
                // push pop unshift shift splice
                // this.comments.unshift(this.msg);
                // this.comments.splice(0,0,0);
                if (this.msg) {
                    this.comments.push(this.msg);  // 留言
                    this.msg = '';  // 留言後清空輸入框
                }
            },
            //清除記錄
            deleteMsg(index) {
                this.comments.splice(index, 1);
            }
        }
    })
</script>

splice的用法

主要用於對數組的操做

// 數組操做萬能方法，能夠完成增刪改
let arr = [1, 2, 3];
// 參數：開始索引，操做長度，操做的結果們
arr.splice(2, 0, 100);
arr.splice(1, 1);
console.log(arr);

todolist案例

<div id="app">
    <div>
        <input type="text" v-model="val">
        <button type="button" @click="submitMsg">提交</button>
    </div>
    <ul>
        <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
    </ul>
    {{ list }}
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            val: "",
            list: []
        },
        methods: {
            submitMsg () {
                if (this.val) {
                    this.list.push(this.val);
                    this.val = ""
                }
            },
            removeMsg(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>

A做業（必作）

一、先有一下成績單數據

scores = [
    { name: 'Bob', math: 97, chinese: 89, english: 67 },
    { name: 'Tom', math: 67, chinese: 52, english: 98 },
    { name: 'Jerry', math: 72, chinese: 87, english: 89 },
    { name: 'Ben', math: 92, chinese: 87, english: 59 },
    { name: 'Chan', math: 47, chinese: 85, english: 92 },
]

用table表格標籤渲染以上數據，表格第一列是學生總分排序，最後一列是學生總分；

<body>
<div id="app">
    <h1 style="text-align: center">成績單</h1>
    <table width="400" border="1" rules="all" style="margin: auto">
        <thead>
        <tr>
            <td>sort</td>
            <td>name</td>
            <td>math</td>
            <td>chinese</td>
            <td>english</td>
            <td>total</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(stu,i) in scores">
            <td>{{ i+1 }}</td>
            <td v-for="v in stu">{{ v }}</td>
        </tr>
        </tbody>
    </table>

</div>

</body>
<script src="vuejs/vue.js"></script>
<script>
    let scores = [
        {name: 'Bob', math: 97, chinese: 89, english: 67},
        {name: 'Tom', math: 67, chinese: 52, english: 98},
        {name: 'Jerry', math: 72, chinese: 87, english: 89},
        {name: 'Ben', math: 92, chinese: 87, english: 59},
        {name: 'Chan', math: 47, chinese: 85, english: 92},
    ];

    let total_scores = [];
    // in 和 of 的區別   in 是求出來的是索引， of 直接是求的數值結果
    // for (stu in scores)
    // 計算總分
    for (stu of scores) {
        stu.total = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }


    //冒泡排序
    for (let i = 0; i < total_scores.length - 1; i++) {
        for (let j = 0; j < total_scores.length - 1 - i; j++) {
            if (total_scores[j].total < total_scores[j + 1].total) {
                let t = total_scores[j];
                total_scores[j] = total_scores[j + 1];
                total_scores[j + 1] = t;
            }
        }
    }
    console.log(total_scores);


    new Vue({
        el: '#app',
        data: {
            scores: total_scores,
        }
    });


</script>

冒泡排序

let arr = [1, 4, 2, 5, 3];
    for (let i = 0; i < 5 - 1; i++) {
        for (let j = 0; j < 5 - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                // arr[j] ^= arr[j+1];
                // arr[j+1] ^= arr[j];
                // arr[j] ^= arr[j+1];
                let t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    console.log(arr);

二、仍是採用上方相同的數據，採用相同的渲染規則，只渲染全部科目都及格了的學生。

<tbody>
     <tr v-for="(stu,i) in scores" v-if="stu.math>60&&stu.chinese>60&&stu.english>60">
        <td>{{ i+1 }}</td>
        <td v-for="v in stu">{{ v }}</td>
     </tr>
</tbody>

B做業（選作）

一、仍是採用上方相同的數據，添加篩選規則：
i）有三個按鈕：語文、數學、外語，點擊誰誰高亮，且當前篩選規則採用哪門學科

<style>
        .action{
            background-color: deeppink;
        }
    </style>
<div style="text-align: center;margin: 20px">
        <button :class="{ action:rule === 'chinese'}" @click="clickAction('chinese')">chinese</button>
        <button :class="{ action:rule === 'math'}" @click="clickAction('math')">math</button>
        <button :class="{ action:rule === 'english'}" @click="clickAction('english')">english</button>
</div>
new Vue({
        el: '#app',
        data: {
            scores: total_scores,
            rule:"",
        },
        methods:{
            clickAction(rule){
                this.rule=rule
            }
        }
    });

​ ii）兩個輸入框，【】~【】，前面天最小分數，後面填最大分數，所有設置完畢後，表格的數據會被更新只渲染知足全部條件的結果
​ 舉例：點擊語文，輸入【86】~【87】，那就只會渲染Jerry和Ben兩條數據

<div style="text-align: center;margin: 20px">
        <button :class="{ action:rule === 'chinese'}" @click="clickAction('chinese')">chinese</button>
        <button :class="{ action:rule === 'math'}" @click="clickAction('math')">math</button>
        <button :class="{ action:rule === 'english'}" @click="clickAction('english')">english</button>
        <input type="number" min="1" max="100" v-model="min">
        ~
        <input type="number" min="1" max="100" v-model="max">

    </div>
<tbody v-if="rule === 'math'">
    <tr v-for="(stu,i) in scores" v-if="(min&&max&&stu.math>= +min && stu.math <= +max || (!min || !max))">
        <td>{{ i+1 }}</td>
        <td v-for="v in stu">{{ v }}</td>
    </tr>
</tbody>
<tbody v-else-if="rule === 'chinese'">
    <tr v-for="(stu,i) in scores" v-if="(min&&max&&stu.chinese>= +min && stu.chinese <= +max || (!min || !max))">
        <td>{{ i+1 }}</td>
        <td v-for="v in stu">{{ v }}</td>
    </tr>
</tbody>
<tbody v-else-if="rule === 'english'">
    <tr v-for="(stu,i) in scores" v-if="(min&&max&&stu.english>= +min && stu.english <= +max || (!min || !max))">
        <td>{{ i+1 }}</td>
        <td v-for="v in stu">{{ v }}</td>
    </tr>
</tbody>
<tbody v-else>
    <tr v-for="(stu,i) in scores">
        <td>{{ i+1 }}</td>
        <td v-for="v in stu">{{ v }}</td>
    </tr>
</tbody>
new Vue({
        el: '#app',
        data: {
            scores: total_scores,
            rule: "",
            min: "",
            max: ""
        },
        methods: {
            clickAction(rule) {
                this.rule = rule
            },

        }
    });

知識點總結

一、v-model完成表單指令，簡單的控制value，單選框中的使用，單獨複選框的使用以及複選框中的使用
    <input type="password" v-model="控制value的變量" />
二、瞭解：斗篷指令解決頁面閃爍
    v-cloak =>  [v-cloak] {display:none} => 加載vue就會清除v-cloak屬性
三、條件指令v-if與v-show區別，v-if家族成員以及上分支會成立會屏蔽下分支的工做機制
    v-if不渲染隱藏 | v-show以display:none渲染隱藏
    v-if | v-else-if | v-else
四、循環指令v-for如何循環渲染字符串、數組、字典，以及須要嵌套循環渲染賦值結構
    v-for="v in str"  v-for="（v,i) in str"
    v-for="v in arr"  v-for="（v,i) in arr"
    v-for="v in dic"  v-for="（v,k) in dic"  v-for="（v,k,i) in dic"
    [{},{}] {a:[]} [str1,str2]
五、瞭解：delimiters實例成員解決插值表達式符號衝突
    delimiters: ['{{', '}}']
六、計算屬性(方法屬性)在computed中聲明，方法內部變量會被監聽，值來源於方法返回值
    computed: {
        methodAttr() {
            // 內部出現的變量都會被監聽，發生值更新會回調該方法
            return '方法屬性的值'
        }
    }
七、監聽watch能夠設置數據的監聽方法，在監聽屬性更新時，完成特定邏輯
    watch: {
        attr() {
            // attr屬性被監聽，發生值更新會回調該方法
        }
    }
八、重點：組件的概念，組件就是vue實例(對象)
    <div id="app">
        <tag />
        <tag />
    </div>
    
    let tag = {
        template: '<p>子組件</p>'
    }
    
    new Vue({
        el: '#app',
        components: {
            tag,
        }
    })
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程