表单元素--修饰符--生命周期--动画

一、表单元素

1. 单选，通过v-model绑定同一个属性，设置value值。

性别:<input type="radio" v-model='sex' value="男">男
<input type="radio" v-model='sex' value="女">女

2. 多选，通过v-model绑定同一个属性，设置value值。在data中设置hobby2属性初始值为[ ]。

<input type="checkbox" value="唱歌" v-model='hobby2'>唱歌
<input type="checkbox" value="跳舞" v-model='hobby2'>跳舞
<input type="checkbox" value="画画" v-model='hobby2'>画画
<input type="checkbox" value="打豆豆" v-model='hobby2'>打豆豆

3. 下拉菜单，给select设置v-model。

<select v-model='hobby'>
　　<option value="" disabled>请选择</option>
　　<option value="吃饭">吃饭</option>
　　<option value="睡觉">睡觉</option>
　　<option value="打豆豆">打豆豆</option>
</select>

4.多选下拉框，给select添加multiple属性，并设置v-model。在data中设置hobby属性初始值为[ ]。

<select multiple v-model='hobby1'>
　　<option value="" disabled>请选择</option>
　　<option value="吃饭">吃饭1</option>
　　<option value="睡觉">睡觉1</option>
　　<option value="打豆豆">打豆豆1</option>
</select>

5. 解决闪烁问题：

　　[v-cloak]{

　　　　display:none;

　　}

二、修饰符

1.事件修饰符：

　　stop (阻止冒泡）； prevent（阻止默认行为）； capture（事件捕获）；

　　once（只触发一次）； self（只能自己触发自己）；

2. 键盘修饰符：

　　事件： keydown,  keyup

　　up,  down,  right,  left,  delete,  enter

3. 鼠标修饰符：

　　事件： click

　　left（左击）；  right（右击）；  middle（中键）；

4. 表单修饰符：

　　lazy: 输入框失去焦点之后才会更新数据；

　　number：判断第一个字符是否是数字，如果是则返回number类型，否则返回string类型

　　trim：过滤首尾空格，过滤用户输入的内容，不过滤初始值

三、Vue生命周期

钩子函数：

　　beforeCreate，创建之前，指new vue()，el, data 都是undefined；

　　created，创建完成，el为undefined， data已经获得数据；

　　beforeMount，挂载之前，el为div，但数据仍为{{msg}}，data 已经获取到数据；

　　mounted，挂在完成，{{msg}}已经加载完成；

　　beforeUpdate，更新之前，指页面的更新，更新前后数据是一致的；

　　updated，更新完成；

　　beforeDestroy，销毁之前；

　　destroyed：销毁完成，vm实例已经销毁，双向数据绑定不再生效。

四、动画

1. 将需要创建动画的元素用 <transition></transition>标签包起来；

2. 设置样式，v-enter;  v-enter-active;  v-enter-to;  v-leave;  v-leave-active;  v-leave-to;

.v-enter{
　　opacity: 0;
} 
.v-enter-active{
　　transition: all 2s;
}
.v-enter-to{
　　opacity: 1;
}
.v-leave{
　　opacity: 1;
}
.v-leave-active{
　　transition: all 2s;
}
.v-leave-to{
　　opacity: 0;
}

<transition>
　　<div class="box" v-show='isShow'></div>
</transition>

3. 页面中有多个元素需要添加动画时，给 transition添加name属性，将v-改为name的名字。

<transition name='aa'>
　　<div class="box" v-show='isShow'>aaaa</div>
</transition>

4. 引入animate.css库，需带前缀animate__animated；

<transition 
enter-active-class='animate__animated animate__rubberBand'
leave-active-class='animate__animated animate__backOutLeft'
>
　　<div class="box" v-show='isShow'></div>
</transition>

5.动画的方法

<transition 
@before-enter = 'beforeEnter'
@enter = 'enter'
@after-enter = 'afterEnter'
>
　　<div class="box" v-show='isShow'></div>
</transition>

在methods中设置beforeEnter, enter, afterEnter方法，enter方法中必须设置offset / scroll / client系列来触发动画，在最后使用done()方法来触发afterEnter()方法。

methods: {
　　fade(){
　　　　this.isShow = !this.isShow
　　},
　　// el:指的是当前的这个元素，在这指的就是小球
　　beforeEnter(el){
　　　　el.style.transform = 'translate(0,0)'
　　},
　　enter(el,done){
　　　　// 这是用来触发动画,如果不写动画就没办法执行 用offset或者scroll还有client系列均可
　　　　el.offsetWidth;
　　　　// 小球的终止位置
　　　　el.style.transform = 'translate(500px,400px)'
　　　　// 小球的运动时间
　　　　el.style.transition = 'all 2s'
　　　　// 此时这个done方法就是用来触发afterEnter函数的
　　　　done()
　　},
　　afterEnter(el){
　　　　this.isShow = !this.isShow
　　}