【Vue.js学习】生命周期及数据绑定

一、生命后期

　官网的图片说明：

Vue的生命周期总结

var app = new Vue({

　　el:"#app",

　　beforeCreate: function(){

　　　　console.log('1-beforeCreate 初始化之前');

　　　　//加载loading

　　},

　　created: function(){

　　　　console.log('2-created 创建完成');

   　　//关闭loading

   },

   beforeMount: function(){

      console.log('3-beforeMount 挂载之前');

   },

   mounted: function(){

      console.log('4-mounted 被挂载之后');

   },

   beforeUpdate: function(){

      console.log('5-beforeUpdate 数据更新前');

   },

   updated: function(){

      console.log('6-updated 被更新之后');

   },

   activated: function(){

      console.log('7-activated');

   },

   deactivated: function(){

      console.log('8-deactivated');

   },

   beforeDestroy: function(){

      console.log('9-beforeDestroy 被销毁之前');

   },

   destroyed: function(){

      console.log('10-destroyed 销毁之后');

   }

});

二、数据绑定

1、数据绑定语法

　　【文本插值】

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

//script

var app = new Vue({

    el:"#app",

    data: {

        Name : '小可爱'

    }

});

　　【HTML属性】

<p v-bind:id="pId">永恒的绽放</p>

//缩写，冒号

<p :id="pId">永恒的绽放</p>

//script

var app = new Vue({

    el:"#app",

    data: {

        Name: "小可爱",

        pId: "wrn"

    }

});

　　【绑定表达式】

{{ Num + 2 }}//成功

{{ Num < 5 ? '小于5' : '大于等于5'}}//成功

{{ Name.split('').join('|') }}//成功

{{ var a = 2 }}//失败

{{ if(Num>2) { return '可怕' } }}//失败

//script

data: {

    Name: "小可爱",

    pId: "wrn",

    Num: 5

}

　　【过滤器】

//一个过滤器

<p>{{ UserName | toUppercase }}</p>

//多个过滤器，将前一个过滤器的值传给下一个

<p>{{ UserName | toUppercase | addStr }}</p>

//多参数过滤器，默认参数为第一个值

<p>{{ UserName | manyPara('say', 'hello') }}</p>

//script

filters: {

    toUppercase: function (value) {

        return value.toUpperCase();

    },

    addStr: function (value) {

        return value + " 老可爱了";

    },

    manyPara: function (p1, p2, p3) {

        return p1+ ' ' + p2 + ' ' + p3;

    }

},

　　【指令】

<button v-on:click="test(2, $event)">点击</button>

//缩写，@符

<button @click="test(2, $event)">点击</button>

//script

methods:{

    test: function(a, event){

        console.log(a);

        console.log(event);

    },

}

2、计算属性（computed）

{{ eYa }}

{{ act }}

//script,可以直接当参数使用

computed:{

    eYa: function(){

        return this.Num + 5;

    },

    act: {

        get: function(){

            return this.Num;

        },

        set: function(newVaue){

             this.Num += newVaue;

             console.log(newVaue)

        }

    }

} ,

3、表单控制

　　【表单控件】

<input type="text" v-model="InpVal"/>

<p>input的值：<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的值：<span>{{ rdoVal }}</span></p>

<input type="checkbox" value="stay" v-model="ckb1Val"/>

<p>单选checkbox的值：<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>复选checkbox的值：<span>{{ ckb2Val }}</span></p>

<select v-model="sel1Val">

    <option value="1">如果有天</option>

    <option value="2">我走了</option>

    <option value="3">你会像马达那样</option>

    <option value="4">找我么</option>

</select>

<p>单选select的值：<span>{{ sel1Val }}</span></p>

<select v-model="sel2Val" multiple>

    <option value="0">会一直找么</option>

    <option value="1">会一直找到死么</option>

</select>

<p>复选select的值：<span>{{ sel2Val }}</span></p>

script部分

var app = new Vue({

    el:"#app",

    data: {

        InpVal : "早已沉入冰冷的谷底",

        rdoVal : 2,

        ckb1Val : true,

        ckb2Val : ["stay", "me"],

        sel1Val : 3,

        sel2Val : [0, 1],

    }

});

　　需要注意的是sel2val的赋值是int数组，可是在选择值得时候，会变成string数组

　　【参数特性】

　　.lazy，自动将输入转化为数值类型；

　　.number，自动将输入转化为数值类型；

　　.trim，自动过滤收尾空白字符；

<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: "老王",

        Size: "18",

        Tel: "110"

    }

}

4、class与style

　　【class】

<p :class="{'ClassA': isA, 'ClassB': !isA}">男孩抓紧领口</p>

<p class="ClassA" :class="BClass">有些感觉是说不出口</p>

<p :class="['AClass', 'BClass']">有些烦恼让人抓破了头</p>

//页面

<p class="ClassB">男孩抓紧领口</p>

<p class="ClassA">有些感觉是说不出口</p>

<p class="AClass BClass">有些烦恼让人抓破了头</p>

//script

data: {

    isA: false,

    AClass: "ClassA",

    BClassb: "ClassB"

},

　　【style】

　　注意，border-bottom变量命名为borderBottom

<p :style="StyleInfo">不要哭，这些年都过来了</p>

<p :style="{color: StyleInfo.color}">对不起，盲目的我</p>

<p :style="[StyleInfo, StylePlus]">没有心，只像闲人</p>

//页面

<p style="color: red; font-size: 16px;">不要哭，这些年都过来了</p>

<p style="color: red;">对不起，盲目的我</p>

<p style="color: red; font-size: 16px; border-bottom: 1px solid rgb(0, 0, 0);">没有心，只像闲人</p>

//script

data: {

    StyleInfo:{

        color: "red",

        fontSize: "16px",

    },

    StylePlus:{

        borderBottom: "1px solid #000"

    }

},

巴特西

【Vue.js学习】生命周期及数据绑定

最新文章

热门文章