网页设计与网站建设在线考试,网站设计知识准备,电子商务网站整体策划,用phpmysql做网站文章目录 一、事件处理1.1 监听事件1.2 事件修饰符1.3 按键修饰符1.4 实例 二、表单综合案例三、自定义组件 一、事件处理
1.1 监听事件
我们可以使用 v-on 指令 (简写为 ) 来监听 DOM 事件#xff0c;并在事件触发时执行对应的 JavaScript。用法#xff1a;v-on:cli… 文章目录 一、事件处理1.1 监听事件1.2 事件修饰符1.3 按键修饰符1.4 实例 二、表单综合案例三、自定义组件 一、事件处理
1.1 监听事件
我们可以使用 v-on 指令 (简写为 ) 来监听 DOM 事件并在事件触发时执行对应的 JavaScript。用法v-on:clickhandler 或 clickhandler。
事件处理器 (handler) 的值可以是
内联事件处理器事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。方法事件处理器一个指向组件上定义的方法的属性名或是路径。 这两种在前面的博客已经有体现 1.2 事件修饰符
在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
为解决这一问题Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀包含以下这些
.stop.prevent.self.capture.once.passive
!-- 单击事件将停止传递 --
a click.stopdoThis/a!-- 提交事件将不再重新加载页面 --
form submit.preventonSubmit/form!-- 修饰语可以使用链式书写 --
a click.stop.preventdoThat/a!-- 也可以只有修饰符 --
form submit.prevent/form!-- 仅当 event.target 是元素本身时才会触发事件处理器 --
!-- 例如事件处理器不来自子元素 --
div click.selfdoThat.../div使用修饰符时需要注意调用顺序因为相关代码是以相同的顺序生成的。因此使用click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为而click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。 !-- 添加事件监听器时使用 capture 捕获模式 --
!-- 例如指向内部元素的事件在被内部元素处理前先被外部处理 --
div click.capturedoThis.../div!-- 点击事件最多被触发一次 --
a click.oncedoThis/a!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 onScroll 完成 --
!-- 以防其中包含 event.preventDefault() --
div scroll.passiveonScroll.../div.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应 请勿同时使用 .passive 和 .prevent因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了则.prevent 会被忽略并且浏览器会抛出警告。 1.3 按键修饰符
在监听键盘事件时我们经常需要检查特定的按键。Vue 允许在 v-on 或 监听按键事件时添加按键修饰符。
!-- 仅在 key 为 Enter 时调用 submit --
input keyup.entersubmit /你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符但需要转为 kebab-case 形式。
input keyup.page-downonPageDown /在上面的例子中仅会在 $event.key 为 ‘PageDown’ 时调用事件处理。
按鍵別名
Vue 为一些常用的按键提供了别名
.enter.tab.delete (捕获“Delete”和“Backspace”两个按键).esc.space.up.down.left.right
1.4 实例
事件冒泡 是指在计算机编程中的一种事件传递机制。
在事件驱动的编程模型中当用户与程序交互时例如点击鼠标或按下键盘这些操作会触发相应的事件。事件冒泡是指当一个元素上的事件被触发时它会向上级元素传递直到根元素这个过程就像气泡从底部冒到顶部一样。 那有时候我们不需要这种情况发生该怎么解决呢用咱们的事件修饰符
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptstyle.red{width: 400px;height: 400px;background-color: red;}.orange{width: 300px;height: 300px;background-color: orange;}.blue{width: 200px;height: 200px;background-color: blue;}.black{width: 100px;height: 100px;background-color: black;}/style/headbody!-- 定义边界 --div idappp冒泡事件/pdiv classred clickreddiv classorange clickorangediv classblue clickblue!-- 添加stop修饰符阻止冒泡 --div classblack click.stopblack/div/div/div/divp提交答案/p!-- 只能点一次 --button click.oncedosub提交/buttonp按键修饰符/pinput v-on:keyup.enterdosub //div/bodyscript typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #app,data() {return {f200: f200};},methods: {red() {alert(red);},orange() {alert(orange);},blue() {alert(blue);},black() {alert(black);},dosub(){alert(提交);}}})/script
/html 二、表单综合案例
在前端处理表单时我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦
input:valuetextinputevent text event.target.valuev-model 指令帮我们简化了这一步骤
input v-modeltext另外v-model 还可以用于各种不同类型的输入textarea、select 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合
文本类型的 input 和 textarea 元素会绑定 value property 并侦听 input 事件input typecheckbox 和 input typeradio 会绑定 checked property 并侦听 change 事件select 会绑定 value property 并侦听 change 事件。
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/scripttitle表单/title/headbodydiv idapph1vue表单/h1label姓名/labelinput v-modeluname /br /label密码/labelinput v-modelupwd typepassword /br /!-- 将用户的输入值转为 Number 类型 --label年龄/labelinput v-model.numberage /br /label性别/labelinput typeradio v-modelsex namesex value1 /男input typeradio v-modelsex namesex value0 /女br /label爱好/labeldiv v-forh in hobbyinput typecheckbox v-modelhobbies v-bind:valueh.id /{{h.name}}/divlabel类别/labelselect v-modeltypeoption value-1请选择/optionoption v-fort in types v-bind:valuet.id{{t.name}}/option/selectbr /label备注/labeltextarea v-bind:valuemark/textareabr /确认input typecheckbox v-modelflag /input typesubmit v-bind:disabledshow v-on:clickdoSubmit //div/bodyscript typetext/javascriptnew Vue({el: #app,data() {return {uname: null,upwd: null,age: 10,sex: 1,hobby: [{id: 1,name: 唱}, {id: 2,name: 跳}, {id: 3,name: rap}, {id: 4,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.age10,sex: this.sex,hobbies:this.hobbies,type: this.type,mark: this.mark,}console.log(obj);}}})/script
/html 三、自定义组件
Props Props是一种特别的 attributes你可以在组件上声明注册。当一个值被传递给 prop 时它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样在模板和组件的 this 上下文中访问。
一个组件可以有任意多的 props默认情况下所有 prop 都接受任意类型的值。
父传子
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/script/headbodydiv idapph1{{msg}}/h1!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) --my-button m荒 clicknb/my-button/div/bodyscript// 定义全局组件的方式Vue.component(my-button, {props: [m],template: button v-on:clickdoClickMyButton我是一个自定义组件被{{m}}点了{{n}}次/button,data: function() {return {n: 0};},methods: {doClickMyButton: function() {console.log(doClickMyButton方法被调用);this.n;}}}),new Vue({el: #app,data(){return{msg:自定义组件};}});/script
/html 子传父
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/script/headbodydiv idapph1{{msg}}/h1!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) --my-button m荒 clicknb/my-button/div/bodyscript// 定义全局组件的方式Vue.component(my-button, {props: [m],template: button v-on:clickdoClickMyButton我是一个自定义组件被{{m}}点了{{n}}次/button,data: function() {return {n: 0};},methods: {doClickMyButton: function() {console.log(doClickMyButton方法被调用);this.n;this.$emit(click, this.n, 荒, 石昊);}}}),new Vue({el: #app,data() {return {msg: 自定义组件};},methods: {nb: function(a, b, c) {console.log(方法被调用);console.log(a, b, c);}}});/script
/html
