目录
一、事件处理器
1.1 冒泡事件
冒泡事件：
<!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">
<p>《冒泡排序》</p>
<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 {
msg:"hello Leaf!!!"
}
},
methods:{
red(){
alert("red");
},
yellow(){
alert("yellow");
},
blue(){
alert("blue");
},
green(){
alert("green");
}
}
})
</script>
</html>我们测试一下：
看着似乎没有任何问题，但是我们点击确定：
结果我们发现它不止弹出了点击的那个颜色，同时还弹出了它的所有父级div颜色；
这样肯定是不行的，所以我们需要来阻止它的连续冒泡行为；
只要这样添加上.stop就好啦~
<p>《阻止冒泡》</p>
<div class="red" @click="red">
<div class="yellow" @click.stop="yellow">
<div class="blue" @click.stop="blue">
<div class="green" @click.stop="green">
</div>
</div>
</div>
</div>这里就不放结果截图了，反正长的都一样嘿嘿...
1.2 控制发送一次
为什么要控制查询按钮只能发送一次？
而知道了这个问题后，我们程序员的任务就来了，而去解决这个问题的一个办法就是：
控制它只能发送一次请求。
这里直接放上代码：
<!-- 边界中的代码 -->
<p>《只发送一次》</p>
<input type="text" v-model="msg"/>
<button type="button" @click.once="dianwoshishi">点我试试</button>Vue实例中定义的方法：
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
msg:"hello Leaf!!!"
}
},
methods:{
dianwoshishi(){
console.log(this.msg);
}
}
})
</script>测试：
二、自定义组件
2.1 定义组件
我们首先来尝试一下如何自定义一个简单的组件；
利用Vue.component('组件名'，{}）
<script type="text/javascript">
Vue.component('my-button',{
template:'<button>我的按钮</button>'
})
new Vue({
el:"#app",
data(){
return {
msg:"hello Leaf!!!"
}
}
})
</script>然后在边界中直接使用：
<div id="app">
<p>《简单组件》</p>
<my-button></my-button>
</div>运行我们可以看到原本没有的组件已经有了效果：
2.2 组件的通信-父传子
当我们需要用到组件之间的通信-也就是参数的传递，
例如父传子的时候，就可以用到template、props；
<script type="text/javascript">
Vue.component('my-button',{
template:'<button>{{m}}点击了{{n}}次按钮</button>',
props:['m','n']
})
new Vue({
el:"#app",
data(){
return {
msg:"hello Leaf!!!"
}
}
})
</script>在边界中定义要传递的参数：
在边界中定义放好要传递的参数：
<div id="app">
<p>父组件 传参 给 子组件</p>
<!-- Leaf点击了三次 -->
<my-button m='Leaf' n='3'></my-button>
</div>最后就让我们一起来运行看看效果：
2.3 子传父
看过了父传子，接着我们来看看怎么实现子传父；
Leaf就直接把代码放上，然后讲讲实现思路。
<!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>
<!-- Leaf点击了三次 -->
<my-button m='Leaf' n='3' @mymethod="xxx"></my-button>
</div>
</body>
<script type="text/javascript">
Vue.component('my-button',{
// template:'<button>我的按钮</button>',
//绑定了事件sub
template:'<button @click="sub" >{{m}}点击了{{n}}次按钮</button>',
props:['m','n'],
methods:{
sub(){
//内部属性
var name = "Leaf";
var sex = "男";
var age = 22;
debugger;
console.log(name);
console.log(sex);
console.log(age);
//子组件 将参数传递给父组件 的关键在于：
// $emit注册自定义事件
this.$emit('mymethod',name,sex,age);
}
}
})
//外部组件
new Vue({
el:"#app",
data(){
return {
msg:"hello Leaf!!!"
}
},
methods:{
xxx(a,b,c){
debugger;
console.log(a);
console.log(b);
console.log(c);
}
}
})
</script>
</html>代码实现思路顺序：
debugger运行：
我们可以看到最后就跳到了父部组件的xxx方法里了。
三、表单综合案例
3.1 案例源码
这里就放上案例代码：
<!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="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> <br>
<!-- 提交 -->
<input @click="show" type="checkbox"/>
<input @click="sub" v-show="showFlag" type="button" value="OK"/>
</form>
</div>
</body>
<script type="text/javascript">
Vue.component('my-button',{
})
//外部组件
new Vue({
el:"#app",
data(){
return {
uname:null,
pwd:null,
sex:19,
likes:[//爱好的数据源
{id:1,name:'篮球'},
{id:2,name:'画画'},
{id:3,name:'摄影'},
{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数据交互，向后台提交json对象
var obj={
uname:this.uname,
pwd:this.pwd,
sex:this.sex,
hobby:this.hobby,
level:this.selectedVal
}
console.log(obj);
}
}
})
</script>
</html>3.2 运行测试
测试完毕！！！