02Vue表单数据绑定、修饰符和**生命周期**

02Vue表单数据绑定、修饰符和生命周期

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 id="app">
    <h3>学员信息</h3>
    <div>姓名：<input type="text" v-model="user.name"></div>
    <div>性别：
      <input type="radio" name="sex" value="0" v-model="user.sex">男
      <input type="radio" name="sex" value="1" v-model="user.sex">女
    </div>
    <div>
      电话：<input type="text" v-model="user.tel">
    </div>
    <div>密码：<input type="text" v-model="user.pass"></div>
    <div>确认密码：<input type="text" v-model="enterPass"></div>
    <div>
      专业：
      <select v-model="user.job">
        <option value="web">前端工程师</option>
        <option value="java">java工程师</option>
        <option value="php">php工程师</option>
      </select>
    </div>
    <div>
      爱好：
      <input type="checkbox" name="hobby" value="sing" v-model="user.hobby">唱歌
      <input type="checkbox" name="hobby" value="dancing" v-model="user.hobby">跳舞
      <input type="checkbox" name="hobby" value="playing" v-model="user.hobby">打游戏
      <input type="checkbox" name="hobby" value="codding" v-model="user.hobby">敲代码
    </div>
    <div>
      证书：
      <select multiple v-model="user.cert">
        <option value="erji">计算机二级</option>
        <option value="siji">英语四级</option>
        <option value="liuji">英语六级</option>
      </select>
    </div>
    <div>
      备注：
      <textarea cols="30" rows="10" v-model="user.des"></textarea>
    </div>
    <div><input type="checkbox" v-model="isTrue">是否同意协议</div>
    <div><button @click="submit()">提交</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) 挂载

面试题

1、Vue双向数据绑定的原理
2、常用的修饰符有哪些，他们的作用
3、Vue的生命周期
4、Vue生命周期中各个钩子函数分别在什么场景下执行

HOME

1、背面试题
3、home作业

一级分类 first_cateid eg:“1” 选项：家用电器-0、美妆护肤-1、电子产品-2
二级分类 second_cateid eg:“精华” 选项：精华-精华、爽肤水-爽肤水、美容仪-美容仪
商品名称 goodsname eg:“SK2神仙水”
价格 price eg:“999”
市场价格 market_price eg:“1099”
商品规格 specsid eg:“0” 选项：颜色-“0” 大小-“1” 尺寸-“2”
商品属性 specsattr eg:[“红色”,“黄色”] 选项：红色-红色，黄色-黄色 绿色-绿色
是否新品 isnew eg:“1” 选项：是-“1” 否-“0”
是否热卖 ishot eg:“1” 选项：是-“1” 否-“0”
状态 status eg:true 选项：开-true 关-false