【Vue】修饰符&表单提交方式&自定义组件
【Vue】修饰符&表单提交方式&自定义组件
- 一.事件处理器
-
- 1. stop
- 2. prevent
- 4. 按键修饰符
- 5. 表单案例
- 二.自定义组件
-
- 三.组件通信
- 1.父传子
- 2.子传父
一.事件处理器
1. stop
在事件处理中，使用 stop 可以阻止事件的进一步传播。当事件被触发后，调用 stop 方法可以停止事件的冒泡传播，从而防止其他父元素捕获该事件。
示例代码：
html
2. prevent
使用 prevent 可以阻止事件的默认行为。当事件被触发后，调用 event.preventDefault() 方法可以取消事件的默认行为，比如阻止表单的提交或者链接的跳转。
示例代码：
html
示例代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<style type="text/css">
.f30{
font-size: 30px;
}
.one{
background-color: red;
height: 400px;
width: 400px;
}
.two{
background-color: blue;
height: 300px;
width: 300px;
}
.three{
background-color: pink;
height: 200px;
width: 200px;
}
.four{
background-color: yellow;
height: 100px;
width: 100px;
}
style>
head>
<body>
<div id="app">
<div class="one" @click="f1">
<div class="two" @click.stop="f2">
<div class="three" @click.stop="f3">
<div class="four" @click.stop="f4">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:{
f1(){
alert("f1");
},
f2(){
alert("f2");
},
f3(){
alert("f3");
},
f4(){
alert("f4");
},
clickme(){
console.log(this.msg)
}
}
});
script>
body>
html>
用了stop后，冒泡被阻止了
4. 按键修饰符
按键修饰符可以方便地处理特定按键触发的事件。通过在事件处理器后面添加 .key 后缀，指定特定的按键来触发相应的事件。
顺便提一嘴，vue允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
示例代码：
html
5. 表单案例
绑定值与取值
示例代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<style type="text/css">
.f30{
font-size: 30px;
}
style>
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 address" :value="a.id">{{a.name}}option>
select>
<br>
爱好<span v-for="h in hobby" >
<input type="checkbox" v-model="mylike" name="mylike" :value="h.id">
{{h.name}}
span>
<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:0,
}],
sex:1,
hobby:[{name:'洗浴',id:1},
{name:'洗头',id:2},
{name:'大保健',id:3}],
mylike:[],
address:[{name:'湖南',id:1},
{name:'湖北',id:2},
{name:'福建',id:3}],
myaddr:null,
sign:null,
ok:false
};
},
methods:{
dosub(){
var obj={};
obj.name=this.name;
obj.pwd=this.pwd;
obj.sex=this.sex;
obj.address=this.myaddr;
obj.hobby=this.mylike;
obj.sign=this.sign;
console.log(obj);
}
}
});
script>
body>
html>
二.自定义组件
案例
自定义组件可以通过 Vue 的组件系统来进行封装和复用。下面是一个简单的自定义组件案例，实现了一个计数器。
上述代码定义了一个名为 Counter 的自定义组件，在模板中包含三个元素：两个按钮和一个用于显示计数值的 元素。通过绑定按钮的点击事件来实现计数器的增减功能，计数值保存在组件的 count 数据中。
三.组件通信
1.父传子
父组件可以通过 props 将数据传递给子组件。子组件通过定义 props 来接收来自父组件的数据。
示例代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<style type="text/css">
.f30{
font-size: 30px;
}
style>
head>
<body>
<div id="app">
{{msg}}
<my-button>my-button>
<br>
<my-button m='ks'n="10">my-button>
div>
<script type="text/javascript">
new Vue ({
el:'#app',
components:{
'my-button':{
props:['m','n'],
template:'',
data:function(){
return {
n:1
}
},
methods:{
clikeme(){
this.n++;
}
}
}
},
data(){
return {
msg:"11"
}
}
});
script>
body>
html>
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
`
2.子传父
示例代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<style type="text/css">
.f30{
font-size: 30px;
}
style>
head>
<body>
<div id="app">
{{msg}}
<my-button>my-button>
<br>
<my-button m='ks' @xxx='getParam'>my-button>
div>
<script type="text/javascript">
new Vue ({
el:'#app',
components:{
'my-button':{
props:['m'],
template:'',
data:function(){
return {
n:1
}
},
methods:{
clikeme(){
let name='刘兵';
let bname='看见你的是';
let price='白嫖';
this.$emit('xxx',name,bname,price)
}
}
}
},
data(){
return {
msg:"11"
};
},
methods:{
getParam(a,b,c){
console.log(a,b,c);
}
}
});
script>
body>
html>
