vue之表单元素，修饰符，生命周期，动画

表单元素

单选

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

多选

 <div id="app">
         <input type="checkbox" v-model='checked'>{{checked}}

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


         <!-- multiple   实现下拉菜单的多选 -->
         <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>

 data:{
     checked:true,
     hobby:[],
     hobby1:[],
     hobby2:{},

},

修饰符

• 事件修饰符
  stop(阻止事件冒泡）
  prevent（阻止事件的默认行为）
  capture（阻止事件捕获）
  once（只触发一次）
  self（只能自己触发自己）

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

• 键盘修饰符

 <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="向左">

• 鼠标修饰符

<input type="text" @click.left = 'left' placeholder="左键">
<input type="text" @click.middle = 'middle' placeholder="中间键">
<input type="text" @click.right.prevent = 'right' placeholder="右键">

• 表单修饰符
  lazy:光标离开输入之后会更新数据
  trim:过滤首尾空格，是过滤用户输入的内容

 <!-- lazy:光标离开输入之后会更新数据 -->
 <input type="text" v-model.lazy='msg'>{{msg}}
 <!-- number:只判断第一个字符是否是数字，如果是数组则返回的是number类型，否则返回string类型 -->
 <input type="text" v-model.number='content'>{{typeof(content)}}
 <!-- trim:过滤首尾空格，是过滤用户输入的内容，如果是初始值中包括空格，则trim不管用 -->
 <input type="text" v-model.trim='message'>{{message.length}}

生命周期（钩子函数）

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

动画

• 给需要添加动画的元素用标签包裹起来
• 设置样式 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>

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