表单元素
单选
<!-- 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的名字即可