文章目录
一、事件处理器
事件修饰符
二、自定义组件
组件简介
全局和局部组件
props
小结
三、表单综合案例(vue三期博客内容综合)
一、事件处理器
事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop👀
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="/ajax/libs/vue/2.6.10/vue.js"></script><title></title><style type="text/css">.azure{height: 400px;width: 400px;background-color: azure;}.pink{height: 300px;width: 300px;background-color: pink;}.plum{height: 200px;width: 200px;background-color: plum;}.yellow{height: 100px;width: 100px;background-color: yellow;}</style></head><body><div id="app"><div class="azure"><div class="pink"><div class="plum"><div class="yellow"></div></div></div></div></div></body><script>new Vue({el:'#app',data() {return {msg:'hello vue!'}}})</script></html>
我们先看一下现在html代码的运行效果
为什么要先看这个嘞，原因是想先看一下事件冒泡的一个小问题，在实际编码中十分忌讳的一个问题，给这4个div分别绑定事件
接下来看当前效果 内层div触发外层div事件
像遇到这样的问题呢，我们就可以使用到阻止冒泡事件来完成
怎么阻止嘞，只需要在点击事件前面添加冒泡事件名就好了，这样点击最内层div也不会触发外层
<!-- 提交事件不再重载页面 -->
<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组件
组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件
全局组件：ponent(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
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：定义组件名的方式有两种
短横线分隔命名(建议使用)
ponent('my-component-name', { /* ... */ })，引用方式：<my-component-name>
首字母大写命名
ponent('MyComponentName', { /* ... */ })，引用方式： <my-component-name>和<MyComponentName>都是可接受的
在定义的按钮中没有添加任何内容，但是上输出了小坤的按钮的字样，为什么呢；原因是vue在渲染的时候，自动挂载template模板
父组件
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="/ajax/libs/vue/2.6.10/vue.js"></script><title></title></head><body><div id="app"><p>简单组件的定义</p><my-button></my-button><p>父组件传参给子组件</p><!-- 在页面上传出zhangsan点击了几次就传什么 --><my-button m='zhangsan' n='3'></my-button></div></body><script>ponent('my-button',{/* template:'<button>小坤的按钮</button>', */template:'<button>{{m}}点击了{{n}}次</button>',props:['m','n']})new Vue({el:'#app',data() {return {msg:'hello vue!'}}})</script></html>
子组件 子组件将参数传递给父组件的关键在于1.$emit 2.自定义事件
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="/ajax/libs/vue/2.6.10/vue.js"></script><title></title></head><body><div id="app"><p>父组件传参给子组件</p><!-- 在页面上传出zhangsan点击了几次就传什么 --><my-button m='zhangsan' n='3' @mymethod=xxx();></my-button></div></body><script>ponent('my-button',{template:'<button @click="sub">{{m}}点击了{{n}}次</button>',props:['m','n'],methods:{sub(){var name="张三";var sex="男";var age="22";console.log(name);console.log(sex);console.log(age);this.$emit('mymethod',name,sex,age);//子组件将参数传递给父组件的关键在于1.$emit 2.自定义事件}}})//外部组件 ⬆把内部的内容传到外部来⬇new Vue({el:'#app',data() {return {msg:'hello vue!'}},methods:{xxx(a,b,c){console.log(a);console.log(b);console.log(c);}}})</script></html>
小结
定义组件：template
父传子：props
子传父：通过$emit注册事件名，语法this.$emit('事件名'，....) 这里一般是json对象
三、表单综合案例(vue三期博客内容综合)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><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 type="checkbox" v-model="hobby" :value="l.id">{{l.name}}</div> <br>英语等级：<select v-model="selectedVal"><option v-for="e in englishs" :value="e.id" >{{e.name}}</option></select><!--给ok添加点击事件--><input @click="show" type="checkbox" /><br><!-- 当把所有表单值都填完显示 --><input v-show="showFlag" type="button" @click="sub" value="提交"/></form></div><!--导入第一步Vue.js--><script src="/npm/vue@2.5.21/dist/vue.min.js"></script><script>//外部组件new Vue({el:"#app",data() {return {uname:null,pwd: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:'差'}],/*向后台传递的数据（用来存放选中的爱好） 1,3 */hobby:[],selectedVal:0,/*用来接收下拉框选中的id*/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></body></html>
主要注意复选框的数据源与要传递到后台的数据，如爱好，当我们选中时，我们要传递到后台的是其选中的id，而且可能选择多个，所以我们在这就自定义一个数组来接收其值
HBuilder X中快速生成html代码快捷键---tab键
