网站jquery上传源代码,苏州建设工程信息网,饰品设计网站推荐,科技型中小企业认定官网一、事件处理器 我们之前事件监听可以使用v-on 指令 1、事件修饰符 在Vue中我们通过由点(.)表示的指令后缀来调用修饰符#xff0c;比如#xff1a; .stop#xff1a;阻止事件冒泡。当事件触发时#xff0c;该修饰符将停止事件进一步冒泡到父元素。相当于调用了 event.stop…一、事件处理器 我们之前事件监听可以使用v-on 指令 1、事件修饰符 在Vue中我们通过由点(.)表示的指令后缀来调用修饰符比如 .stop阻止事件冒泡。当事件触发时该修饰符将停止事件进一步冒泡到父元素。相当于调用了 event.stopPropagation() .prevent阻止默认事件。默认情况下某些元素会有默认的事件行为比如a标签的点击跳转使用.prevent 可以阻止默认事件的触发。相当于调用了 event.preventDefault()。 .capture使用事件捕获模式。默认情况下事件是在冒泡阶段处理的即从子元素到父元素。使用 .capture 修饰符将事件处理移到事件捕获阶段即从父元素到子元素。 .self只触发当前元素本身的事件。当事件绑定在子元素上时该修饰符只允许事件在子元素上触发而不会触发父元素上相同事件。 .once只触发一次事件。使用 .once 修饰符可以确保事件只被触发一次之后该事件监听器会自动被移除。 !-- 阻止单击事件冒泡 --a v-on:click.stopdoThis/a!-- 提交事件不再重载页面 --form v-on:submit.preventonSubmit/form!-- 修饰符可以串联 --a v-on:click.stop.preventdoThat/a!-- 只有修饰符 --form v-on:submit.prevent/form!-- 添加事件侦听器时使用事件捕获模式 --div v-on:click.capturedoThis.../div!-- 只当事件在该元素本身而不是子元素触发时触发回调 --div v-on:click.selfdoThat.../div!-- click 事件只能点击一次 --a v-on:click.oncedoThis/a2、冒泡案例(.stop) !DOCTYPE html
html langen
headmeta charsetUTF-8title事件处理器/title!-- jQuery--script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
style.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: 500px;height: 500px;background-color: black;}
/style
body
!-- 定义边界 --
div idappp冒泡事件/pdiv classblack clickblackdiv classred clickreddiv classorange clickorangediv classblue clickblue/div/div/div/div
/div
/body
script typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #app,data() {return {f200: f200};},methods: {red() {alert(red(红色));},orange() {alert(orange橙色);},blue() {alert(blue蓝色);},black() {alert(black黑色);}}})
/script/html 当我们加上了.stop修饰符 !DOCTYPE html
html langen
headmeta charsetUTF-8title事件处理器/title!-- jQuery--script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
style.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: 500px;height: 500px;background-color: black;}
/style
body
!-- 定义边界 --
div idappp冒泡事件/pdiv classblack click.stopblackdiv classred click.stopreddiv classorange click.stoporangediv classblue click.stopblue/div/div/div/div
/div
/body
script typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #app,data() {return {f200: f200};},methods: {red() {alert(red(红色));},orange() {alert(orange橙色);},blue() {alert(blue蓝色);},black() {alert(black黑色);}}})
/script/html 3、触发案例(.once) !DOCTYPE html
html langen
headmeta charsetUTF-8title事件处理器/title!-- jQuery--script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
body
!-- 定义边界 --
div idappp点击/pinput :valuemsg/button clickdosub提交/button
/div
/body
script typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #app,data() {return {msg: 偶买噶};},methods: {dosub() {alert(this.msg);}}})
/script/html 添加.once之后只能点击一次 !DOCTYPE html
html langen
headmeta charsetUTF-8title事件处理器/title!-- jQuery--script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
body
!-- 定义边界 --
div idappp点击/pinput :valuemsg/button click.oncedosub提交/button
/div
/body
script typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #app,data() {return {msg: 偶买噶};},methods: {dosub() {alert(this.msg);}}})
/script/html 4、综合案例(表单) 需要注意的是复选框v-modelhobbyMax中的hobbyMax使用数组来接收 !DOCTYPE html
html langen
headmeta charsetUTF-8title表单/title!-- jQuery--script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
body
div idapplabel姓名/labelinput v-modelusername/br/label密码/labelinput v-modelpwd typepassword/br/!-- 将用户的输入值转为 Number 类型 --label年龄/labelinput v-model.numberage typenumber/br/label性别/labeldiv v-fors in sexMaxinput typeradio v-modelsex namesex v-bind:values.id/{{s.name}}br//divlabel爱好/labeldiv v-forh in hobbyinput typecheckbox v-modelhobbyMax v-bind:valueh.id/{{h.name}}/divlabel类别/labelselect v-modeltypeoption v-fort in types v-bind:valuet.id{{t.name}}/option/selectbr/label备注/label!-- v-bind:valueinfo--textarea v-modelinfo/textareabr/确认input typecheckbox v-modelflag/input typesubmit v-bind:disabledshow v-on:clickdoSubmit/
/div
/body
script typetext/javascriptnew Vue({el: #app,data() {return {username: null,pwd: null,age: 10,sex: 1,sexMax: [{id: 1, name: 男}, {id: 2, name: 女}, {id: 3, name: 其他}],hobby: [{id: 1,name: 篮球},{id: 2,name: 唱},{id: 3,name: 跳},{id: 4,name: rap}],hobbyMax: [],types: [{id: 1,name: 职业人},{id: 2,name: 学生},{id: 3,name: 社会人}],type: null,info: 请输入你的个性签名,flag: false}},computed: {show: function () {return !this.flag;}},methods: {doSubmit: function () {var obj {username: this.username,pwd: this.pwd,age: this.age,sex: this.sex,hobbyMax: this.hobbyMax,type: this.type,info: this.info,}console.log(obj);}}})
/script
/html
效果演示 二、自定义组件
1、 vue组件 1.1、组件简介 组件(Component)是Vue最强大的功能之一 组件可以扩展HTML元素封装可重用的代码 组件系统让我们可以用独立可复用的小组件来构建大型应用几乎任意类型的应用的界面都可以抽象为一个组件树 1.2、 全局和局部组件
全局组件Vue.component(tagName, options)tagName为组件名options为配置选项。局部组件: new Vue({el:#d1,components:{...}}) 注册后我们可以使用以下方式来调用组件 tagName/tagName 1.3 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定义组件名的方式有两种 短横线分隔命名(建议使用) Vue.component(my-component-name, { /* ... */ })引用方式my-component-name 首字母大写命名 Vue.component(MyComponentName, { ... })引用方式 my-component-name和MyComponentName都是可接受的 4HTML 中的特性名是大小写不敏感的所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时 camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名 props: [postTitle],my-tag post-titlehello!/my-tag 5props: [title, likes, isPublished, commentIds, author] 希望每个 prop 都有指定的值类型 props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor}
2、案例 !DOCTYPE html
html langen
headmeta charsetUTF-8title组件/title!-- jQuery--script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
body
!-- 定义边界 --
div idapp!-- 定义组件不能用驼峰命名 --!-- 需求是当引用一个myButton也页面上一个独特标记按钮 --my-img/my-imgmy-button m卡拉米/my-button!-- button onclick/button --
/div
/body
script typetext/javascriptVue.component(my-button, {// props是定义组件中的变量的props: [m],// template代表了自定义组件在页面上显示的类容template: button v-on:clickincrn我被{{m}}点击{{n}}次/button,data: function () {return {n: 1}},methods: {incrn() {this.n;}}});Vue.component(my-img, {// template代表了自定义组件在页面上显示的类容template: img stylewidth: 100px;height: 100px; srchttps://ts1.cn.mm.bing.net/th/id/R-C.b0ea268fa1be279d112489ce83ad4696?rikqItsh%2fBiy33hlgriuhttp%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215009.jpgehkS6PLWamt%2bMzQV8uO9ugcU5d5M19BpXtCpNz2cRJ7q9M%3drislpidImgRawr0,});// 绑定边界 ES6具体体现new Vue({el: #app,data() {return {};}})
/script/html 三、组件通信 1. 自定义事件 监听事件$on(eventName) 触发事件$emit(eventName) 1.1、Vue自定义事件是为组件间通信设计 vue中父组件通过prop传递数据给子组件而想要将子组件的数据传递给父组件则可以通过自定义事件的绑定 父Vue-子Vue通过prop传递数据 子Vue-父Vue通过事件传递数据 1.2、事件名 不同于组件和prop事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。 建议使用“短横线分隔命名” 2、案例 2.1、父传子
!DOCTYPE html
html langen
headmeta charsetUTF-8title通信/title!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
body
div idapph3父传子1/h3my-button m牛马/my-buttonh3父传子2/h3my-button m小卡拉米 n2/my-button
/div
/body
script// 定义全局组件的方式Vue.component(my-button, {props: [m, n],template: button v-on:clickMyButton{{m}}被点了{{n}}次/button,data: function () {return {n: 1};},methods: {MyButton: function () {this.n;}}})var vm new Vue({el: #app,data: {msg: 999}});
/script
/html 2.2、子传父
!DOCTYPE html
html langen
headmeta charsetUTF-8title通信/title!-- vue.js--script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
body
div idapp2h3子传父/h3!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) --my-buttons m666 getButgetXx/my-buttons
/div
/body
script// 定义全局组件的方式Vue.component(my-buttons, {props: [m],template: button v-on:clickMyButton{{m}}被点了/button,methods: {MyButton: function () {let id 123;let name 天才;this.$emit(getbut, id, name);}}})var vm new Vue({el: #app2,data: {msg: 666},methods: {getXx: function (a, b) {console.log(a);console.log(b);}}});
/script
/html
