VUE組件

時間 2019-11-10

標籤 vue 組件简体版

原文原文鏈接

v-once指令css

　　v-once：單獨使用，限制的標籤內容一旦賦值，便不可被動更改(若是是輸入框，能夠主動修改)html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <input type="text" v-model="msg" v-once>
    <p>{{ msg }}</p>
    <p v-once>{{ msg }}</p>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '初始值'
        }
    })
</script>
</html>

v-cloak指令：防止頁面閃爍vue

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{ }}
        {{ }}
        {{ }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
    })
</script>
</html>

條件指令數據庫

　　兩種均可以控制標籤的顯隱，綁定的值是布爾類型值，當都隱藏標籤時數組

　　v-if是不渲染標籤， v-show以 display:none 方式渲染session

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- v-if   v-show 以 display:none 方式渲染 -->
<div id="app">
    <p v-if="isShow">if條件指令</p>
    <p v-show="isShow">show條件指令</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>
</html>

v-if="變量"　　v-else-if="變量"　　v-else　　一組分支，上成立分支會屏蔽下方全部分支，else分支沒有條件，在全部分支不成立後才顯示app

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 400px;
            height: 300px;
        }
        .r { background-color: red; }
        .y { background-color: yellow }
        .b { background-color: blue; }
        .active {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<p v-if="0">if</p>-->
    <!--<p v-else-if="">elseif</p>-->
    <!--<p v-else>else</p>-->
    <div class="em">
        <p>
                <button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">紅</button>
                <button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黃</button>
                <button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">藍</button>
        </p>
        <p>
                <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">紅</button>
                <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黃</button>
                <button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">藍</button>
        </p>
        <div class="box r" v-if="showName == 'rBox'"></div>
        <div class="box y" v-else-if="showName == 'yBox'"></div>
        <div class="box b" v-else="showName"></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            showName: 'bBox'
        },
        methods: {
            changeBox(name) {
                this.showName = name;
            }
        }
    })
</script>
</html>

v-pre指令ui

　　v-pre指令能夠在vue控制範圍內，造成局部vue不控制區域(局部不解析vue語法)this

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <p v-pre>
        {{ }}
        <span v-if="hehe"></span>
    </p>
    <p v-pre>
        {{ }}
        <span v-if="hehe"></span>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        }
    })
</script>
</html>

循環指令spa

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <!--<p>{{ str }}</p>-->
    <!--<p>{{ str[0] }}</p>-->

    <!--<div>-->
    <!--<p v-for="ch in str">{{ ch }}</p>-->
    <!--</div>-->

    <!--<div>-->
        <!--<p v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</p>-->
    <!--</div>-->

    <!--<div>-->
        <!--<p v-for="(ele, i) in arr">{{ ele }}</p>-->
    <!--</div>-->
    <div>
        <p v-for="(ele, k) in dic">{{ k }}:{{ ele }}</p>
    </div>
    <div>
        <p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p>
    </div>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            str: 'abcd',
            arr: [1, 2, 4, 5],
            dic: {
                name: 'Hui',
                age: 80,
                gender: '靠'
            }
        }
    })
</script>
</html>

todolist留言板案例

　　留言就是往留言數組中添加數據，刪除留言就是從留言數組中移除數據，前臺數據庫：localStorage 和 sessionStorage， localStorage永久保存數據， sessionStorage臨時保存數據(當所屬頁面標籤被關閉，數據被清空)，前臺localStorage 和 sessionStorage數據庫存儲的值是字符串類型，因此要存放arr、dic等複雜數據須要JSON參與

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="userMsg">
        <button type="button" @click="sendMsg">留言</button>
    </p>
    <ul>
        <li v-for="(msg, index) in msgs" @click='deleteMsg(index)'>
            {{ msg }}
        </li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
            userMsg: '',
        },
        methods: {
            sendMsg(){
                let userMsg = this.userMsg;
                if (userMsg) {
                    this.msgs.unshift(userMsg);
                    localStorage.msgs = JSON.stringify(this.msgs);
                    this.userMsg = '';
                }
            },
            deleteMsg(index) {
                this.msgs.splice(index, 1)
            }
        }
    })
</script>
</html>

實例成員 - 插值表達式符號

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    {{ msg }}
    {[ msg ]}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '123'
        },
        delimiters: ['{[',']}'],
    })
</script>
</html>

計算屬性

　　computed是用來聲明方法屬性的，聲明的方法屬性不能在data中重複定義，方法屬性必須在頁面中渲染使用，纔會對內部出現的全部變量進行監聽，計算屬性的值來源於監聽方法的返回值。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p @click="fn">{{ num }}</p>
    <p>十位：{{ parseInt(num / 10 )}}</p>
    <p>個位：{{ num % 10 }}</p>

    十位：<input type="number" v-model="shi" min="0" max="9">
    個位：<input type="number" v-model="ge" min="0" max="9">
    結果：<b>{{ shi * 10 + +ge}}</b>
    結果：{{ result }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 99,
            shi: '',
            ge: ''
        },
        methods: {
            fn() {
                this.num -= 3;
            }
        },
        computed: {
            result(){
                return this.shi * 10 + +this.ge
            }
        }
    })
</script>
</html>

屬性監聽

　　watch爲data中已存在的屬性設置監聽事件，監聽的屬性值發送改變，就會觸發監聽事件，監聽事件的方法返回值沒有任何意義。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p @click="fn">{{ num }}</p>
    <p>十位：{{ shi }}</p>
    <p>個位：{{ ge }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 99,
            shi: 0,
            ge: 0
        },
        methods: {
            fn(){
                this.num -= 3;
            }
        },
        watch: {
            num() {
                this.shi = parseInt(this.num / 10);
                this.ge = this.num % 10;
            }
        }
    })
</script>
</html>

組件

　　組件：一個包含html、css、js獨立的集合體，這樣的集合體能夠完成頁面解構的代碼複用，

　　分組分爲根組件、全局組件與局部組件

　　　　根組件：全部被new Vue()產生的組件，在項目開發階段，一個項目只會出現一個根組件

　　　　全局組件：不用註冊，就能夠成爲任何一個組件的子組件

　　　　局部組件：必須註冊，才能夠成爲註冊該局部組件的子組件

　　每個組件都有自身的html結構，css樣式，js邏輯

　　　　每個組件其實都有本身的template，就是用來標識本身html結構的

　　　　template模板中有且只有一個根標籤

　　　　根組件通常不提供template，就由掛載點的真實DOM提供html結構

　　除根組件的其餘組件，數據要有局部做用域，保證組件複用時，各組件間數據的獨立性

　　在多組件共處時，在哪一個組件模板中出現的變量，有當前組件組件提供

局部組件

　　建立局部組件，　在父組件中註冊該局部組件，在父組件的template模板中渲染該局部組件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            box-shadow: 0 3px 5px 0 #666;
            width: 240px;
            height: 300px;
            text-align: center;
            padding: 20px 0;
            float: left;
            margin: 5px;
        }
        .box img {
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <local-tag></local-tag>
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        template: `
        <div class="box">
            <img src="img/1.jpg" alt="">
            <h3>嗨皮</h3>
            <p>馬叉蟲</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        components: {
            'local-tag': localTag,
        }
    })
</script>
</html>

全局組件

　　建立全局組件，在父組件的template模板中直接渲染該全局組件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            box-shadow: 0 3px 5px 0 #666;
            width: 240px;
            height: 300px;
            text-align: center;
            padding: 20px 0;
            float: left;
            margin: 5px;
        }
        .box img {
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag',{
        template: `
        <div class="box" @click="action">
            <img src="img/1.jpg" alt="">
            <h3>嗨皮</h3>
            <p>馬叉蟲{{ num }}</p>
        </div>
        `,
        data() {
            return {
                num: 0
            }
        },
        methods: {
            action() {
                this.num++;
            }
        }
    });

    new Vue({
        el: '#app',
    })
</script>
</html>

組件交互-父傳子

　　數據交互 - 父傳子 - 經過綁定屬性的方式，父組件提供數據，在父組件模板中，爲子組件標籤設置自定義屬性，綁定的值由父組件提供，在子組件實例中，經過props實例成員得到自定義屬性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .info {
            box-shadow: 0 3px 5px 0 pink;
            width: 200px;
            text-align: center;
            padding: 3px;
            float: left;
            margin: 5px;
        }
        .info img {
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
<info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let infos = [
    {
        image: 'img/001.png',
        title: '貓'
    },
    {
        image: 'img/002.png',
        title: '蛋糕'
    },
    {
        image: 'img/003.png',
        title: '藍糕'
    },
    {
        image: 'img/004.png',
        title: '惡犬'
    },
];
let info = {
    template:`
    <div class="info">
        <img :src="myinfo.image" alt="">
        <p><b>{{ myinfo.title }}</b></p>
    </div>
    `,
    props: ['myinfo']
};

new Vue({
    el: '#app',
    components: {
        info,
    },
    data: {
        infos,
    }
})
</script>
</html>

組件交互-子傳父

　　數據由子組件提供，子組件內部經過觸發系統事件，發送一個自定義事件，將數據攜帶出來，父組件位子組件標籤的自定義屬性經過方法實現，就能夠經過參數拿到子組件傳遞處理的參數

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .close:hover {
            cursor:pointer;
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="userMsg">
        <button @click="sendMsg">留言</button>
    </p>
    <ul>
        <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let msgLi = {
        template:`
        <li>
            <span class="close" @click="deleteMsg(index)">x</span>
            <span>第{{ index +1 }}條：</span>
            <span>{{ msg }}</span>
        </li>`,
        props: ['msg','index'],
        methods: {
            deleteMsg(i) {
                this.$emit('remove_msg',i);
                this.$emit('myclick',1,2,3,4,5)
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            msgs: [],
            userMsg: ''
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = '';
                }
            },
            removeAction(i) {
              this.msgs.aplice(i, 1)
            }
            },
        components:{
                msgLi
        }
    })
</script>
</html>

相關標籤/搜索

每日一句

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