目录
一、事件处理器
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>
