Vue learning record II

Time:2021-7-26

Style and class binding

There are three methods for binding styles and classes: object mode, array mode, and a combination of object array mode.

<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>

conditional rendering

When it comes to conditional rendering, you usually think ofv-ifandv-showTwo instructions, but they are also somewhat different, carryingv-showThe element of the instruction is always rendered in the DOM, which is just a dynamic switchdisplayIn addition, the official differences are shown in the figure below

Vue learning record II

List rendering

Don’t forget when rendering listskey

<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: 'Zhang San',
                    email:'[email protected]',
                },
                {
                    id:2,
                    Name: 'Li Si',
                    email:'[email protected]',
                },
                {
                    id:3,
                    Name: 'Wang Er',
                    email:'[email protected]',
                }
            ],
        }
    });
</script>

event processing

DOM events we usev-onInstructions, instructions have modifiers, soonThe directive has the following modifiers

  • Stop – call event.stoppropagation()
  • Prevent – call event. Preventdefault()
  • Capture – use capture mode when adding event listeners
  • Self – the callback is triggered only when the event is triggered from the listener bound element itself
  • {keycode | keyalias} – the callback is triggered only when the event is triggered from a specific key
  • Native – listens for native events of the component root element
  • Once – only one callback is triggered
  • Left – (2.2.0) triggered only when the left mouse button is clicked
  • Right – (2.2.0) triggered only when the right mouse button is clicked
  • Middle – (2.2.0) triggered only when the middle mouse button is clicked
  • Passive – (2.3.0) add listener in {passive: true} mode
<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 input binding

When working on projects, I often deal with forms, but it is worth mentioning thatWhen multiple choices are made, the type of bound value must be array, otherwise an error will be reported, otherwise recommendedformThe form uses objects so that the overall code looks simple and easy to operate.

<div id="app">
    <div class="container">
        <div class="main">
            <div class="row">
                < div class = "label" > Name: < / div >
                <div class="item"><input type="text" name="name" v-model="form.name" /></div>
            </div>
            <div class="row">
                < div class = "label" > gender: < / div >
                <div class="item">
                    < input type = "radio" name = "sex" V-model = "form. Sex" value = "1" / > male
                    < input type = "radio" name = "sex" V-model = "form. Sex" value = "0" / > female
                </div>
            </div>
            <div class="row">
                < div class = "label" > hobbies: < / div >
                <div class="item">
                    < input type = "checkbox" V-model = "form. Hobby" name = "hobby" value = "reading" > reading
                    < input type = "checkbox" V-model = "form. Hobby" name = "hobby" value = "swimming" > swimming
                    < input type = "checkbox" V-model = "form. Hobby" name = "hobby" value = "mountain climbing" > mountain climbing
                </div>
            </div>
            <div class="row">
                < div class = "label" > Introduction: < / div >
                <div class="item"><textarea v-model="form.intro"></textarea></div>
            </div>
            <div class="row">
                < button @ Click = "savedata" > submit < / 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>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Give each hair a name before it falls out~

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]