今日份分享内容
首先让我们来把页面搭建完毕，页面效果如图：
页面代码块展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>1、事件处理器</title>
<style type="text/css">
.red{
width: 400px;
height: 400px;
background-color: red;
}
.yellow{
width: 300px;
height: 300px;
background-color: yellow;
}
.blue{
width: 200px;
height: 200px;
background-color: blue;
}
.green{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<div class="red" @click="red">
<div class="yellow" @click="yellow">
<div class="blue" @click="bule">
<div class="green" @click="green"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
msg:'hello,我是一杯咖啡！'
}
},
methods:{
red(){
alert('red');
},
yellow(){
alert('yellow');
},
bule(){
alert('bule');
},
green(){
alert('green');
}
}
})
</script>
</body>
</html>
那么现在就正式进入今日的分享内容吧！
一、事件处理器
1、阻止单击事件冒泡
页面解析图：四个div嵌套而成
如上图、代码所示，是由四个div标签嵌套而成的，四个div标签对应了四个颜色也分别对应了四个点击事件，点击不同的颜色会出现不同的弹出内容，由于使用div一个套着一个的，也就是由四个正方形叠加起来了，如果我点击最上面的绿色那么也就会从上到下依次弹出绿色>蓝色>黄色>红色四个点击事件所对应的内容，那么问题来了，如果只想让所点击的绿色弹出内容应该怎么办呢？
答案：Vue通过由点(.)表示的指令后缀来调用修饰符。
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
什么是冒泡事件？ 如图所示：
这样就只会触发绿色部分的点击事件了。
2、只点击一次
在客户使用某个查询功能的时候，当网络缓慢的时候，下意识的可能会多次点击那个查询的按钮，对于客户而言觉得并没什么，但是对于服务端来说，就有点类似于刻意攻击，因为当每点击一次按钮，就会向后台数据发送一次请求，就会抢占服务器的资源，那么我们作为开发者应该可以怎样做呢？
答案：Vue通过由点(.)表示的指令后缀来调用修饰符。
<!-- 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
效果图展示： 点击确定之后就不会再弹出内容了
3、按键修饰符
按键修饰符顾名思义也就是跟你的键盘绑定的事件。
例如回车键：
效果展示： 光标移入文本框内点击回车键就可以弹出窗口。
事件处理器的知识汇总 ：
事件修饰符
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
Vue为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
好啦，事件处理器这一节的分享内容就介绍到这里，进入第二节~
二、Vue自定义组件
1、组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
2、自定义组件
自定义组件是什么？
自定义组件就是自己设置标签，然后实现它。后面我将会给大家分享如何使用别人的组件，比如之后的ElementUI里就封装了很多的组件，如果有学前端的朋友们，在自定义组件这一块是需要更加深入了解的喔！
本次的案例：实现自定义按钮组件 Vue.component
所以接下来有两种传参方式，给我们的自定义组件进行传值。
①父传子（父组件 传参 给 子组件）
props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"
②子传父（子组件 传参 给 父组件）
$emit是子组件用来传递数据的
自定义组件知识总结：
父传子：props
子传父（触发事件）：$emit(eventName)全局和局部组件
全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
注1：Vue自定义事件是为组件间通信设计
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
父Vue实例->Vue实例，通过prop传递数据
子Vue实例->父Vue实例，通过事件$emit传递数据注2：事件名
不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
建议使用“短横线分隔命名”，例如：three-click
三、表单综合案例
在Vue中创建 表单提交
<!DOCTYPE html>
<html>
<head>
<!-- 导入依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 创建一个多功能表单 -->
姓名：<input type="text" v-model="uname"/><br>
密码：<input type="password" v-model="pwd"/><br>
年龄：<input type="text" v-model="age"/><br>
性别：<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女<br>
爱好：
<div v-for="l in likes">
<input v-model="hobby" type="checkbox" :value="l.id"/>{{l.name}}
</div><br>
英语等级：
<select v-model="selectedVal">
<option v-for="e in englishs" :value="e.id">{{e.name}}</option>
</select><br>
<input @click="show" type="checkbox" />
<input v-show="showFlag" @click="sub" type="button" value="ok" />
<div></div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data() {
return {
uname:null,
pwd:null,
age:null,
sex:1,
likes:[ //爱好的数据源
{id:1,name:'篮球'},
{id:2,name:'足球'},
{id:3,name:'桌球'},
{id:4,name:'乒乓球'}
],
englishs:[ //英语的数据源 下拉框
{id:1,name:'优'},
{id:2,name:'良'},
{id:3,name:'差'}
],
hobby:[],//用来存放选中的爱好 比如1,3
selectedVal:0,
showFlag:false
}
},
methods:{
show() {
this.showFlag = true;
},
sub(){
// 后续都是json数据交互,向后台提交json对象
var obj = {
uname:this.uname,
pwd:this.pwd,
age:this.age,
sex:this.sex,
hobby:this.hobby,
level:this.selectedVal
}
console.log(obj);
}
}
})
</script>
</html>运行结果：
2818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
