指令

時間 2020-07-30

標籤指令简体版

原文原文鏈接

指令

一、斗篷指令

v-cloak：避免屏幕閃爍css

在css中使用 [v-cloak] {display: none}，將v-cloak屬性隱藏html
當vue環境加載後，會將v-cloak屬性解析移除，因此內容 {{ num }} 就顯示出來前端
因此用戶就不會看見閃爍頁面{{ num }}了vue

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    <p>{{ num }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10
        },
    })
</script>

二、屬性指令

語法：v-bind：屬性名="變量"，能夠簡寫成：屬性名="變量"數據庫

針對不一樣屬性，使用方式的不一樣：json

自定義以及title這些直接賦值的，使用方式（t是變量，o是常量）數組

<p v-bind:title="t" v-bind:owen="'o'">段落</p>
<script>
    new Vue({
        el: '#app',
        data: {
            t: '懸浮提示',
        },
    })
</script>

對於class屬性（重點）瀏覽器

綁定的是變量，值能夠是一個類名，或者也能夠是多個類名安全
綁定的是數組，數組的每個成員都是變量， [p1, p2] p1與p2都是變量session
綁定的是字典，key是類名不是一個變量，value是決定該類名是否起做用的一個布爾變量，{k: v} k是類名，v是變量控制k是否起做用的布爾變量

<!-- 
a是變量，值就是類名
b就是類名，不是變量
c是變量，值爲布爾，決定b類是否起做用
d是變量，值能夠爲一個類名 'p1' 也能夠爲多個類名 "p1 p2 ..."
結果是calss="p1 b p2 p3"
-->
<p v-bind:class="[a, {b: c}]" v-bind:class="d"></p> 
<script>
    let app = new Vue({
        el: '#app',
        data: {
            a: 'p1',
            c: true,
            d: 'p2 p3',
        },
    })
</script>

對於style屬性(瞭解)

綁定的是字典變量，值是一個字典，字典的key是駝峯體或者字符串的形式，value是字符串

<p v-bind:style="myStyle"></p>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            myStyle: {
                width: '50px',
                height: '50px',
                backgroundColor: 'pink',
                borderRadius: '50%'
            }
        },
    })
</script>

案例

v-bind: 能夠簡寫成：

v-on: 能夠簡寫成@

    <style>
        .live {
            background-color: aqua;
        }
    </style>
<!--    控制點擊每個按鈕會進行選中狀態-->
    <button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>
    <button v-bind:class="{live: isLive == 2}" v-on:click="changeLive(2)">2</button>
<!--    簡寫屬性指令與事件指令-->
    <button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        // 默認選中1
        data: {
            isLive: 1
        },
        // 給點擊事件賦值
        methods:{
            changeLive(index){
                // 將isLive替換成選中的事件
                this.isLive=index
            }
        }

    })
</script>

點擊不一樣按鈕進行選中狀態

三、事件補充

css中有僞類，鼠標點擊與懸浮或訪問事後的狀態能夠設置

<style>
    body {
        /* 不容許文本選中 */
        user-select: none;
    }
    .d1:hover {
        color: orange;
        /* 鼠標樣式 */
        cursor: pointer;
    }
    /* 只有按下采用樣式，擡起就沒了 */
    .d1:active {
        color: red;
    }
    /* div標籤壓根不支持 :visited 僞類 */
    .d1:visited {
        color: pink;
    }
</style>

在vue中咱們能夠本身控制

 click: 單擊 dblclick：雙擊 mouseover：懸浮 mouseout：離開 mousedown：按下 mouseup：擡起

    <style>
        /*不容許選中文本*/
        body {
            user-select: none;
        }
        .d2.c1 {
            color: red;
        }
        .d2.c2 {
            color: orange;
        }
        .d2.c3 {
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
<!--    屬性選擇器，添加類，綁定鼠標事件-->
           <!--
        click: 單擊
        dblclick：雙擊
        mouseover：懸浮
        mouseout：離開
        mousedown：按下
        mouseup：擡起
        -->
<div :class="['d2',c]" @click="hFn('c1')" @mouseover="hFn('c2')" @mousedown="hFn('c3')">事件處理</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            c: ''
        },
        methods:{
            hFn(c){
                this.c = c
            }
        }
    })
</script>

四、表單指令

語法：v-model="變量"

v-model綁定的變量控制的是value屬性值
v-model要比v-bind：value多了一個監聽機制
數據的雙向綁定：v-model能夠將綁定的變量值映射給value，v-model還能夠將表單元素新的value映射給變量，即v-model="變量"，變量變化，其餘v-model等於的相同的也會變化

<!-- 兩個輸入框內容會同時變化 -->
<body>
<div id="app">
    <input type="text" name="n1" v-model="v1">
    <input type="text" name="n2" v-model="v1">
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: ''
        }
    })
</script>

五、條件指令

語法：v-show="變量" 或者 v-if="變量"

二者的區別：

v-show在隱藏的標籤時，採用的是經過css中display: none進行隱藏，不安全，可是速度更快
v-if在隱藏標籤時，不會渲染在頁面上，更加的安全，一般採用這種方式

v-if有家族：v-if | v-else-if | v-else （if判斷只會走一條，成功了就不會走下面的了，v-else不須要設置條件）

v-if 是必須的，必須設置條件
v-else-if 能夠是0~n個
v-else能夠是0~1個

<div id="app">
<div>
    <p v-show="isShow">show控制</p>
    <p v-if="isShow">if控制</p>
    <div>
        <p v-if="0">第一個p</p>
        <p v-else-if="0">第二個p</p>
        <p v-else>第三個p</p>
    </div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            isShow: 0
        }

    })
</script>

案例

經過點擊不一樣的按鈕顯示不一樣的內容

    <style>
        body {
            margin: 0;
        }
        button {
            width: 50px;
            line-height: 40px;
            float: right;
        }
        /*清除浮動*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        /*設置內容樣式*/
        /*vw: 瀏覽器展現寬度，100vw包括滾動條的寬度*/
        /*100%：不包括滾動條的*/
        .box {
            width: 100vw;
            height: 200px;
        }
        .red {
            background-color: red;
        }
        .yellow {
            background-color: yellow;
        }
        .blue {
            background-color: blue;
        }
        /*鼠標點擊後按鈕顏色*/
        button.active {
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="clearfix">
<!--        按鈕綁定點擊事件，事件名有了就不用從新再methods寫了-->
        <button :class="{active: isShow === 'red'}" @click="isShow = 'red'">紅</button>
        <button :class="{active: isShow === 'yellow'}" @click="isShow = 'yellow'">黃</button>
        <button :class="{active: isShow === 'blue'}" @click="isShow = 'blue'">藍</button>
    </div>
    <div>
<!--        點擊不一樣按鈕展現不一樣內容作判斷-->
        <div v-if="isShow==='red'" class="box red"></div>
        <div v-else-if="isShow==='yellow'" class="box yellow"></div>
        <div v-else class="box blue"></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: 'blue'
        },
    })
</script>

點擊不一樣按鈕顯示不一樣內容

六、循環指令

語法：v-for="ele in obj" obj是被遍歷循環的對象，ele是遍歷獲得的每一次結果

for循環遍歷的都是可迭代對象，還能夠遍歷出索引和鍵，數字，字符串，數組，對象

遍歷數字時，獲得的結果是從1開始到那個數字結束
字符串：v-for="v in str" 或者 v-for="(v, i) in str" v是循環獲得的每個值，i 是對應的索引
數組：v-for="v in arr" 或者 v-for="(v, i) in arr" v是循環獲得的每個值，i 是對應的索引
對象（字典）：v-for="v in obj" 或者 v-for="(v, k) in arr" 或者 v-for="(v, k i) in obj" v是循環獲得的每個值，k 是鍵， i 是對應的索引

v-for遍歷要依賴於一個所屬標籤，該標籤內部全部的內容都會被遍歷複用

<body>
    <div id="app">
        <!-- 遍歷數字
        5
        【1】【2】【3】【4】【5】
        -->
        <p>{{ d1 }}</p>
        <i v-for="e in d1">【{{ e }}】</i>
        <hr>

        <!-- 遍歷字符串
        abc
        【a】【b】【c】
        【0a】【1b】【2c】
        -->
        <p>{{ d2 }}</p>
        <i v-for="e in d2">【{{ e }}】</i>
        <i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
        <hr>

        <!-- 遍歷數組
        [ 1, 3, 5 ]
        【1】【3】【5】
        【01】【13】【25】
        -->
        <p>{{ d3 }}</p>
        <i v-for="e in d3">【{{ e }}】</i>
        <i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
        <hr>

        <!-- 遍歷對象
        { "name": "Bob", "age": 17.5, "gender": "男" }
        【Bob】【17.5】【男】
        【name-Bob】【age-17.5】【gender-男】
        【name-Bob-0】【age-17.5-1】【gender-男-2】
        -->
        <p>{{ d4 }}</p>
        <i v-for="e in d4">【{{ e }}】</i>
        <i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
        <i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
        <hr>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            d1: 5,
            d2: 'abc',
            d3: [1, 3, 5],
            d4: {
                name: "Bob",
                age: 17.5,
                gender: "男"
            }
        }
    })
</script>

案例

商品循環展現案例

    <style>
        .box {
            width: 280px;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden; /* 隱藏超出父級範圍外的內容*/
            float: left;
            margin: 10px;
            text-align: center; /* 文本相關的屬性大多默認值都是inherit*/
        }
        .box img {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
<div class="box" v-for="obj in goods">
    <img :src="obj.img" alt="">
    <p>{{ obj.title }}</p>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let goods = [
        {
            'img': '222.jpg',
            'title': '葫蘆娃'
        },
        {
            'img': '111.jpg',
            'title': '小孩'
        },
        {
            'img': '333.jpg',
            'title': '笑臉'
        }
    ];
    new Vue({
        el: '#app',
        data: {
            goods
        }

    })
</script>
</html>

循環展現商品及信息

七、todolist（留言板）

一、補充Array數組增刪插操做

尾增：arr.push(ele)
首增：arr.unshift(ele)
尾刪：arr.pop()
首刪：arr.shift()
增刪改插入均可以用的：arr.splice(起始索引，操做位數，操做設置的值)

二、前臺數據庫

一、存（存起來都是key:value形式）

永久保存：localStorage.name = "Bob";

臨時保存，頁面關閉即丟失：sessionStorage.name = 'Tom';

二、取

直接點name取

localStorage.name

sessionStorage.name

三、清空

若是對某一個值清空直接從新賦值爲空：localStorage.name=""

所有清空用：localStorage.clear() sessionStorage.clear()

四、短板：只能存儲字符串，全部對象和數組須要轉換成json類型字符串進行存和取

    let a=[1,2,3];
    localStorage.arr = JSON.stringify(a);  // 序列化
    let b = JSON.parse(localStorage.arr);  // 反序列化
    console.log(b)

三、案例（留言板）

    <style>
        li:hover{
            color: red;
            /*鼠標樣式變成手*/
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <form >
            <input type="text" v-model="info">
            <button type="button" @click="sendInfo">留言</button>
        </form>
        <ul>
            <li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{ info }}</li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            info:'',
            // 三元運算：條件 ？ 結果1 ： 結果2
            info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
        },
        methods:{
            sendInfo (){
                // 若是input框有值才添加
                if (this.info){
                    // 向數組中添加值，尾增push，首增unshift
                    this.info_arr.push(this.info);
                    // 清空輸入框
                    this.info = '';
                    // 將數據添加到前端數據庫中
                    localStorage.info_arr = JSON.stringify(this.info_arr)
                }
            },
            deleteInfo (index){
                // 刪除，索引位置操做一位變爲空
                this.info_arr.splice(index, 1);
                // 同步數據庫
                localStorage.info_arr = JSON.stringify(this.info_arr)
            }
        }

    })
</script>

todolist

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。