Vue 學習記錄二

樣式與類繫結

樣式和類的繫結有三種方法，物件方式，陣列方式，以及物件陣列方式的組合。

<div id="app">
    <div :class="{active:isActive}"></div>
    <div :class="[activeClass,errorClass]"></div>
    <div :class="[{active:isActive},activeClass, errorClass]"></div>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            activeClass:'proper',
            errorClass:'tip',
            isActive:true,
        }
    });
</script>

條件渲染

說到條件渲染，通常會想到v-if和v-show兩個指令，但兩者也有些不同，攜帶v-show指令的元素始終會被渲染在DOM中，它只是動態的切換display樣式，另外官方給出的差異，如下圖

列表渲染

在進行列表渲染的時候，不要忘記key。

<div id="app">
    <div v-for="(user,index) in users" :key="index">{{user.name}}-{{user.email}}</div>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            users:[
                {
                    id:1,
                    name:'張三',
                    email:'203865485@qq.com',
                },
                {
                    id:2,
                    name:'李四',
                    email:'203865489@sina.com',
                },
                {
                    id:3,
                    name:'王二',
                    email:'353865485@163.com',
                }
            ],
        }
    });
</script>

事件處理

DOM事件我們使用v-on指令，指令是有修飾符的，那麼on指令有以下修飾符

• stop - 呼叫 event.stopPropagation()
• prevent - 呼叫 event.preventDefault()
• capture - 新增事件偵聽器時使用 capture 模式
• self - 只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥
• {keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥
• native - 監聽元件根元素的原生事件
• once - 只觸發一次回撥
• left - (2.2.0) 只當點選滑鼠左鍵時觸發
• right - (2.2.0) 只當點選滑鼠右鍵時觸發
• middle - (2.2.0) 只當點選滑鼠中鍵時觸發
• passive - (2.3.0) 以 { passive: true } 模式新增偵聽器

<div id="app">
    <div class="container">
        <div class="main" :class="{joy,grey}" @click="changeBackground"></div>
    </div>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            joy:false,
            grey:true,
        },
        methods:{
            changeBackground(){
                this.joy  = ! this.joy;
                this.grey = ! this.grey;
            }
        }
    });
</script>
<style>
    *{
        margin:0;
        padding:0;
    }
    .container{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height:100%;
    }
    .main{
        width:50%;
        height:50%;
    }
    .grey{
        background-color:#ccc;
    }
    .joy{
        background-color:#FFA431;
    }
</style>

表單輸入繫結

在做專案的時候，經常會與表單打交道，但值得一提的是多選的時候，繫結值的型別必須是陣列，否則會報錯，另外推薦form表單使用物件的方式，這樣整體程式碼看著簡潔易操作。

<div id="app">
    <div class="container">
        <div class="main">
            <div class="row">
                <div class="label">姓名:</div>
                <div class="item"><input type="text" name="name" v-model="form.name" /></div>
            </div>
            <div class="row">
                <div class="label">性別:</div>
                <div class="item">
                    <input type="radio" name="sex" v-model="form.sex" value="1" />男
                    <input type="radio" name="sex" v-model="form.sex" value="0" />女
                </div>
            </div>
            <div class="row">
                <div class="label">愛好:</div>
                <div class="item">
                    <input type="checkbox" v-model="form.hobby" name="hobby" value="讀書">讀書
                    <input type="checkbox" v-model="form.hobby" name="hobby" value="游泳">游泳
                    <input type="checkbox" v-model="form.hobby" name="hobby" value="爬山">爬山
                </div>
            </div>
            <div class="row">
                <div class="label">簡介:</div>
                <div class="item"><textarea v-model="form.intro"></textarea></div>
            </div>
            <div class="row">
                <button @click="saveData">提交</button>
            </div>
        </div>
    </div>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            form:{
                name:null,
                sex:null,
                hobby:[],
                intro:null
            }
        },
        methods:{
            saveData(){
                let params = this.form;
                console.log(params);
                //...
            }
        }
    });
</script>
<style>
    *{
        margin:0;
        padding:0;
    }
    .container{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height:100%;
    }
    .main{
        width:50%;
        height:50%;
        display:flex;
        flex-direction: column;
    }
    .row{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        padding:20px 0;
    }
    .label{
        width: 50px;
    }
    .item{
        flex:1;
    }
</style>