欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-26 14:38:03
一、生命后期 官网的图片说明: Vue的生命周期总结 二、数据绑定 1、数据绑定语法 【文本插值】 【HTML属性】 【绑定表达式】 【过滤器】 【指令】 2、计算属性(computed) 3、表单控制 【表单控件】 script部分 需要注意的是sel2val的赋值是int数组,可是在选择值得时候 ......

一、生命后期

 官网的图片说明:

【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],
    }
});

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

  需要注意的是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"
    }
},