小程序开发vue.js这在前端开发中有什么作用?

软件开发

小程序开发


浏览:616 次

去年,我观看并学习了如何制作一个小型应用商店,很长一段时间以来,我了解到在方法方法中有很多具体的含义。看完一个小案例,我明白了。

需要达到效果-每次单击按钮至+1,并在6时重置

方法1:将点击事件判断直接添加到模板中

图像.png

方法2:

(1) 将单击事件从方法1移动到方法

图像.png

单击后无响应

111克

使用app.count后,显示正常

图像.png

方法3:用此替换app

图像.png

(2) 效果

[图像上传…(Image.png-76892f-1582784292789-0)]

111磅

<头部>

<元字符集=“UTF-8”>

<a class="bold" href="https://www.unisoft.cn/service/software/" target="_blank">软件开发</a>QQ:97369623</title></p> <p><script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js“></script></p> <p></head></p> <p><body></p> <p><div id=“app”></p> <p><button type=“button”v-on:click=“add”>{{count}}</button></p> <p></div></p> <p><script type=“text/javascript”></p> <p>var app=新Vue({</p> <p>el:“#app”,</p> <p><img src="https://image.unisoft.cn/bench_picture/2024/02/08/fc2f95c6664622fcaafdbcc6c907d5bc.limit.jpeg" /></p> <p>数据:{</p> <p>计数:0</p> <p>},</p> <p>方法:{</p> <p>添加:函数(){</p> <p>如果(this.count==6){</p> <p>this.count=0</p> <p>}其他{</p> <p>此.count+=1</p> <p>}</p> <p>}</p> <p>}</p> <p>})</p> <p></script></p> <p></body></p> <p></html></p></div> </div> </div> </div> <div class="card"> <h5 class="card-title">相关资讯</h5> <div class="card-body row gap-y gap-3"> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/d291f7187cb399a3.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2024/01/13/6cc265183e8daeb63ee6b0bd85614d13.thumb.jpeg"></div> <h4 class="text-truncate m-2 fs-16">微信引擎微信小程序开发配置,破解版本代码对个人测试有效</h4> </a> </div> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/9bb46a3443b1398c.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2024/11/10/23dc3299f0039cacfb778d9d61b33500.thumb.jpeg"></div> <h4 class="text-truncate m-2 fs-16">济南小程序开发:为什么开发公司关注产品项目需求?</h4> </a> </div> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/8e4e55a916919340.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/06/16/cabad78691de2c0bf4e35e0e798b8e11.thumb.png"></div> <h4 class="text-truncate m-2 fs-16">2020年,以下小程序模式可用于创业和赚钱</h4> </a> </div> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/4d6894cb0f0462d2.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/08/25/c262cfc07b56e5151be134951293e6fd.thumb.jpeg"></div> <h4 class="text-truncate m-2 fs-16">多商店小程序开发</h4> </a> </div> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/194c47d6887544ab.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/09/17/dbf4e88aea25534036a85f2de33b1908.thumb.jpeg"></div> <h4 class="text-truncate m-2 fs-16">如何使用洗车小程序开发/充值营销</h4> </a> </div> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/0d22fab70243f80c.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/07/15/5a4347ef8d81c96f6de38c3a58dc07d3.thumb.jpeg"></div> <h4 class="text-truncate m-2 fs-16">深圳商城小程序开发报价</h4> </a> </div> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/508c08416a7374a6.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2024/11/19/b796d07a2919aa7e88b966907d7556a9.thumb.jpeg"></div> <h4 class="text-truncate m-2 fs-16">开发专用招聘网站小程序有什么好处?</h4> </a> </div> <div class="col-md-6 col-lg-6 col-xl-3"> <a class="card card-round mb-0 text-center shadow-1 hover-shadow-3" href="/service/xcx/9bf460cb12ba2cc8.html" target="_blank"> <div class="d-block h-120px bg-img" style="background-image:url(https://upload.unisoft.cn/image/bench_picture/2023/08/19/92e6a289bbce30c858f2b6b32bf17869.thumb.jpeg"></div> <h4 class="text-truncate m-2 fs-16">详细解释餐饮和订购小程序的开发过程和功能</h4> </a> </div> </div> </div> </div> <div class="col-sm-12 col-lg-4 col-xl-3 mt-200"> <h5>频道:</h5> <div class="card"> <a class="media media-bordered shadow-2" href="/service/xcx/" target="_blank"> <img class="avatar avatar-square avatar-lg" src="https://static-src.unisoft.cn/img/icon/service/xcx.png" /> <div class="media-body"> <h3 class="title text-truncate">小程序开发</h3> <div class="fs-12 mt-1 lh-15">小程序开发、微信公众号开发、微信小游戏开发</div> </div> </a> </div> <div class="card"> <h5 class="card-title">相关城市</h5> <div class="card-body"> <ul class="nav nav-pills text-center"> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=gs_lanzhoushi">兰州技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=shanghai_city">上海技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=zj_hangzhou">杭州技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=hn_zhengzhou">郑州技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=ah_hefei">合肥技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=gd_guangzhou">广州技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=gd_shenzhen">深圳技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=beijing_city">北京技术资讯</a></li> <li class="nav-item p-0"><a class="nav-link active" href="/service/article/?city=sc_chengdu">成都技术资讯</a></li> </ul> </div> </div> </div> </div> </div> </div> <script> var KNOWLEDGE_ID = 22421; </script> <script type="text/javascript"> var article_detail = new function () { var that = this; this.container = $('#article-detail'); this.detail = this.container.find('.detail-content'); this.filter = { category: 0, is_my: 0 }; this.is_editing = false; this.do_filter = function (forced) { this.container.data('disabled', false); //this.filter.level = $('select[name="level"]').selectpicker('val'); this.filter.is_my = $('input[name="is_my"]').prop('checked') ? 1 : 0; forced ? this.filter.page = 1 : delete(this.filter.page); //this.container.find('[type="checkbox"][value="0"]').prop('checked', false); this.container.data('filter', this.filter); this.container.trigger('update'); }; this.initial = function () { $('.form-filter nav,.form-filter input').change(function () { if ($(this).is('[name="q"]') || $(this).is('[name="timespan"]')) return; that.do_filter(1); }); this.container.find('[data-toggle="tab"]').on('click', function (e) { that.container.find('.back-btn').toggleClass('hide', $(this).attr('data-type') !== "unaudit") that.filter['type'] = $(this).data('type'); that.do_filter(1); }); this.bind(); } this.bind = function () { this.detail.data({ onChoose: function (evt) { article_category.detail.find('#nav-all').hide(); }, onUnchoose: function (evt) { article_category.detail.find('#nav-all').show(); }, onRemove: function (evt) { //that.detail.masonry('reloadItems').masonry('layout'); }, onEnd: function (evt) { article_category.detail.find('.nav-item').removeClass('choosen'); } }); function toggle_toolbar(card, s) { var controls = card.find('.card-controls'); if (s) { controls.find('[data-oper="time"]').hide().siblings().remove(); $(that.template.remove).appendTo(controls); $(that.template.tag).appendTo(controls); $(that.template.edit).appendTo(controls); } else { controls.find('[data-oper="time"]').show().siblings().remove(); } } this.detail.on('mouseenter', '.card-header', function (e) { if (that.is_editing || e.target.tagName == 'I' || e.target.tagName == 'A') return; toggle_toolbar($(this).closest('.card'), true); }).on('mouseleave', '.card-header', function (e) { if (that.is_editing) return; toggle_toolbar($(this).closest('.card'), false); }); //操作 this.detail.on('click', '[data-oper]', function () { var ID = $(this).closest('tr[data-id]').data('id'); var member_id = $(this).closest('tr[data-member-id]').data('member-id'); var _this = $(this); switch (_this.data('oper')) { //确认预约 case 'enable': $.post(STORE_URL + '/article/detail/' + ID + '/_update/', { type: 'enable' }, function (ret) { if (ret.code == 200) { setTimeout(function () { that.container.trigger('update'); }, 200); app.toast(ret.msg, 'success'); } else { app.toast(ret.msg, 'danger'); } }); break; //完成 case 'finish': $.post(STORE_URL + '/article/detail/' + ID + '/_update/', { type: 'finish' }, function (ret) { if (ret.code == 200) { var d = dialog({ padding: 0, content: $('#tmpl_finish_alert').html(), ok: function () { location.href = STORE_URL + 'order/publish/?service_id=' + ID + '&member_id=' + member_id; }, cancel: function () { setTimeout(function () { that.container.trigger('update'); }, 200); app.toast(ret.msg, 'success'); } }).showModal(); } else { app.toast(ret.msg, 'danger'); } }); break; case 'cancel': var d = dialog({ padding: 0, content: $('#tmpl_cancel_alert').html(), ok: function () { $.post(STORE_URL + '/article/detail/' + ID + '/_update/', { type: 'cancel' }, function (ret) { if (ret.code == 200) { setTimeout(function () { that.container.trigger('update'); }, 200); app.toast(ret.msg, 'success'); } else { app.toast(ret.msg, 'danger'); } }); }, cancel: function () { } }).showModal(this); break; default: ; } }); this.detail.on('click', '.btn-picker', function () { var _this = $(this), id = $(this).closest('.card').data('id'); var d = dialog({ padding: 20, content: $('#tmpl_article_theme').html(), quickClose: true, onshow: function () { $('.color-selector').data('id', id); $(document).on('change', 'input[name="theme"]', function () { d.remove(); }); }, onclose: function () { d.remove(); } }).showModal(this); }); this.container.on('load', function (a, b, ret) { that.detail.find('[data-max-height]').each(function (i, ele) { var _this = $(ele).css('height', 'auto'), _mh = parseInt(_this.data('max-height')); if (_this.height() / _mh > 1.5) { _this.css('overflow', 'hidden').outerHeight(_mh * 1.5); var sa = $('<div class="more"><a href="#"><i class="ti-angle-down"></i></a></div>').insertAfter(ele); sa.click(function () { sa.find('a').toggleClass('expand'); if (_this.css('overflow') == 'hidden') { _this.css('overflow', 'auto').css('height', 'auto'); sa.find('i').attr('class', 'ti-angle-up'); } else { _this.css('overflow', 'hidden').outerHeight(_mh); sa.find('i').attr('class', 'ti-angle-down'); } }); } }); if (ret.total) { $('.total').text('共 ' + ret.page_count + ' 页,' + ret.total + ' 条'); } else { $('.total').text(''); } }); } }; </script> <script> appready.push(function () { article_detail.initial(); }); </script> <!-- Footer --> <footer class="site-footer pt-50 pb-20"> <div class="container"> <div class="row gap-y"> <div class="col-lg-3"> <img class="w-90px" src="https://static-src.unisoft.cn/img/logo.svg?v=20260812v1" alt="统软云"> <p class="my-20">专业的企业应用服务PaaS平台<br />产品及服务咨询:<span class="text-num fs-13 ls-1">028-8625 0886</span></p> <div class="gap-items-2 mb-50"> <div class="btn-group btn-group-sm dropup"> <button class="btn btn-sm btn-float no-shadow" type="button" data-toggle="hover" style="border-radius:50%"><i class="fa fa-wechat fs-18"></i></button> <div class="dropdown-menu dropdown-menu-up"> <img src="https://static-src.unisoft.cn/img/qrcode/wechat.258.jpg" /> </div> </div> </div> </div> <div class="col-lg-9"> <div class="row"> <div class="col-6 col-sm-4 col-md-3 d-lg-block d-none col-lg-2"></div> <div class="col-6 col-sm-4 col-md-3 col-lg-2"> <h5 class="text-uppercase fs-14 ls-1">快速入口</h5> <ul class="nav flex-column mb-20"> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/bench/join/">查找工作台</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/feedback/">意见反馈</a> </li> <li class="nav-item"> <a class="nav-link" href="https://business.unisoft.cn/company/" target="_blank">企业黄页</a> </li> <li class="nav-item"> <a class="nav-link" href="https://business.unisoft.cn/service/" target="_blank">商务服务</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/service/lead/">提交需求</a> </li> </ul> </div> <div class="col-6 col-sm-4 col-md-3 col-lg-2"> <h5 class="text-uppercase fs-14 ls-1">应用开发</h5> <ul class="nav flex-column mb-20"> <li class="nav-item"> <a href="/solution/social_applications/" class="nav-link">社交类应用</a> </li> <li class="nav-item"> <a href="/solution/e_commerce_applications/" class="nav-link">电商类应用</a> </li> <li class="nav-item"> <a href="/solution/tool_applications/" class="nav-link">工具类应用</a> </li> <li class="nav-item"> <a href="/solution/educational_applications/" class="nav-link">教育类应用</a> </li> <li class="nav-item"> <a href="/solution/o2o_platform/" class="nav-link">O2O平台</a> </li> <li class="nav-item"> <a href="/solution/live_platform/" class="nav-link">直播平台</a> </li> </ul> </div> <div class="col-6 col-sm-4 col-md-3 col-lg-2"> <h5 class="text-uppercase fs-14 ls-1">解决方案</h5> <ul class="nav flex-column mb-20"> <li class="nav-item"> <a href="/solution/iot_platform_private/" class="nav-link">物联网云平台私有化</a> </li> <li class="nav-item"> <a href="/solution/hardware_customize/" class="nav-link">智能硬件设计/开发</a> </li> <li class="nav-item"> <a href="/solution/iot_client/" class="nav-link">物联网客户端</a> </li> <li class="nav-item"> <a href="/solution/data_crawler/" class="nav-link">数据爬虫/采集</a> </li> <li class="nav-item"> <a href="/solution/data_processing/" class="nav-link">数据处理</a> </li> <li class="nav-item"> <a href="/solution/analysis_and_visualization/" class="nav-link">数据分析与可视化</a> </li> <li class="nav-item"> <a href="/solution/public_opinion_monitoring/" class="nav-link">舆情监测</a> </li> </ul> </div> <div class="col-6 col-sm-4 col-md-3 col-lg-2"> <h5 class="text-uppercase fs-14 ls-1">支持与服务</h5> <ul class="nav flex-column mb-20"> <li class="nav-item"> <a class="nav-link" href="https://help.unisoft.cn" target="_blank">帮助中心</a> </li> <li class="nav-item"> <a class="nav-link" href="https://developer.unisoft.cn" target="_blank">开发者社区</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/feedback/">意见反馈</a> </li> </ul> </div> <div class="col-md-3 col-sm-4 col-lg-2"> <h5 class="text-uppercase fs-14 ls-1">公司</h5> <ul class="nav flex-column mb-20"> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/about/">关于我们</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/contact/">联络方式</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/career/">工作机会</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/article/">行业资讯</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/partner/">合作伙伴</a> </li> </ul> </div> </div> </div> </div> <hr> <div class="row"> <div class="col-md-4"> <div class="text-center text-md-left">Copyrights © 2026 <a href="https://www.unisoft.cn/">Unisoft</a>. All rights reserved.</div> </div> <div class="col-md-8"> <ul class="nav nav-primary nav-dotted nav-dot-separated justify-content-center justify-content-md-end"> <li class="nav-item hide"> <a class="nav-link" href="https://www.unisoft.cn/">统软云</a> </li> <li class="nav-item hide"> <a class="nav-link" href="https://www.thingboot.com/">芯步</a> </li> <li class="nav-item hide"> <a class="nav-link" href="https://www.yoyoiot.cn/">友友物联</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/page/disclaimer/" rel="nofollow">版权声明</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/page/privacy/" rel="nofollow">隐私保护</a> </li> <li class="nav-item"> <a class="nav-link" href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备17041052号-9</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.unisoft.cn/page/icp/" rel="nofollow">川B2-20180511</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002003206" target="_blank" rel="nofollow"><img style="width:15px;margin-top:-5px" src="https://static-src.unisoft.cn/img/icon/ghs.png" /> 川公网安备51019002003206号</a> </li> </ul> </div> </div> </div> </footer> <!-- END Footer --> </main> <!-- END Main container --> <div class="site-floor"> <div class="container d-none"> <div class="service"> <img src="https://static-src.unisoft.cn/img/widget/floor-service3.png"> </div> <div class="poster"> <p class="remark">留下联系方式,工程师会及时与您取得联系 <small class="pl-1 text-lighter">或致电:<a class="text-num" href="tel:028-86250886">028 - 8625 0886</a>、<a class="text-num" href="tel:18500860080">185 0086 0080</a></small></p> <form id="form_consult" data-provide="form" data-reset="true" method="post" action="/service/lead/post/"> <div class="input-group input-group-round"> <div class="input-group-prepend"><span class="input-group-text w-10"><i class="ti-headphone-alt"></i></span></div> <input type="text" class="form-control w-30 fs-16 bold" name="appellation" autocomplete="off" placeholder="怎么称呼您"> <input type="text" id="form_mobile" class="form-control w-30 fs-16 bold text-num ls-1" data-mask="mobile" autocomplete="off" placeholder="请输入手机号"> <input type="hidden" name="mobile"> <span class="input-group-append w-20"><button class="btn btn-block btn-danger px-0" type="submit"><i class="fa fa-paper-plane"></i> 发送</button></span> </div> </form> </div> <div class="qrcode"> <img class="b-2 border-dark w-120px h-120px" src="https://static-src.unisoft.cn/img/qrcode/unisoft-tyan.jpg"> <br /><small class="text-white">扫码联系售前工程师</small> </div> </div> <button type="button" class="btn-close"></button> <button type="button" class="btn btn-float btn-primary btn-open w-50px h-50px d-none"><i class="ti-notepad"></i></button> </div> <script> var site_floor = $('.site-floor'); function _show_site_floor(s) { G.state('site_floor', s); site_floor.find('>.btn-open').toggleClass('d-none', s); $(document.body).css('padding-bottom', s ? site_floor.height() : 0); site_floor.find('>.container').toggleClass('d-none', !s); } function _scroll_site_floor(s) { if (site_floor.is('.popup')) return; if (G.state('site_floor') === false) { site_floor.find('>.btn-open').toggleClass('d-none', s); } else { $(document.body).css('padding-bottom', s ? 0 : site_floor.height()); site_floor.find('>.container').toggleClass('d-none', s); } } $(document).on('click', '.btn-open-consult', function () { site_floor.addClass('popup'); _show_site_floor(true); }); $(document).scroll(function () { if ($(document.body).height() - $(window).height() < 200) { _scroll_site_floor(true); } else { var s = $(document).scrollTop() < 200; _scroll_site_floor(s); } }); site_floor.on('click', '>.btn-open', function () { _show_site_floor(true); }); site_floor.on('click', '>.btn-close', function () { if (site_floor.is('.popup')) { site_floor.removeClass('popup'); $(document).scroll(); return; } _show_site_floor(false); }); site_floor.find('form').data('after', function () { app.toast('提交成功,工程师将很快与您联系'); site_floor.find('form').get(0).reset(); }); site_floor.find('form').on('keyup', '#form_mobile', function () { $(this).next().val($(this).val().replaceAll('1', '*')); }); $(document).scroll(); </script> <!-- Scripts --> <script src="https://static-src.unisoft.cn/js/app.js?v=20260812v1"></script> <script src="https://static-src.unisoft.cn/js/script.js?v=20260812v1" id="sys-script"></script> <!-- DO NOT REMOVE --> <!-- JavaScripts initializations and stuff --> <div style="display:none;" id="__crond"> <script type="text/javascript"> (function () { var uim = document.createElement("script"); uim.src = "https://im.unisoft.cn/im.js?rnajroSqeal_dXLZhnyjlbB9rGOLs29z"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(uim, s); })(); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?4ccfca52b547be4e89c7a4f6dec34d03e201a75d1578d363742d466cce1c241cfd9a9dcb5ced4d7780eb6f3bbd089073c2a6d54440560d63862bbf4ec01bba3a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <script> $.get('/api/seo/?url=https://www.unisoft.cn/service/xcx/88121132d2ea25ee.html'); </script> </div> <div style="display:none"> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5734180a8c8a34f836f2f52609525315"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <!-- Escape time: 0.24289798736572 --> <!-- / DO NOT REMOVE --> </body> </html>