目录
一、事件处理器
事件监听可以使用v-on 指令
事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符:
.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>
什么是事件冒泡?
指事件的层级传播,一层会带着影响上一级
页面上有好多事件,也可以多个元素响应一个事件.假如:上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。
代码讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
<style type="text/css">
.red{
height: 400px;
width: 400px;
background-color: red;
}
.yellow{
height: 300px;
width: 300px;
background-color: yellow;
}
.blue{
height: 200px;
width: 200px;
background-color: blue;
}
.green{
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<div class="red" @click="red">
<div class="yellow" @click="yellow">
<div class="blue" @click="blue">
<div class="green" @click="green"></div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
mag:'hello vue!'
}
},methods: {
red(){
alert("red");
},
yellow(){
alert("yellow");
},
blue(){
alert("blue");
},
green(){
alert("green");
}
},
})
</script>
</html>
我们在代码中给每一个颜色div模块都部署了它各自对应的点击弹窗事件,一层套一层,但是当我们点击最里面一层的模块时,它会先弹出自己的事件 其次会依次执行包含了自己的模块的事件
效果:先弹出了自己的模块的事件
接下来会依次弹出上层模块的事件
此时我们就可以用事件修饰符来阻止事件冒泡 .stop
我们在@click后面加上.stop
当我们点击最里层的green模块时他就会只弹出对应的事件,不会向外传播了
.once只发送一次
效果展示:多次点击后(如果这是用户对服务器的请求 那么一直提交请求也算一种恶意攻击了 所有我们需要组进行阻止)
频繁发送请求
在@click后添加.once即可(只会提交一次)
点击一次后在点击就失效了
按键修饰符
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
例:使用较多的.enter修饰符(回车键相当于登陆)
运行结果
二.自定义组件
vue中的重中之重 尤其是前端开发人员需要深入,用途:将vue进行封装
组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素,封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件
全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
props
props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 "prop"
注1:因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods
以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
注2:当我们定义这个 <button-counter> 组件时,你可能会发现它的data并不是像这样直接提供一个对象
data: {
count: 0
}
取而代之的是,一个组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
注3:定义组件名的方式有两种
短横线分隔命名(建议使用)
Vue.component('my-component-name', { /* ... */ }),引用方式:<my-component-name>
首字母大写命名
Vue.component('MyComponentName', { /* ... */ }),引用方式: <my-component-name>和<MyComponentName>都是可接受的
注4:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时, camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
props: ['postTitle'],<my-tag post-title="hello!"></my-tag>
注5:props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
希望每个 prop 都有指定的值类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
自定义组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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></my-button>
<p>父组件 传参 给子组件</p>
<!-- oyang点击了3次 -->
<my-button m='oyang' n='3'></my-button>
</div>
</body>
<script>
Vue.component("my-button",{
// template:'<button>我的按钮</button>'
template:'<button>{{m}}点击了{{n}}次</button>',
props:['m','n']
})
new Vue({
el: '#app',
data() {
return {
msg: 'hello vue!'
}
}
})
</script>
</html>
我们原本是没有 my-button的组件的,但是我们可以自己在<script>中定义
组件传参(父组件 传参给 子组件)
三.组件通信
自定义事件
监听事件:$on(eventName)
触发事件:$emit(eventName)
注1:Vue自定义事件是为组件间通信设计
vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定
父Vue实例->Vue实例,通过prop传递数据
子Vue实例->父Vue实例,通过事件传递数据
注2:事件名
不同于组件和prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
建议使用“短横线分隔命名”,例如:three-click
子组件传参给父组件
定义组件:template
父传子:props
子传父:通过$emit注册事件名
this.$emit('事件名',.....)
子组件 将参数传递给父组件 的关键在于:1.关键字 $emit 2.自定义事件
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>子组件 传参 给父组件</p>
<!-- oyang点击了3次 -->
<my-button m='oyang' n='3' @mymethod='sa'></my-button>
</div>
</body>
<script>
Vue.component("my-button",{
// template:'<button>我的按钮</button>'
template:'<button @click="sub">{{m}}点击了{{n}}次</button>',
props:['m','n'] ,
methods:{
sub(){
var name="欧阳";
var sex="男";
var age=20;
console.log(name);
console.log(sex);
console.log(age);
//子组件 将参数传递给父组件 的关键在于
//1.关键字 $emit 2.自定义事件
this.$emit('mymethod',name,sex,age);
}
}
})
//外部组件
new Vue({
el: '#app',
data() {
return {
msg: 'hello vue!'
}
},methods:{
sa(a,b,c){
debugger
console.log(a);
console.log(b);
console.log(c);
}
}
})
</script>
</html>
四,表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<!-- 创建一个多功能菜单 -->
<form>
姓名:<input type="text" v-model="uname"/><br />
密码:<input type="password" v-model="pwd" /><br />
性别:
<input name="sex" type="radio" checked>
<input name="sex" type="radio" checked><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" />
</form>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return{
uname:null,
ped:null,
sex:1,
likes:[//爱好数据源 复选框
{id:1,name:'唱'},
{id:2,name:'跳'},
{id:3,name:'rap'},
{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,
sex:this.sex,
hobby:this.hobby,
level:this.selectedVal
}
console.log(obj);
}
}
})
</script>
</html>