表單輸入綁定
使用 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>