- controlador de eventos
- Estudio de caso completo de formularios.
- Comunicación de componentes
1. Controlador de eventos
Función de implementación: resulta que cada vez que hace clic en la capa exterior del color más interno, aparecerá varias veces según la capa. Después de agregar @click.stop, solo aparecerá una vez, independientemente de qué capa sea; Originalmente, después de hacer clic en "Hacer clic en mí" varias veces, se mostrarían puntos en el fondo. Después de algunos clics, no importa cuántas veces haga clic después de agregar @click.once, solo se mostrará una vez en el fondo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>事件处理</title>
<style type="text/css">
.one{
background-color: red;
height: 400px;
width: 400px;
}
.two{
background-color: blue;
height: 300px;
width: 300px;
}
.three{
background-color: yellow;
height: 200px;
width: 200px;
}
.four{
background-color: pink;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="one" @click.stop="fun1">
<div class="two" @click.stop="fun2">
<div class="three" @click.stop="fun3">
<div class="four" @click.stop="fun4"></div>
</div>
</div>
</div>
<input :value="msg"/>
<button @click.once="clickMe">点我</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
msg:'hello 小兵',
};
},
methods:{
fun1(){
alert("fun1");
},
fun2(){
alert("fun2");
},
fun3(){
alert("fun3");
},
fun4(){
alert("fun4")
},
clickMe(){
console.log(this.msg)
}
}
});
</script>
</body>
</html>
2. Caso integral de forma
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>表单综合案例</title>
</head>
<body>
<div id="app">
姓名：<input name="name" v-model="name"/><br />
密码：<input type="password" v-model="pwd"/><br>
性别：<span v-for="s in sexList">
<input type="radio" name="sex" v-model="sex" :value="s.id"/>{
{s.name}}
</span><br />
籍贯：<select name="myAddr" v-model="myAddr">
<option v-for="a in adress" :value="a.id">{
{a.name}}</option>
</select><br>
爱好：<div v-for="h in hobby" >
<input type="checkbox" name="myLike" v-model="myLike" :value="h.id"/>{
{h.name}}
</div> <br />
个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea><br>
同意：<input type="checkbox" v-model="ok"/><br>
<button v-show="ok" @click="dosub">提交</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
name:'小兵',
pwd:'123456',
sexList:[{
name:'男',id:1
},{
name:'女',id:2
},{
name:'未知',id:3
}],
sex:1,
hobby:[{
name:'保健',id:1
},{
name:'理发',id:2
},{
name:'洗头',id:3
},{
name:'养生',id:4
}],
myLike:[],
adress:[{
name:'湖南',id:1
},{
name:'陕西',id:2
},{
name:'江西',id:3
},{
name:'哈尔滨',id:4
}],
myAddr:null,
sign:null,
ok:false
};
},
methods:{
dosub(){
var obj={};
obj.name=this.name;
obj.pwd=this.pwd;
obj.sex=this.sex;
obj.adress=this.adress;
obj.love=this.myLove;
obj.sign=this.sign;
console.log(obj);
}
}
});
</script>
</body>
</html>
3. Comunicación de componentes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>组件传参父传子</title>
</head>
<body>
<div id="app">
<p>自定义组件</p>
<my-button>xx</my-button>
<p>组件通信父传子</p>
<my-button ma='ss'></my-button>
<p>组件通信父传子2</p>
<my-button ma='ss' n="10"></my-button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
components:{
'my-button':{
props:['ma'],
template:'<button @click="clickMe">被{
{ma}}点击了{
{n}}次</button>',
data:function(){
return{
n:1
}
},
methods:{
clickMe(){
this.n++;
}
}
},
},
data(){
return{
msg:'hello 小兵'
};
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>组件传参子传父</title>
</head>
<body>
<div id="app">
<p>组件通信子传父</p>
<my-button ma='ss' @xxx="getParam"></my-button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
components:{
'my-button':{
props:['ma'],
template:'<button @click="clickMe">被{
{ma}}点击了</button>',
data:function(){
return{
n:1
}
},
methods:{
clickMe(){
let name='溜冰';
let bname='芊芊来了';
let price='免费';
this.$emit('xxx',name,bname,price)
}
}
},
},
data(){
return{
msg:'hello 小兵',
}
},
methods:{
getParam(a,b,c){
console.log(a,b,c);
}
}
});
</script>
</body>
</html>