[Vue.js learning] life cycle and data binding

1, Late life

 Official website Picture description of:

Life cycle summary of Vue

var app = new Vue({
  el:"#app",            
  beforeCreate: function(){
    console.log('1-beforeCreate Before initialization');
    //Load loading
  },
  created: function(){
    console.log('2-created Create completion');
     //Close loading
   },
   beforeMount: function(){
      console.log('3-beforeMount Before mounting');
   },
   mounted: function(){
      console.log('4-mounted After being mounted');
   },
   beforeUpdate: function(){
      console.log('5-beforeUpdate Before data update');
   },
   updated: function(){
      console.log('6-updated After being updated');
   },
   activated: function(){
      console.log('7-activated');
   },
   deactivated: function(){
      console.log('8-deactivated');
   },
   beforeDestroy: function(){
      console.log('9-beforeDestroy Before being destroyed');
   },
   destroyed: function(){
      console.log('10-destroyed After destruction');
   }
});

2, Data binding

1. Data binding syntax

[text interpolation]

<div id="app">{{ Name }}</div>

//script
var app = new Vue({
    el:"#app",
    data: {
        Name : 'Cutie'
    }
});

HTML attribute

<p v-bind:id="pId">Eternal bloom</p>
//Abbreviation,colon
<p :id="pId">Eternal bloom</p>

//script
var app = new Vue({
    el:"#app",
    data: {
        Name: "Cutie",
        pId: "wrn"
    }
});

Binding expression

{{ Num + 2 }}//Success
{{ Num < 5 ? 'Less than 5' : 'Greater than or equal to 5'}}//Success
{{ Name.split('').join('|') }}//Success
{{ var a = 2 }}//fail
{{ if(Num>2) { return 'dreadful' } }}//fail

//script
data: {
    Name: "Cutie",
    pId: "wrn",
    Num: 5
}

[filter]

//A filter
<p>{{ UserName | toUppercase }}</p>
//Multiple filters, passing the value of the previous filter to the next
<p>{{ UserName | toUppercase | addStr }}</p>
//Multi parameter filter, default parameter is the first value
<p>{{ UserName | manyPara('say', 'hello') }}</p>

//script
filters: {  
    toUppercase: function (value) {  
        return value.toUpperCase();  
    },
    addStr: function (value) {  
        return value + " Old lovely";   
    },
    manyPara: function (p1, p2, p3) {
        return p1+ ' ' + p2 + ' ' + p3;
    }
},

[instruction]

<button v-on:click="test(2, $event)">click</button>
//Abbreviation,@symbol
<button @click="test(2, $event)">click</button>

//script
methods:{
    test: function(a, event){    
        console.log(a);
        console.log(event);
    },
} 

2. Calculated attribute

{{ eYa }}
{{ act }}

//script,Can be used directly as a parameter
computed:{
    eYa: function(){
        return this.Num + 5;
    },
    act: {
        get: function(){
            return this.Num;
        },
        set: function(newVaue){
             this.Num += newVaue;
             console.log(newVaue)
        }
    }
} ,

3. Form control

[form control]

<input type="text" v-model="InpVal"/>
<p>input Value:<span>{{ InpVal }}</span></p>
<input type="radio" value="1" v-model="rdoVal"/>
<input type="radio" value="2" v-model="rdoVal"/>
<input type="radio" value="3" v-model="rdoVal"/>
<p>radio Value:<span>{{ rdoVal }}</span></p>
<input type="checkbox" value="stay" v-model="ckb1Val"/>
<p>Single election checkbox Value:<span>{{ ckb1Val }}</span></p>
<input type="checkbox" value="stay" v-model="ckb2Val"/>
<input type="checkbox" value="with" v-model="ckb2Val"/>
<input type="checkbox" value="me" v-model="ckb2Val"/>
<p>check checkbox Value:<span>{{ ckb2Val }}</span></p>
<select v-model="sel1Val">
    <option value="1">If there is a day</option>
    <option value="2">I'm leaving</option>
    <option value="3">You'll be like a motor</option>
    <option value="4">Look for me?</option>
</select>
<p>Single election select Value:<span>{{ sel1Val }}</span></p>
<select v-model="sel2Val" multiple>
    <option value="0">Will you keep looking</option>
    <option value="1">Will you always find death</option>
</select>
<p>check select Value:<span>{{ sel2Val }}</span></p>

Part script

var app = new Vue({
    el:"#app",
    data: {
        InpVal : "It's already sunk to the bottom of the cold valley",
        rdoVal : 2,
        ckb1Val : true,
        ckb2Val : ["stay", "me"],
        sel1Val : 3,
        sel2Val : [0, 1],
    }
});

It should be noted that the value assigned to sel2val is an int array, but when selecting the value, it will become a string array

[parameter characteristics]

. lazy, automatically convert the input to numerical type;

. number, automatically convert the input to a numeric type;

. trim, automatically filter the ending blank characters;

<input type="text" v-model.lazy="User.Name"/>{{User.Name}}
<input type="text" v-model.number="User.Size"/>{{User.Size}}
<input type="text" v-model.trim="User.Tel"/>{{User.Tel}}

//script
data: {
    User:{
        Name: "Lao Wang",
        Size: "18",
        Tel: "110"
    }
}

4. class and style

  [class]

<p :class="{'ClassA': isA, 'ClassB': !isA}">Boys hold on to the neckline</p>
<p class="ClassA" :class="BClass">Some feel like they can't say it</p>
<p :class="['AClass', 'BClass']">Some troubles make people scratch their heads</p>

//page
<p class="ClassB">Boys hold on to the neckline</p>
<p class="ClassA">Some feel like they can't say it</p>
<p class="AClass BClass">Some troubles make people scratch their heads</p>

//script
data: {
    isA: false,
    AClass: "ClassA",
    BClassb: "ClassB"
},

  [style]

Note that the border bottom variable is named borderBottom

<p :style="StyleInfo">Don't cry. These years have come</p>
<p :style="{color: StyleInfo.color}">Sorry, blind me</p>
<p :style="[StyleInfo, StylePlus]">No heart, just like idle people</p>

//page
<p style="color: red; font-size: 16px;">Don't cry. These years have come</p>
<p style="color: red;">Sorry, blind me</p>
<p style="color: red; font-size: 16px; border-bottom: 1px solid rgb(0, 0, 0);">No heart, just like idle people</p>

//script
data: {
    StyleInfo:{
        color: "red",
        fontSize: "16px",
    },
    StylePlus:{
        borderBottom: "1px solid #000"
    }
},

Tags: Javascript Vue Attribute less

Posted on Tue, 31 Mar 2020 16:52:30 -0700 by d-Pixie