vue的表单数据绑定、修饰符、声明周期和过渡动画

vue的表单数据绑定、修饰符、声明周期和过渡动画

1.表单元素：input 单选，多选，下拉 下拉多选 文本域 提交

1.1单选
<!-- radio:若要互斥，那么需要通过value绑定属性值，此时v-model会通过value值找到对应的属性进行绑定 -->
性别:<input type="radio"  v-model='sex' value="男">男
	<input type="radio"  v-model='sex' value="女">女

 <div id="app">
     	1.2多选
         <input type="checkbox" v-model='checked'>{{checked}}
		1.3下拉
         <select  v-model='hobby'>
            <option value="" disabled>请选择</option>
             <option value="吃饭">吃饭</option>
             <option value="睡觉">睡觉</option>
             <option value="打豆豆">打豆豆</option>
         </select>
         爱好:{{hobby}}
		1.4下拉多选
         <!-- multiple：实现下拉菜单的多选，按住alt或者shitf键进行多选 -->
     	 <!-- disabled：禁止选择 -->
         <select multiple  v-model='hobby1'>
            <option value="" disabled>请选择</option>
             <option value="吃饭">吃饭1</option>
             <option value="睡觉">睡觉1</option>
             <option value="打豆豆">打豆豆1</option>
         </select>
         爱好:{{hobby1}}

         <!-- 总结:对于checkbox来讲，默认的初始值类型为数组，如果是其他数据类型，则会直接转换为布尔类型 -->
         <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'>打豆豆
         爱好:{{hobby2}}
    </div>

当需要选择的选项是单个的时候，Vue中data数据的hobby为空字符串：“”，当需要选择的选项是多个的时候，Vue中data数据的hobby为空数组：[]。

2.修饰符

2.1事件修饰符：stop, prevent, once, self, capture
stop：阻止事件的冒泡；
prevent：阻止事件的默认行为；
once：事件只触发一次；
self：只有自己才能触发自身的事件，但并不影响本身的冒泡事件；
capture：事件捕获。

<--!直接在元素绑定的事件后面添加.修饰符即可-->  
<div class="outer"  @click.self = 'outer'></div>

2.2键盘修饰符
注：除特殊按键（如上下左右键，tab，shift，alt，ctrl等）外，英文字母和数字等需要用阿斯玛值进行绑定

<--!直接在元素绑定的事件后面添加.修饰符即可-->  
<input type="text" @keydown.up = 'up' placeholder="向上">
<input type="text" @keydown.down = 'down' placeholder="向下">
<input type="text" @keydown.right = 'right' placeholder="向右">
<input type="text" @keydown.left = 'left' placeholder="向左">
 
methods: {
          up(){
              console.log('触发向上事件');
          },
          down(){
              console.log('触发down事件');
          },
          right(){
              console.log('触发right事件');
          },
          left(){
              console.log('触发left事件');
          }
        }

2.3鼠标修饰符：left， middle， right

<input type="text" @click.left = 'left' placeholder="左键">
<input type="text" @click.middle = 'middle' placeholder="中间键">
<input type="text" @click.right.prevent = 'right' placeholder="右键">
methods: {
         left(){
            console.log('触发left事件');
         },
         middle(){
            console.log('middle');
         },
         right(){
            console.log('触发right事件');
         }
 		}   

2.4表单修饰符：lazy， number， trim
lazy：光标离开输入之后会更新数据；
number：只判断第一个字符是否是数字，如果是数组则返回的是number类型，否则返回string类型；
trim：过滤首尾空格，是过滤用户输入的内容，如果是初始值中包括空格，则trim不管用。

<--!在v-model后面添加.修饰符即可-->   
<input type="text" v-model.lazy='msg'>{{msg}}
<input type="text" v-model.number='content'>{{typeof(content)}}
<input type="text" v-model.trim='message'>{{message.length}}

3.vue生命周期

钩子函数:
beforeCreate：创建之前，指的是new Vue() 此时的el 还有data都是undefined；
created：创建完成，此时的el是undefined，data已经获取到数据；
beforeMount：挂载之前，此时的el是div 但是{{}}不能被解析， data已经获取到数据；
mounted：挂载完成,此时的el已经加载完所有数据；
beforeUpdate：更新之前，此时指的是页面的更新，更新前后数据是一致的；
updated：更新按成，数据已经是最新的；
beforeDestory：销毁之前；
destroyed：销毁完成,此时的vm实例已经被销毁 双向绑定数据不能使用。

4.动画

4.1给需要添加动画的元素用标签包裹起来

4.2设置样式
在进入/离开的过渡中，Vue内置了6个类名：
v-enter ：进入过渡的开始状态。
v-enter-active ：进入过渡生效时的状态。
v-enter-to ：进入过渡的结束状态。
v-leave ：离开过渡的开始状态。
v-leave-active ：离开过渡生效时的状态。
v-leave-to：离开过渡的结束状态。

 <style>
       .box{
            width: 100px;
            height: 100px;
            background: red;
        }
        .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;
        }
    </style>

<div id="app">
    <transition>
    <div class="box" v-show='isShow'></div>
    </transition>
    <button @click = 'fade'>点击淡入淡出</button>
  </div>

4.3如果页面中有多个元素需要添加动画，需要给transition添加name属性，同时修改style中的样式，把v-换为name的名字即可

  <transition name='aa'>
            <div class="box" v-show='isShow'>aaaa</div>
   </transition>
   
   在style中写：
   .aa-enter{
            opacity: 0;
            transform: rotate(360deg);
        }   
        .aa-enter-active{
            transition: all 5s;
        }
        .aa-enter-to{
            opacity: 1;
            /* transform: rotate(360deg); */
        }
        /* .aa-leave{
            transform: rotate(360deg);
        } */
        .aa-leave-active{
            transition: all 5s;
        }
        .aa-leave-to{
            transform: rotate(360deg);
        }

4.4引入animate.css库

    <link
       rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.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>

注意：需要添加什么类名，直接去官网查看，一定要把基类添加上

4.5案例小球动画

<div id="app">
       <button @click = 'fade'>点击淡入淡出</button>
       <transition 
           @before-enter = 'beforeEnter'
           @enter = 'enter'
           @after-enter = 'afterEnter'
        >
          <div class="box" v-show='isShow'></div>
        </transition>
</div>

	methods: {
            fade(){
                this.isShow = !this.isShow
            },
            // el:指的是当前的这个元素，在这指的就是小球
            beforeEnter(el){
                el.style.transform = 'translate(0,0)'
            },
            enter(el,done){
                // offsetWidth用来触发动画。若不写则无法执行动画效果。用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
            }
		}