文章目录
一、事件处理器
事件修饰符
二、自定义组件
组件简介
全局和局部组件
props
小结
三、表单综合案例(vue三期博客内容综合)
一、事件处理器
事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once
- 锐客网 .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;
}
我们先看一下现在html代码的运行效果
文章图片
为什么要先看这个嘞，原因是想先看一下事件冒泡的一个小问题，在实际编码中十分忌讳的一个问题，给这4个div分别绑定事件
文章图片
文章图片
接下来看当前效果内层div触发外层div事件
文章图片
文章图片
像遇到这样的问题呢，我们就可以使用到阻止冒泡事件来完成
怎么阻止嘞，只需要在点击事件前面添加冒泡事件名就好了，这样点击最内层div也不会触发外层
文章图片
文章图片
文章图片
文章图片
文章图片
...
...
二、自定义组件 vue组件
组件简介 组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件 全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
props props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"
注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods以及生命周期钩子，仅有的例外是像el这样根实例特有的选项
注2：当我们定义这个组件时，你可能会发现它的data并不是像这样直接提供一个对象
data: {
count: 0
}取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
【vue.js|Vue模块语法下(事件处理器&自定义组件&组件通信)】data: function () {
return {
count: 0
}
}
注3：定义组件名的方式有两种
短横线分隔命名(建议使用)
Vue.component('my-component-name', { /* ... */ })，引用方式：
首字母大写命名
Vue.component('MyComponentName', { /* ... */ })，引用方式：和 都是可接受的
文章图片
文章图片
在定义的按钮中没有添加任何内容，但是上输出了小坤的按钮的字样，为什么呢；原因是vue在渲染的时候，自动挂载template模板
父组件
文章图片
文章图片
- 锐客网
简单组件的定义
子组件子组件将参数传递给父组件的关键在于1.$emit 2.自定义事件
- 锐客网
父组件传参给子组件
文章图片
小结
定义组件：template
父传子：props
子传父：通过$emit注册事件名，语法this.$emit('事件名'，....)这里一般是json对象
三、表单综合案例(vue三期博客内容综合)
多功能表单 - 锐客网 
文章图片
主要注意复选框的数据源与要传递到后台的数据，如爱好，当我们选中时，我们要传递到后台的是其选中的id，而且可能选择多个，所以我们在这就自定义一个数组来接收其值
HBuilder X中快速生成html代码快捷键---tab键
文章图片
文章图片
文章图片
推荐阅读
- 前端学习|前端基础学习——Vue-Cli脚手架介绍
- Vue|Vue语法模板（样式绑定，事件处理器，表单，自定义组件，组件通信）
- #|vue-vue2脚手架6-浏览器本地存储webStorage
- JavaScript|Vue 04 生命周期 组件化 内置关系 Vue脚手架 render函数 ref属性 _props配置 mixin混入 插件 scoped样式
- TypeScript|【TypeScript基础】TypeScript之常用类型（下）
- Vue|vue - props配置项\ mixin\插件\scoped
- Axios及网络基础|猿创征文｜Axios的介绍与作用 - 大白话
- 笔记|WebGIS前端学习之路（Vue+Leaflet地图展示）
- uni-app|uniapp加载leaflet地图