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