一.v-model的使用
<!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 src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>
姓名：
<input type="text" v-model.trim="username">
</p>
<p>
电话：
<input type="text" v-model.number="phone">
</p>
<p>
密码：
<input type="password" v-model="password">
</p>
<p>
性别:男
<input type="radio" value="0" v-model="sex">女
<input type="radio" value="1" v-model="sex">保密
<input type="radio" value="2" v-model="sex">
</p>
<p>
爱好：敲代码
<input type="checkbox" value="01" v-model="hobby">睡觉
<input type="checkbox" value="02" v-model="hobby">篮球
<input type="checkbox" value="03" v-model="hobby">
</p>
<p>
意向城市:
<select v-model="city">
<option value="p01">深圳</option>
<option value="p02">杭州</option>
<option value="p03">上海</option>
<option value="p04">北京</option>
</select>
</p>
<p>
个人特长：
<textarea v-model.lazy="desc" cols="30" rows="10"></textarea>
</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
username:"",
phone:"",
password:"",
sex:'0',
hobby:['02'],
city:"p02",
desc:""
}
})
</script>
</body>
</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 src="js/vue.js"></script>
<style>
.father {
width: 300px;
height: 200px;
border: 1px solid red;
}
.son {
width: 100px;
height: 100px;
border: 1px solid purple;
}
</style>
</head>
<body>
<div id="app">
<div class="father" @click="fatherFun">
父亲
<!-- stop阻止事件冒泡 -->
<div class="son" @click.stop="sonFun">儿子</div>
</div>
<div>
<!-- prevent阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="aFun">百度一下</a>
</div>
<div class="father" @click="fatherFun">
父亲
<a href="https://www.baidu.com" @click.stop.prevent="aFun">百度一下</a>
</div>
<h3>事件捕获</h3>
<div class="father" @click.capture="fatherFun">
父亲
<div class="son" @click.capture="sonFun">儿子</div>
</div>
<!-- self -->
<h3>self</h3>
<div class="father" @click.self="fatherFun">
父亲
<div class="son" @click="sonFun">儿子</div>
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
},
methods: {
sonFun() {
console.log('儿子事件')
},
fatherFun() {
console.log("父亲事件")
},
aFun() {
console.log("阻止默认事件")
}
}
})
</script>
</body>
</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 src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.13.up="keyCodeFun">
</div>
<script>
let app = new Vue({
el:"#app",
data:{
},
methods:{
keyCodeFun(){
console.log("执行enter了")
}
}
})
</script>
</body>
</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 src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.sky="fun">
</div>
<script>
Vue.config.keyCodes.sky = 83
let app = new Vue({
el:"#app",
data:{
},
methods:{
fun(){
console.log("自定义按键修饰符")
}
}
})
</script>
</body>
</html>
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
