毕业设计软件开发网站开发,防伪码网站怎么做,公司怎么注册网站免费,网站开发好做还是平面好做一.事件处理器
什么是事件处理器
建立一个HTML编写事件处理器 测试结果
二.表单的综合案例
什么是表单综合案例
建立一个HTML来编写表单案例
测试结果 三.局部组件
什么是组件通信 自定义组件
测试结果
组件通信-父传子 测试结果
组件通信-子传父
测试结果 一.事件… 一.事件处理器
什么是事件处理器
建立一个HTML编写事件处理器 测试结果
二.表单的综合案例
什么是表单综合案例
建立一个HTML来编写表单案例
测试结果 三.局部组件
什么是组件通信 自定义组件
测试结果
组件通信-父传子 测试结果
组件通信-子传父
测试结果 一.事件处理器
什么是事件处理器 事件处理器是一种用于响应和处理用户交互事件的机制。在Web开发中用户通过与页面中的元素如按钮、链接、表单等进行交互来触发各种事件如点击、鼠标移动、键盘输入等。事件处理器允许开发者定义并执行相应的操作来响应这些事件。 在Vue中事件处理器可以通过指令(v-on)或符号来绑定到HTML元素上。下面是一个示例 button v-on:clickhandleClickClick me!/button在上述示例中v-on:clickhandleClick将事件处理器handleClick绑定到按钮的点击事件上。当用户点击按钮时绑定的handleClick方法会被调用。 可以在Vue实例的方法中定义事件处理器如以下示例所示 new Vue({methods: {handleClick: function() {// 处理点击事件的逻辑}}
})在上述示例中handleClick是一个Vue实例中的方法它会在按钮点击事件发生时被调用。 除了点击事件(click)Vue还支持一系列其他事件如mouseover、input、keydown等。开发者可以根据具体需求选择合适的事件并为其绑定对应的事件处理器。 事件处理器不仅可以在Vue实例方法中定义还可以直接在模板中使用内联表达式的方式定义。例如 button v-on:clickalert(Hello!)Click me!/button在上述示例中点击按钮时会直接调用内联表达式alert(Hello!)来弹出一个对话框。 总的来说事件处理器是Vue中用于响应用户交互事件的机制通过绑定事件处理器开发者可以定义相应的操作来处理用户的操作。 建立一个HTML编写事件处理器 !DOCTYPE html
htmlheadmeta charsetutf-8!-- 1.导入依赖 --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle事件处理/titlestyle typetext/css.one{background-color: aqua;height: 400px;width:400px;}.two{background-color: aquamarine;height: 300px;width: 300px;}.three{background-color: pink;height: 200px;width: 200px;}.four{background-color: blue;height: 100px;width: 100px;}/style/headbody!-- 2.定义vue所管理的边界有且只有一个根节点 --div idappdiv classoneclickfun1div classtwo click.stopfun2div classthree click.stopfun3div classfour click.stopfun4/div/div/div/divinput :valuemsg/button click.onceclickMe点击我/button/divscript typetext/javascript// 构建vue实例并绑定边界new Vue({// el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标el:#app,// Vue 实例的数据对象用于给 View 提供数据data(){return{msg:放下屠刀,};},methods:{fun1(){alert(fun1);},fun2(){alert(fun2);},fun3(){alert(fun3);},fun4(){alert(fun4);},clickMe(){console.log(this.msg);}}});/script/body
/html
测试结果 二.表单的综合案例
什么是表单综合案例 表单综合案例是指一个包含多个表单元素的综合应用案例旨在演示如何使用Vue来处理和验证表单数据。 一个简单的表单综合案例可以包含以下元素 文本输入框input用于接收用户输入的文本信息。复选框checkbox用于选择一个或多个选项。单选框radio用于从多个选项中选择一个选项。下拉选择框select用于从预定义的选项中选择一个选项。文本域textarea用于接收多行文本输入。提交按钮button用于提交表单数据。 以下是一个简单的表单综合案例示例 div idappform submit.preventsubmitFormlabel forname姓名/labelinput typetext idname v-modelform.name requiredbrlabel foremail邮箱/labelinput typeemail idemail v-modelform.email requiredbrlabel性别/labelinput typeradio idmale value男 v-modelform.genderlabel formale男/labelinput typeradio idfemale value女 v-modelform.genderlabel forfemale女/labelbrlabel forcountry国家/labelselect idcountry v-modelform.countryoption value请选择/optionoption value中国中国/optionoption value美国美国/optionoption value英国英国/option/selectbrlabel formessage留言/labeltextarea idmessage v-modelform.message/textareabrbutton typesubmit提交/button/form
/div在上述示例中使用Vue的指令(v-model)将不同类型的表单元素与Vue实例中的数据(form)进行双向绑定。当用户在表单元素中进行输入或选择时绑定的数据会实时更新。 在Vue实例中我们可以定义一个form对象来存储表单数据并提供一个submitForm方法来处理表单提交事件。在submitForm方法中可以进行表单数据的验证、发送请求等操作。 new Vue({el: #app,data: {form: {name: ,email: ,gender: ,country: ,message: }},methods: {submitForm: function() {// 处理表单提交逻辑console.log(this.form);}}
})上述示例中定义了一个Vue实例将form对象作为数据进行管理并在submitForm方法中打印出表单数据。 通过上述案例的组合运用可以实现一个简单的表单综合案例来处理用户输入的表单数据并根据实际需求进行相应的处理和验证。 建立一个HTML来编写表单案例
!DOCTYPE html
htmlheadmeta charsetutf-8!-- 1.导入依赖 --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle表单/title/headbodydiv idapp姓名input namename v-modelname/br /密码input typepassword v-modelpwd/br /性别span v-fors in sexListinput typeradio namesex v-modelsex :values.id /{{s.name}}/spanbr /籍贯select namemyAddr v-modelmyAddroption v-fora in address :valuea.id{{a.name}}/option/selectbr /爱好span v-forh in hobby input typecheckbox v-modelmyLike :valueh.id/{{h.name}}/spanbr /个人简介textarea v-modelsign cols10 rows5/textareabr /同意input typecheckbox v-modelok/br /button v-showok clickdosub提交/button/divscript typetext/javascriptnew Vue({el:#app,data(){return{name:放下屠刀,pwd:123456,sexList:[{name:男,id:1},{name:女,id:2},{name:未知,id:3}],sex:0,hobby:[{name:洗脚,id:1},{name:按摩,id:2},{name:唱歌,id:3},{name:打篮球,id:4}],myLike:[],address:[{name:湖南,id:1},{name:湖北,id:2},{name:北京,id:3},{name:上海,id:4}],myAddr:null,sign:null,ok:false};},methods:{dosub(){var obj{};obj.namethis.name;obj.pwdthis.pwd;obj.sexthis.sex;obj.addressthis.myAddr;obj.lovethis.myLike;obj.signthis.sign;console.log(obj);}}});/script/body
/html
测试结果 三.局部组件
什么是组件通信 组件通信是指不同组件之间通过传递数据和/或事件来进行交流和共享信息的过程。在前端开发中应用程序通常由多个组件构成这些组件可以是独立的、可复用的模块它们可能需要在不同层级或层间共享数据或者需要相互触发事件进行交互。 组件通信可以分为两种主要类型父子组件通信和兄弟组件通信。 父子组件通信父组件可以通过属性绑定向子组件传递数据子组件可以通过事件来向父组件发送消息。父组件通过属性绑定将数据传递给子组件子组件可以通过props属性接收并使用这些数据。子组件可以通过$emit方法触发事件并传递参数给父组件。这种通信方式符合单向数据流的原则父组件通过属性传递数据给子组件而子组件通过事件将消息传递给父组件。 兄弟组件通信兄弟组件之间无法直接通信因为它们之间没有直接的父子关系。但是可以通过共享同一个父组件或通过一个中央事件总线的方式来实现兄弟组件通信。 通过共享父组件如果两个兄弟组件有共同的父组件那么它们可以通过父组件来传递数据。父组件可以将数据传递给其中一个子组件然后由这个子组件将数据通过属性传递给另一个子组件。 中央事件总线中央事件总线是一个全局的事件触发器可以用来在组件之间传递事件和数据。可以在应用程序的顶层创建一个事件总线让各个组件都可以订阅事件和触发事件。这样一个组件可以通过触发事件将数据发布到事件总线上而其他组件可以通过订阅事件来接收数据。 除了以上两种常见的组件通信方式还有其他的通信方式如使用状态管理库如Vuex进行状态管理、使用全局变量、使用路由参数等。选择合适的组件通信方式取决于具体需求和应用的复杂程度。 总的来说组件通信是在不同组件之间传递数据和事件进行交流和共享信息的过程。通过合适的通信方式可以实现组件之间的数据共享、事件触发和相互协作从而构建强大的应用程序。 自定义组件
!DOCTYPE html
htmlheadmeta charsetutf-8!-- 1.导入依赖 --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle组件通信父传子/title/headbody!-- 2.定义vue所管理的边界有且只有一个根节点 --div idappp自定义组件/pmy-buttonxx/my-button/divscript typetext/javascriptnew Vue({el:#app,components:{my-button:{template:button小崽子/button}},data(){return{msg:放下屠刀,};},methods:{fun1(){alert(fun1);}}});/script/body
/html
测试结果 组件通信-父传子
!DOCTYPE html
htmlheadmeta charsetutf-8!-- 1.导入依赖 --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle组件传参父传子/title/headbody!-- 2.定义vue所管理的边界有且只有一个根节点 --div idappp自定义组件/pmy-buttonxx/my-buttonp组件通信-父传子/pmy-button m崽子/my-buttonp组件通信-父传子2/pmy-button m毕崽子 n10/my-button/divscript typetext/javascriptnew Vue({el:#app,components:{my-button:{props:[m],template:button clickclickMe被{{m}}点击了{{n}}次/button,data:function(){return{n:1}},methods:{clickMe(){this.n;}}}},data(){return{msg:放下屠刀,};},methods:{fun1(){alert(fun1);}}});/script/body
/html 测试结果 组件通信-子传父
!DOCTYPE html
htmlheadmeta charsetutf-8!-- 1.导入依赖 --script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle组件传参子传父/title/headbody!-- 2.定义vue所管理的边界有且只有一个根节点 --div idappp组件通信-子传父/pmy-button m毕崽子 xxxxxgetParam/my-button/divscript typetext/javascriptnew Vue({el:#app,components:{my-button:{props:[m],template:button clickclickMe被{{m}}点击了/button,methods:{clickMe(){let name徐崽子;let bname徐崽子的nl生活;let price自己的书this.$emit(xxxxx,name,bname,price)}}}},data(){return{msg:放下屠刀,};},methods:{getParam(a,b,c){console.log(a,b,c); }}});/script/body
/html
测试结果
