表单输入绑定
使用 v-model 对表单数据自动收集
1) text/textarea
2) checkbox
3) radio
4) select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
</head>
<body>
<div id="demo">
<form @submit.prevent="handleSubmit">
<span>用户名: </span> <input type="text" v-model="user.username"><br>
<span>密码: </span> <input type="password" v-model="user.pwd"><br>
<span>性别: </span> <input type="radio" id="female" value="female" v-model="user.sex">
<label for="female">女</label>
<input type="radio" id="male" value="male" v-model="user.sex">
<label for="male">男</label><br>
<span>爱好: </span> <input type="checkbox" id="basket" value="basketball" v-model="user.likes">
<label for="basket">篮球</label> <input type="checkbox" id="foot" value="football" v-model="user.likes">
<label for="foot">足球</label> <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
<label for="pingpang">乒乓</label><br>
<span>城市: </span>
<select v-model="user.cityId">
<option value="">未选择</option>
<option v-for="city in allCitys" :value="city.id"> {{ city.name }} </option>
</select><br>
<span>介绍: </span> <textarea v-model="user.desc" rows="10"></textarea><br><br> <input type="submit"
value="注册">
</form>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#demo',
data: {
user: {
username: '',
pwd: '',
sex: 'female',
likes: [],
cityId: '',
desc: '',
},
allCitys: [{
id: 1,
name: 'BJ'
}, {
id: 2,
name: 'SZ'
}, {
id: 4,
name: 'SH'
}],
},
methods: {
handleSubmit(event) {
alert(JSON.stringify(this.user))
}
}
})
</script>
</html>
过渡&动画
vue 动画的理解
1) 操作 css 的 trasition 或 animation
2) vue 会给目标元素添加/移除特定的 class
3) 过渡的相关类名
xxx-enter-active: 指定显示的
transition xxx-leave-active: 指定隐藏的
transition xxx-enter/xxx-leave-to: 指定隐藏时的样式
基本过渡动画的编码
1) 在目标元素外包裹<transition name="xxx">
2) 定义 class 样式
指定过渡样式:
transition 指定隐藏时的样式:
opacity/其它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
/* 可以设置不同的进入和离开动画 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="demo1"> <button @click="show = !show"> Toggle1 </button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<div id="demo2"> <button @click="show = !show"> Toggle2 </button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#demo1',
data: {
show: true
}
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
<style>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="test2"> <button @click="show = !show">Toggle show</button> <br>
<transition name="bounce">
<p v-if="show" style="display: inline-block">Look at me!</p>
</transition>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#test2',
data: {
show: true
}
})
</script>
</html>