目录
目录
一、事件处理器
1.“阻止冒泡” @click.stop
<body>
<div id="app">
<!-- 快捷键 :tab -->
<!--如 .div>div>div>div -->
<div class="div">
<!-- @click.stop 阻止冒泡 -->
<div class="red" @click.stop="red">
<div class="yellow" @click.stop="yellow">
<div class="bule" @click.stop="bule">
<div class="green" @click.stop="green"></div>
</div>
</div>
</div>
</div>
{{msg}}
</div>
</body>
样式
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style type="text/css">
.red{
height:400px;
width: 400px;
background-color: red;
}
.yellow{
height:300px;
width: 300px;
background-color: yellow;
}
.bule{
height:200px;
width: 200px;
background-color: skyblue;
}
.green{
height:100px;
width: 100px;
background-color: green;
}
</style>
</head>
方法
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:'hello hhhhh'
}
},methods:{//弹出颜色
red(){
alert('red');
},
yellow(){
alert('yellow');
},
bule(){
alert('bule');
},
green(){
alert('green');
}
}
})
原先效果；点击如绿色区域，弹出颜色绿红黄蓝
后来效果，只能弹出颜色绿色
2.“发送一次”@click.once
目的：避免对服务器频繁发送多余请求而造成服务器资源 被多次占用，提高服务器的使用和接收请求性能。
<!-- 发送一次请求 -->
<p >发送一次请求 </p>
<input type="text" v-model="msg" />
<button type="button" @click.once="ddss">点我试试</button>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:'hello hhhhh'
}
},methods:{//弹出颜色
red(){
alert('red');
},
yellow(){
alert('yellow');
},
bule(){
alert('bule');
},
green(){
alert('green');
},
ddss(){//按钮只能使用一次
alert(this.msg);
console.log(this.msg);
//
}
}
})
</script>
注意观察：对服务器的 请只发送了一次
3.添加修饰符 @keyup.enter
Vue允许为v-on在监听键盘事件时添加按键修饰符：
如：
<input v-on:keyup.enter="submit">
<p >按键修饰符 </p>
<input type="text" v-model="msg" @keyup.enter="ddss" />
按住Enter键
二、自定义组件
介绍；
组件(Component)是Vue最强大的功能之一。
意义：
组件可以扩展HTML元素，封装可重用的代码; 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
组件结构：
全局（component）和局部组件
全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id ="app">
<my-button></my-button>
{{msg}}
</div>
</body>
<script type="text/javascript">
Vue.component('my-button',{
template:'<button>我的按钮</button>'
})
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
msg:'hello goodgood!!'
}
}
})
</script>
</html>
三、组件通信
<p > 父组件传参给子组件</p>
<body>
<div id ="app">
<p > 简单组件</p>
<my-button></my-button>
<p > 父组件传参给子组件</p>
<my-button m='zhangsan' n='3'></my-button>
</div>
</body>
<script type="text/javascript">
Vue.component('my-button',{
template:'<button>{{m}}点击了{{n}}次</button>',
props:['m','n']
})
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
msg:'hello goodgood!!'
}
}
})
</script>
<p > 子组件传参给父组件</p>
<p > 子组件传参给父组件</p>
<my-button m='zhangsan' n='3' @mymethod = "xxx"></my-button>
<script type="text/javascript">
//内部组件
Vue.component('my-button',{
template:'<button @click="sub">{{m}}点击了{{n}}次</button>',
props:['m','n'],
methods:{
sub(){
var name="张三";
var sex="女";
var age=23;
console.log(name);
console.log(sex);
console.log(age);
//子组件传参给父组件的关键在于1.$emit;2.自定义事件
this.$emit('mymethod',name,sex,age);
}
}
})
//外部组件 :把参数先传到内部在传到外部组件 sub--->$emit--->xxx
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
msg:'hello goodgood!!'
}
},
methods:{
xxx(a,b,c){
debugger;
console.log(a);
console.log(b);
console.log(c);
}
}
})
</script>
总结；
父传子:props;
子传父；$emit;注册事件名
四、vue表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</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="checked" />
<input name ="sex" type="radio" /><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>
<input type="checkbox" @click="show" />
<input v-show="showFlag" @click="sub" type="button" value="提交" />
</form>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
// 设置vue所管理边界中可以使用的变量
return {
uname:null,
pwd:null,
sex:1,
likes:[//数据源 复选框
{id:1,name:'画画'},
{id:2,name:'足球'},
{id:3,name:'K歌'},
{id:4,name:'旅游'}
],
englishs:[//数据源 下拉框
{id:1,name:'优'},
{id:2,name:'良'},
{id:3,name:'差'}
],
hobby:[],//来存放选中的爱好
selectedVal:0,
showFlag:false
}
},
methods:{
show(){
this.showFlag=true;
},
sub(){
//提交事件向后台提交json数据
var obj={
uname:this.uname,
pwd:this.pwd,
sex:this.sex,
hobby:this.hobby,
level:this.selectedVal
}
console.log(obj);
}
}
})
</script>
</html>
效果图：数据如下
