vue表单与生命周期
key
概述:vue采用的是“就地更新”原则,所以我们在v-for的时候要给每一条数据绑定一个key,作为唯一标识符,让vue根据key的条件做对比,一般情况下,我们使用id
双for
<p v-for="(item,index) in arr">
<span>名称:{{item.name}}</span>
<p>主演:<span v-for="i in item.z">{{i}}</span></p>
</p>
动态class
<!-- 1、:class="变量" -->
<span :class="back"></span>
<!-- 2、:class="[index%2==0?'green':'pink']" -->
<p v-for="(item,index) in arr" :class="[index%2==0?'green':'pink']">{{item}}</p>
<hr>
<!-- 3、 :class="{pink:true|false,red:true|false,green:true|false}"-->
<p v-for="(item,index) in arr" :class="{pink:index%3==0,red:index%3==1,green:index%3==2}"> {{item}}</p>
动态style
<p :style="pStyle"></p>
<p :style="{background: 'red',fontSize:'50px'}">天道酬勤</p>
form提交
1、在表单中,我们定义变量的时候,直接定义一个对象形式,他的key和后端要的字段保持一致,可以方便传参
2、v-model适用于所有的表单元素
<div >提交</button></div>
</div>
表单修饰符
.lazy 失去光标后才改变模型中的数据
.number 只能输入数字,但是作用不是很大(第一个字符就是字母)
.trim 去掉首尾空格
事件绑定
<!-- 1、vue通过v-on:来绑定事件,可以简写成@ -->
<button v-on:click="fn1()">按钮一</button>
<button @click="fn1()">按钮二</button>
<!-- 2、如果触发的方法不用传参,()可以省略 -->
<button @click="fn1">按钮三</button>
<!-- 3、如果只有一句逻辑代码,可以直接写在html中 -->
<button @click="n=n+3">+3</button>
event对象
<!-- 隐式参数:不写(),默认参数就是event -->
<button @click="getEvent1">按钮一</button>
<!-- 显示传参:写了(),那么$event就是event对象 -->
<button @click="getEvent2($event)">按钮二</button>
事件修饰符
.prevent 阻止默认事件
.stop 阻止冒泡
.up 上键
.dowm 下键
.left 左键
.right 右键
.enter 回车键
.self 触发元素是自己才触发
.capture 捕获
生命周期
// 创建之前 全都是undefined
beforeCreate() { }
// 创建完成 vue实例化完成,数据有了,但是el还是undefined
created() { }
// 挂载之前 找到了挂载点,但是{{}}、指令等都没有被解析
beforeMount() { }
// 挂载完成 数据解析完成,页面已经加载好了,DOM节点也有了。开启轮播图、开启倒计时、开启定时器、ajax请求
mounted() { }
// 更新之前
beforeUpdate() { }
// 更新完成
updated() { }
// 销毁之前 善后工作,清除定时器,清除倒计时
beforeDestroy() { }
// 销毁完成
destroyed() { }
vm.$destroy() 销毁
vm.$mount(el) 挂载
以上是 vue表单与生命周期 的全部内容, 来源链接: utcz.com/z/374685.html