事件处理器
Vue模板语法中的事件处理器是指在Vue组件中绑定DOM事件，当事件发生时执行相应的方法或表达式。常见的事件包括点击事件@click、输入事件@input、鼠标移入事件@mouseover等等。
事件监听可以使用v-on 指令
2.1 事件修饰符
.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>
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
注1：什么是事件冒泡?
见“事件冒泡模型.png”
## demo3.1.html
2.2 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
Vue为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>事件处理器</title> <style type="text/css"> .one{ background-color: red; height: 400px; width: 400px; } .two{ background-color: blue; height: 300px; width: 300px; } .three{ background-color: pink; height: 200px; width: 200px; } .four{ background-color: yellow; height: 100px; width: 100px; } </style> </head> <body> <div id="app"> <dvi class="one"@click.stop="fun1"> <div class="two"@click.stop="fun2"> <div class="three"@click.stop="fun3"> <div class="four"@click.stop="fun4"></div> </div> </div> </dvi> <p>提交答案</p> <button @click.once="dosub">提交</button> <p>按键修饰符</p> <input v-on:keyup.enter="dosub" /> </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return{ msg:'hello 小B 你相信光吗？', }; }, methods:{ fun1(){ alert("fun1") }, fun2(){ alert("fun2") }, fun3(){ alert("fun3") }, fun4(){ alert("fun4") }, dosub(){ alert("已做完，提交答案"); } } }); </script> </body> </html>
Vue表单
Vue表单是一种用于收集用户输入信息的Web表单，它基于Vue框架的数据双向绑定特性，可以使开发者更加简单和方便地管理表单数据。Vue表单提供了一系列的组件，比如文本输入框、下拉列表、单选框、复选框等，开发者可以根据需要在界面上选择合适的组件，同时使用Vue的模板语法进行组件的渲染和绑定。
Vue表单中的组件通常由两部分组成，一部分是表单对象，用来表示表单的数据结构和验证规则，另一部分是表单控件，用来实现界面上的输入和操作行为。在Vue中，表单对象可以通过data选项或computed属性来定义，同时通过v-model指令与表单控件进行双向数据绑定，实现数据的自动更新。除此之外，Vue表单还提供了一些常用的验证规则和自定义验证函数，开发者可以根据需要进行使用和扩展。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>表单</title> </head> <body> <div id="app"> <h1>标题</h1> <ul> <li> <p>vue表单</p> <label>姓名：</label><input v-model="uname" /><br /> <label>密码：</label><input v-model="upwd" type="password" /><br /> <!-- 将用户的输入值转为 Number 类型 --> <label>年龄：</label><input v-model.number="age" /><br /> <label>性别：</label> <input type="radio" v-model="sex" name="sex" value="1" />男 <input type="radio" v-model="sex" name="sex" value="0" />女<br /> <label>爱好：</label> <div v-for="h in hobby"> <input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}} </div> <label>类别：</label> <select v-model="type"> <option value="-1">===请选择===</option> <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option> </select><br /> <label>备注：</label> <textarea v-bind:value="mark"></textarea><br /> 确认<input type="checkbox" v-model="flag" /> <input type="submit" v-bind:disabled="show" v-on:click="doSubmit" /> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data() { return { uname: null, upwd: null, age: 10, sex: 1, hobby: [{ id: 1, name: '洗脚' }, { id: 2, name: '看飞机' }, { id: 3, name: '上网' }], hobbies: [], types: [{ id: 1, name: '男' }, { id: 2, name: '其他' }, { id: 3, name: '女' }], type: null, mark: '。。。', flag: false } }, computed: { show: function() { return !this.flag; } }, methods: { doSubmit: function() { console.log('doSubmit') var obj = { uname: this.uname, upwd: this.upwd, age:this.age+10, sex: this.sex, hobbies:this.hobbies, type: this.type, mark: this.mark, } console.log(obj); } } }) </script> </html>
总的来说，Vue表单的优点是它具有简单易用、数据双向绑定、验证规则灵活和可扩展性强等特点，适合于快速开发和维护大量的响应式表单
组件通信
Vue的组件通信是指不同组件之间进行数据和事件的传递的过程。在Vue中，
组件通信主要包括以下几种方式：
父子组件通信：
父组件可以通过props向子组件传递数据，子组件可以通过$emit事件向父组件发送数据。
兄弟组件通信：
兄弟组件通信需要通过共同的父组件来传递数据，可以通过props和$emit事件来实现。
跨级组件通信：
跨级组件通信也需要通过共同的父组件来传递数据，可以通过provide和inject实现，在父组件中提供数据，在后代组件中使用inject获取数据。
使用全局事件总线：
使用Vue实例作为事件总线，通过$on、$emit、$off等方法来实现组件之间的数据传递。
使用Vuex来进行状态管理：
Vuex是Vue官方推荐的状态管理库，可以将共享的状态抽离出来，放到单独的store中，供所有组件使用，可以通过调用store中的方法来实现数据的传递和状态管理。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <!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"> <!-- 定义组件不能用驼峰命名 --> <!-- 需求是：当引用一个myButton，也页面上一个独特标记按钮 --> <my-button m="刘文"></my-button> <my-button m="刘鑫"></my-button> <!-- <button onclick=""></button> --> </div> </body> <script type="text/javascript"> Vue.component('my-button', { // props是定义组件中的变量的 props:['m'], // template代表了自定义组件在页面上显示的类容 template:'<button v-on:click="incrn">我被{{m}}点击{{n}}次</button>', data:function(){ return { n:1 } }, methods:{ incrn(){ this.n++; } } }); // 绑定边界 ES6具体体现 new Vue({ el: '#app', data() { return { }; } }) </script> </html>
总的来说，Vue的组件通信提供了多种方式，根据不同的场景和需求可以选择合适的方式来实现组件之间的数据和事件的传递。
