目录
一、事件处理器
1.事件修饰符
.stop
.prevent
.capture
.self
.once
2.按键修饰符
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl、.alt、.shift、.meta
二、表单赋值与取值
三、自定义组件
1.组件介绍
2.局部组件
3.全局组件
4.组件通信
组件传参【父传子】
组件传参【子传父】
一、事件处理器
1.事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符
.stop
阻止单击事件冒泡,即停止事件在DOM树中的传播。
<button v-on:click.stop="doSomething">Click me</button>当按钮被点击时，事件不会继续向上冒泡，只会触发
doSomething方法。
.prevent
修饰符可以阻止事件的默认行为,提交事件不再重载页面
<form v-on:submit.prevent="submitForm"> <!-- form fields --> <button type="submit">Submit</button> </form>当表单被提交时，事件的默认行为（刷新页面）会被阻止，而是会触发
submitForm方法。
.capture
修饰符可以将事件监听器添加到捕获阶段，而不是冒泡阶段。
<div v-on:click.capture="doSomething">Click me</div>当点击
div元素时，事件会在捕获阶段触发doSomething方法。
.self
只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="handleClick"> <button>Click me</button> </div>只有当点击
div元素本身时，事件处理函数handleClick才会被触发。如果点击div内部的button元素，事件将不会被触发。
.once
修饰符只能让事件只触发一次。
<button v-on:click.once="doSomething">Click me</button>当按钮被点击时，
doSomething方法只会被触发一次。
注1：什么是事件冒泡?
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>插值</title> <!-- 导入工具 --> <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> <style type="text/css"> .one{ background-color: aqua; height: 25rem; width: 25rem; } .two{ background-color: beige; height: 18.75rem; width: 18.75rem; } .three{ background-color: blue; height: 12.5rem; width: 12.5rem; } .four{ background-color: blueviolet; height: 6.25rem; width: 6.25rem; } </style> </head> <body> <!-- 定义边界 --> <div id="app"> <div id="" class="one" @click="fun1"> <div class="two" @click="fun2"> <div class="three" @click="fun3"> <div class="four" @click="fun4"> </div> </div> </div> </div> </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return{ msg:"hello meinv", }; }, methods:{ fun1(){ alert("你是不是就想点我"); }, fun2(){ alert("你为什么点我"); }, fun3(){ alert("你怎么点我"); }, fun4(){ alert("你点我"); } } }); </script> </body> </html>
如何避免类似的冒泡呢？
我们可以在点击事件中添加我们的.stop阻止单击事件冒泡！！
<div id="" class="one" @click="fun1"> <div class="two" @click.stop="fun2"> <div class="three" @click.stop="fun3"> <div class="four" @click.stop="fun4"> </div> </div> </div>
2.按键修饰符
.enter
当用户按下回车键时触发事件。
<input v-on:keyup.enter="submitForm">当用户在输入框中按下回车键时，会触发submitForm方法。
.tab
当用户按下Tab键时触发事件。
<input v-on:keyup.tab="nextField">当用户在输入框中按下Tab键时，会触发nextField方法。
.delete
当用户按下删除键或退格键时触发事件。
<input v-on:keyup.delete="deleteItem">当用户在输入框中按下删除键或退格键时，会触发deleteItem方法。
.esc
当用户按下Esc键时触发事件。
<input v-on:keyup.esc="cancelAction">当用户在输入框中按下Esc键时，会触发cancelAction方法。
.space
当用户按下空格键时触发事件。
<button v-on:keyup.space="startGame">Start</button>当用户在按钮上按下空格键时，会触发startGame方法。
.up
当用户按下上箭头键时触发事件。
<input v-on:keyup.up="increaseValue">当用户在输入框中按下上箭头键时，会触发increaseValue方法。
.down
当用户按下下箭头键时触发事件。
<input v-on:keyup.down="decreaseValue">当用户在输入框中按下下箭头键时，会触发decreaseValue方法。
.left
当用户按下左箭头键时触发事件。
<input v-on:keyup.left="moveLeft">当用户在输入框中按下左箭头键时，会触发moveLeft方法。
.right
当用户按下右箭头键时触发事件。
<input v-on:keyup.right="moveRight">当用户在输入框中按下右箭头键时，会触发moveRight方法。
.ctrl、.alt、.shift、.meta
当用户按下对应的修饰键时触发事件。
<input v-on:keyup.ctrl="saveData">当用户在输入框中按下Ctrl键时，会触发saveData方法。
二、表单赋值与取值
表单赋值与取值综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入工具 -->
<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>
</head>
<body>
<div id="ctb">
<h1>表单赋值与取值</h1>
<div>
<label>账号：</label>
<input type="text" v-model="uname" placeholder="请输入账号">
</div>
<div>
<label>密码：</label>
<input type="password" v-model="upwd" placeholder="请输入密码">
</div>
<div>
<label>年龄：</label>
<input type="text" v-model.number="age" placeholder="请输入年龄">
</div>
<div>
<label>性别：</label>
<input type="radio" v-model="sex" value="1">男
<input type="radio" v-model="sex" value="2">女
</div>
<div>
<label>爱好：</label>
<div style="display: inline;" v-for="h in hobbies">
<input type="checkbox" :value="h.id" v-model="hobby" />{{h.name}}
</div>
</div>
<div>
<label>地区</label>
<select v-model="area">
<option value="">-- 请选择 --</option>
<option v-for="c in city" :value="c.id">{{c.name}}</option>
</select>
</div>
<div>
<label>备注：</label>
<textarea v-model="remark" placeholder="请输入注明"></textarea>
</div>
<div>
<input type="checkbox" v-model="agreed">是否已阅读并同意协议
</div>
<div>
<button @click="submit" :disabled="disabled">提交</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#ctb",
data: {
// 设置表单
uname: null,
upwd: null,
age: 18,
sex: 1,
hobbies: [{
id: '1',
name: 'music'
},
{
id: '2',
name: 'basketball'
},
{
id: '3',
name: 'travel'
}
],
hobby: [],
remark: null,
city: [{
id: "1",
name: "长沙"
},
{
id: "2",
name: "永州"
},
{
id: "3",
name: "道州"
},
{
id: "4",
name: "勾八"
},
{
id: "5",
name: "衡阳"
},
{
id: "6",
name: "大理"
}
],
area: null,
agreed: false,
disabled: true
},
watch: {
agreed: function(val) {
if (val) {
this.disabled = false;
} else {
this.disabled = true;
}
}
},
/* 获取表单内容 */
methods: {
submit: function() {
let data = {
uname: this.uname,
upwd: this.upwd,
age: this.age,
sex: this.sex,
hobby: this.hobby,
city: this.area,
remark: this.remark
}
console.log(data);
}
}
});
</script>
</body>
</html>
三、自定义组件
1.组件介绍
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
2.局部组件
在Vue实例中定义和使用局部组件非常简单。我们可以在Vue实例的components选项中定义组件，并在模板中使用它。
<div id="app">
<my-button>点我</my-button>
</div>
<script>
// 在Vue实例中定义局部组件
new Vue({
el: '#app',
components: {
"my-button": {
template: "<button>自定义组件</button>"
}
}
})
</script>
3.全局组件
全局组件可以在整个应用程序中使用，无需在每个Vue实例中重新定义。我们还可以在Vue实例之外定义全局组件，并在需要的地方使用它。
<script type="text/javascript">
Vue.component('my-button', {
//定义组件中的变量
props:['pp'],
template:'<button v-on:click="btn">{{pp}}打我</button>',
data:function(){
return {
}
}
});
</script>4.组件通信
Vue自定义事件是为组件间通信设计 ，vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。
不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称，建议使用“短横线分隔命名”
父Vue实例->Vue实例，通过prop传递数据
子Vue实例->父Vue实例，通过事件传递数据
组件传参【父传子】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值</title>
<!-- 导入工具 -->
<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>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<my-button m='嘿嘿'>点我</my-button>
<h1>组件通信---父传子</h1>
<my-button m='不要'>点我</my-button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
components:{
'my-button':{
props:['m'],
template:'<button @click="clickMe">{{m}}点击了{{n}}次</button>',
data:function(){
return{
n:1
}
},
methods:{
clickMe(){
this.n++;
}
}
}
},
data(){
return{
msg:"hello meinv"
};
}
});
</script>
</body>
</html>
组件传参【子传父】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件通信---子传父</title>
<!-- 导入工具 -->
<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>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h1>组件通信---子传父</h1>
<my-button m='不要' @ctb='getParam'>点我</my-button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
components:{
'my-button':{
props:['m'],
template:'<button @click="clickMe">{{m}}点击了</button>',
methods:{
clickMe(){
let book='我是你的四月天';
let price=90;
this.$emit('ctb',book,price)
}
}
}
},
data(){
return{
msg:"hello meinv"
};
},
methods:{
getParam(a,b){
console.log(a,b);
}
}
});
</script>
</body>
</html>
