前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue简介

Vue简介

作者头像
达达前端
发布于 2019-07-14 06:10:38
发布于 2019-07-14 06:10:38
69100
代码可运行
举报
文章被收录于专栏:达达前端达达前端
运行总次数:0
代码可运行

Vue简介

jquery业务逻辑和UI更改混在一起 Vue数据驱动,玩的就是数据

Vue、React、Angular各有各的好处 Vue上手容易

Vue官方:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://cn.Vuejs.org/index.html

开发环境安装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g Vue-cli

Vue init webpack helloworld

image.png

image.png

运行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cd helloworld
npm run dev  开发
npm run build 编译
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install vue-router

image.png

image.png

激活导航设置方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
linkActiveClass:'active'

数据交互-axios

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install axios

image.png

image.png

发送请求可以在creted()钩子内,也可以在mounted()

image.png

vue.js 中 data, prop, computed, method,watch 介绍

data 定义以及展示数据 computed 对数据进行复杂的操作转换

image.png

image.png

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
├── api
│   └── api.js              //接口
├── app.wpy                 //入口文件
├── components                  //组件
│   ├── address_add.wpy         //新增地址组件
│   ├── address_edit.wpy        //编辑地址组件
│   ├── address_list.wpy        //地址列表组件
│   ├── bomb_screen.wpy         //首页弹屏组件
│   ├── collection_list.wpy     //收藏列表组件
│   ├── comment_list.wpy        //评论列表组件
│   ├── common              //公共组件
│   │   ├── bottomLoadMore.wpy      //底部加载更多组件
│   │   ├── placeholder.wpy         //空列表显示组件
│   │   ├── timer.wpy               //倒计时组件
│   │   ├── wepy-area-picker.wpy    //省市区组件
│   │   ├── wepy-sign-time.wpy      //签到组件
│   │   └── wepy-swipe-delete.wpy   //左滑删除组件
│   ├── discover.wpy        //发现列表
│   ├── filterSlider.wpy    //筛选右侧栏组件
│   ├── filter_bar.wpy      //分类排序组件
│   ├── order_item.wpy      //订单列表组件
│   ├── points_detail.wpy   //列表组件
│   ├── points_rule.wpy     //列表组件
│   ├── rate.wpy            //评分组件
│   ├── search.wpy          //搜索组件
│   ├── shop_cart.wpy       //购物车组件
│   ├── shop_grid_list.wpy  //矩阵列表
│   ├── shop_item_list.wpy  //条形列表
│   └── tab.wpy             //选项卡组件
├── images                  //图片文件夹
├── pages                   //页面
│   ├── address.wpy         //地址
│   ├── classify.wpy        //分类
│   ├── collection.wpy      //收藏
│   ├── comfire_order.wpy   //确认订单
│   ├── comment.wpy         //评论列表
│   ├── comment_add.wpy     //添加评论
│   ├── exchange_goods.wpy  //换货
│   ├── filter.wpy          //筛选
│   ├── goods_detail.wpy    //商品详情
│   ├── home.wpy            //首页
│   ├── home_detail.wpy     //首页详情
│   ├── info.wpy            //我的
│   ├── logistics.wpy       //物流
│   ├── messages.wpy        //我的消息
│   ├── order.wpy           //订单列表
│   ├── order_detail.wpy    //订单详情
│   ├── pay_success.wpy     //支付结果
│   ├── points.wpy          //积分
│   ├── points_more.wpy     //更多积分
│   ├── points_rule.wpy     //积分规则
│   ├── register.wpy        //注册
│   ├── reorder.wpy         //--
│   ├── replenishment_goods.wpy //补货
│   ├── search.wpy          //搜索
│   ├── setting.wpy         //设置
│   ├── shop_cart.wpy       //购物车
│   ├── sign_in.wpy         //签到
│   ├── test.wpy            //---
│   └── wholesale.wpy       //现货批发
├── plugins                 //插件
│   └── wxParse             //富文本
│       ├── html2json.js
│       ├── htmlparser.js
│       ├── showdown.js
│       ├── wxDiscode.js
│       ├── wxParse.js
│       ├── wxParse.wxml
│       └── wxParse.wxss    
├── styles                  //样式
│   ├── base.less
│   ├── icon.less           // 图标文件
│   └── style.less
└── utils                   //工具类
    ├── constant.js             //常量
    ├── md5.js                  //md5
    ├── regions.js              //省市区数据
    ├── tip.js                  //提示弹框组件
    ├── util.js                 //工具
    └── wxRequest.js            //ajax请求

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.07.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
直播预告|腾讯有哪些优秀的开源项目?Serverless Components了解一下?
回首当年,技术开源就像黑夜里划过的一颗火流星,照亮了被垄断私有笼罩的软件世界,在每个人心中播下了开放兼容的种子。 经过这么多年的发展,无数的技术先驱、公司组织、开发者们满怀热忱和期待投入到开源技术生态的建设中,成就了一个又一个大名鼎鼎的开源项目,惠及到万千用户,让开源技术成为了技术圈中举足轻重的一股力量。于此同时,国内开源风潮也日渐崛起,正在引领新的技术风尚。 那么,开源的本质到底是什么?开源生态的进一步发展,对于我们每一位开发者来说究竟有着怎样的意义?此外,又有哪些国产的开源项目值得期待?优秀程序员,应
腾讯云serverless团队
2020/10/21
6620
下午2点准时开播,听技术大咖讲透云原生最新实践
云+社区沙龙online「云原生」专场将于今天下午14:00~17:30准时举行,7位业界大V同台共享云原生领域的最新实践,与你一起探讨优秀程序员,如何更好拥抱云原生技术。 扫描下方海报二维码或点击下列报名链接,即可免费预约和观看直播,参与提问互动更有机会获得鹅厂公仔等精美礼物哦~~ https://cloud.tencent.com/developer/salon/live-1359channel=gzh
腾讯云开发者
2021/03/15
2790
如何通过创作实现技术人职场的内外兼修?| 分享抽定制好礼
技术人的职场发展,会遇到很多不同的瓶颈,应该如何跳出职场桎梏,通过技术创作打造更稳固的副业技能?创作初期又该如何着手,将专业经验外化成文字,建设自身品牌?从零开始的创作者,该如何高效锤炼自己的创作技能,成为输出又快又好的创作大拿?
TVP官方团队
2023/12/29
1740
如何通过创作实现技术人职场的内外兼修?| 分享抽定制好礼
腾讯重磅技术创作特训营:创作避坑与AI提效指南 | 分享抽键盘长鹅
技术创作的道路总是伴随着无数的问题,为何而作?写在哪里?写什么?这些问题构成了各式各样的「坑」,令技术创作者避之不及。而随着今年 AIGC 能力的爆发,借助 AI 来辅助创作,似乎提供了解答这些问题的新方案。但新的问题也接踵而至,AI+技术创作应该如何使用才能更高效?AI 技术的应用对于内容生产是否会产生新桎梏?
腾讯云开发者
2023/10/26
2660
腾讯重磅技术创作特训营:创作避坑与AI提效指南 | 分享抽键盘长鹅
技术创作特训营第4期:通过创作助力技术人职场内外兼修! | 内含抽定制好礼
技术人的职场发展,会遇到很多不同的瓶颈,应该如何跳出职场桎梏,通过技术创作打造更稳固的副业技能?创作初期又该如何着手,将专业经验外化成文字,建设自身品牌?从零开始的创作者,该如何高效锤炼自己的创作技能,成为输出又快又好的创作大拿?
腾讯云开发者
2023/11/23
2250
技术创作特训营第4期:通过创作助力技术人职场内外兼修! | 内含抽定制好礼
首届鹅厂DB吐槽大会,约你来战
导语 | 使用数据库的过程中,总有那么些问题不吐不快?成本高、灾备不好做、运维耗时耗力、半天找不到故障原因?那这边建议您体验云数据库,打开新的“槽点世界”~ 腾讯云数据库作为国内首屈一指的数据库服务提供商,拥有二十余款明星产品全方位满足不同行业和规模用户的需求,可轻松运维主流开源及商业数据库(MySQL、Redis、SQL Server、PostgreSQL等),提供备份、恢复、监控、DTS、灾备和数据库智能管家DBbrain 等数据库运维全流程服务,并积极自主研发国产数据库技术,推出TDSQL、TBa
腾讯云数据库 TencentDB
2020/06/12
8570
AI大爆炸时代如何实现技术创作“开挂”?技术创作特训营第二期,限时报名赢好礼
在这个由人工智能引领的创作大爆炸时代,每一位创作者都有机会成为自己故事的主宰。开发者们拥有丰富的技术知识和经验,拥有照亮他人、引领时代的潜力。与此同时,近年来 AIGC 工具爆发式增长,技术创作者面临的机遇与挑战被加倍放大。工具眼花缭乱,反而成为压垮创作热情的最后一根稻草?AIGC 让作品失去灵魂、缺点人味?工具让大部分内向的程序员更会表达?主观的犹豫与客观的挑战,如同无形的屏障,让许多开发者在技术创作之途中徘徊不前...
腾讯云开发者
2024/06/03
1780
AI大爆炸时代如何实现技术创作“开挂”?技术创作特训营第二期,限时报名赢好礼
程序员的写作指南(内含福利)
本月开始,腾讯云开发者社区将举办技术创作特训营。每期将会有内行大佬带来压箱底的方法论,更会有专业技术自媒体为你的文章进行1v1点评。
腾讯云开发者
2023/08/03
2280
程序员的写作指南(内含福利)
研发人如何用写作让自己增值?鹅厂技术创作特训营回归,限时报名抽周边
近年来, AIGC 工具爆发式增长,技术创作者面临的机遇与挑战被加倍放大。层出不穷的工具,反而成为压垮创作热情的最后一根稻草?AIGC 让作品失去灵魂、缺点人情味?工具让大部分内向的程序员更会表达?其实,写作对于程序员来说,不仅仅是一种技能的提升,更是一种自我投资的方式。但由于主观的犹豫与客观的挑战,如同无形的屏障,让许多开发者在技术创作之途中徘徊不前。
腾讯云开发者
2024/04/12
1270
研发人如何用写作让自己增值?鹅厂技术创作特训营回归,限时报名抽周边
周四见!腾讯全球数字生态大会主峰会和数据库专场
腾讯数字生态大会亮点纷呈,9月7-8日(本周四和周五),腾讯云数据库专场将为大家带来一场与国产数据库&云原生数据库有关的技术盛宴,快来报名吧!
腾讯云数据库 TencentDB
2023/09/06
5320
周四见!腾讯全球数字生态大会主峰会和数据库专场
微信支付背后的数据库开源故事
开源,是一个技术圈令人激动的话题。 尤其是现在这个数据爆炸和技术迭代极快的时代,各种各样的软件和工具百花齐放,得益于开源项目,行业技术和业内生态可以更加迅速得发展和前行,开源项目就像技术圈的公共设施,免费为各位技术人提供需要的资源,造福世界。 开源个人而言,意味着更多学习的机会,免去重复造车的成本,能够将时间投入到有价值有意义的项目中去,也可以站在巨人的肩膀上看到不一样的风景。 对于企业而言,可以节省大量的人力和物力成本,在节省成本的同时还可以根据源代码开发出更多个性化的功能。同时本身优秀的项目开源也可
腾讯云数据库 TencentDB
2020/10/28
6780
万千商机、数智化转型,尽在腾讯连连IoT产品推介会!
解物联网企业之所需,助力企业转型升级 腾讯连连IoT产品推介会来啦! 随着物联网、5G、人工智能等数字化技术的发展,产业智造升级。腾讯连连联合合作伙伴打造了多个解决方案助力企业高效实现数智化转型。同时腾讯连连希望与更多伙伴合作,共建生态服务圈,共赢万亿市场!本次腾讯连连IoT产品推介会,将围绕产业物联专题解物联网企业之所需。 8月26日(周四) 19:00-20:30 我们不见不散 扫描海报二维码预约直播 迫不及待地想感受这场物联网商业盛宴? 点击【阅读原文】或扫描上方二维码立即报名,了
腾讯云开发者
2021/08/23
3430
直播间 | 线下迁移线上,如何打造自己的在线教育方案?
疫情特殊时期,为响应教育部“停课不停教,停课不停学”的号召。 众多教育机构、学校、企业等纷纷转移线上,通过直播点播、互动等音视频方案实现在线课堂。 上亿新用户的涌入,让在线教育行业意外的迎来了增长的“春天”。 可是,在家上课却并没有想象中的那么“有趣”和“轻松”,教育从线下转移到线上,面临着诸多困难。 传统教师不适应线上教学的环境和风格,难以快速迭代线上课程内容;监管互动方式改变,如何调动学生自主学习能力;软件工具状况频发,影响课程体验...... 不同教育场景下,应该选择怎样的在线方式?在线教育工具如
腾讯云音视频
2020/03/10
8200
鹅厂限定周边、大额代金券等你赢!云开发实战+分享活动来袭!
📣 开发者们注意啦! 腾讯云开发"码"上实战,赢取好礼活动正式启动!无论你是想通过实战提升技能,还是乐于分享技术心得,都有机会赢取云开发专属大额代金券、王者荣
腾讯云开发者
2025/02/20
6.1K0
鹅厂限定周边、大额代金券等你赢!云开发实战+分享活动来袭!
程序员久等了!腾讯官方技术创作特训营来了~名额有限,先到先得
【写文出真知 · 前辈点评】开课后三周,在社区写文章,可获技术创作前辈 1v1 点评指导。纸上得来终觉浅,唯有实践出真知 。
腾讯云开发者
2023/07/28
5630
程序员久等了!腾讯官方技术创作特训营来了~名额有限,先到先得
由腾讯承办的第四届“绽放杯”智慧生活专题决赛今日举行,25个优秀入围项目参与路演
作为第四届“绽放杯”5G应用征集大赛的一环,由腾讯联合中国信息通信研究院、5G应用产业方阵、IMT-2020(5G)推进组共同主办的“智慧生活专题赛”将于9月28日正式展开决赛。 智慧生活专题赛以“全真互联,数字生活”为主题,面向全社会征集与5G相关的生活类应用场景和解决方案。腾讯作为首个承办绽放杯专题赛的互联网厂商,腾讯5G生态计划和腾讯WE5G平台将作为主要承办方,云+社区、腾讯研究院、网络平台部、腾讯视频和腾讯文档等团队,作为联合承办单位,共同为专题赛提供全方位支持。 经过多方筛选,25个优秀项
腾讯云开发者
2021/09/28
3610
「云开发CTO交流日·上海站」报名开启!
云计算拉起第四次工业革命的号角,技术驱动企业发展已是不争的事实。作为技术管理者,如何在极速迭代的技术潮流中保持敏锐嗅觉和开阔的技术视野?如何充分发挥人与先进技术之间的协同效能,打造一支优秀的技术团队?如何用新技术的力量推动企业发展? 本周五,一起来「云开发CTO交流日」聊聊吧!不仅能线下参观腾讯公司,还能和众多技术专家面对面交流,共同探讨技术驱动企业进步之道。 活动时间 10月16日(周五)10:00-12:30 活动地点 上海徐汇区腾云大厦 参会嘉宾 王倩 英文名 Sherrie,腾讯云云开
腾讯云开发TCB
2020/10/14
9980
邀您参会 | 首届TDSQL开源生态私享会
随着新一轮科技革命浪潮的推进,数据规模呈现爆发式的增长,数据类型愈发丰富,数据应用也在快速深化。值此背景下,数据库的发展呈现出“云原生、国产化、开源共建”三大趋势。 开源代表的是“多方协同、合作共赢、未来共享”的开放生态趋势,更是汇聚全球智慧的合作共建。数据库开源,也是建设国产数据库生态,以技术开放促进技术创新,最终满足更广泛的客户需求的重要推动力量。 作为国内最早致力于开源的厂商之一,腾讯一直在推动国产数据库的发展,其自主研发的分布式数据库引擎TDSQL PG版已于2019年正式开源(开源代号TBa
腾讯云数据库 TencentDB
2021/07/28
6360
9月22日,Weda Platform产品技术交流会,广州见
9月22日(本周五),Weda Platform产品技术交流会将走到广州与大家见面,邀请腾讯低代码团队(包括云开发、云托管、网关、微搭低代码等产品)的产品、开发专家,与大家一起交流低代码领域的产品和技术点,为大家解答以上疑惑!Weda Platform提供怎样的新能力、有哪些成熟案例的落地、以及如何用20分钟搭建完整线上应用,产品技术交流会为大家一一介绍。
腾讯云开发TCB
2023/09/19
2090
9月22日,Weda Platform产品技术交流会,广州见
腾讯技术创作特训营开班!用写作开启职业生涯新爆点 | 内含福利
技术人的职业生涯,大多都是持续不断地在与代码、bug 的斗争中度过。996 爆肝、35 岁危机、职业发展瓶颈,数不清的压力正在席卷着技术人。按部就班地工作,似乎成了一道枷锁,锁死了很多技术人员的创造力,也锁死了未来的职业方向。
TVP官方团队
2023/09/14
2050
腾讯技术创作特训营开班!用写作开启职业生涯新爆点 | 内含福利
推荐阅读
直播预告|腾讯有哪些优秀的开源项目?Serverless Components了解一下?
6620
下午2点准时开播,听技术大咖讲透云原生最新实践
2790
如何通过创作实现技术人职场的内外兼修?| 分享抽定制好礼
1740
腾讯重磅技术创作特训营:创作避坑与AI提效指南 | 分享抽键盘长鹅
2660
技术创作特训营第4期:通过创作助力技术人职场内外兼修! | 内含抽定制好礼
2250
首届鹅厂DB吐槽大会,约你来战
8570
AI大爆炸时代如何实现技术创作“开挂”?技术创作特训营第二期,限时报名赢好礼
1780
程序员的写作指南(内含福利)
2280
研发人如何用写作让自己增值?鹅厂技术创作特训营回归,限时报名抽周边
1270
周四见!腾讯全球数字生态大会主峰会和数据库专场
5320
微信支付背后的数据库开源故事
6780
万千商机、数智化转型,尽在腾讯连连IoT产品推介会!
3430
直播间 | 线下迁移线上,如何打造自己的在线教育方案?
8200
鹅厂限定周边、大额代金券等你赢!云开发实战+分享活动来袭!
6.1K0
程序员久等了!腾讯官方技术创作特训营来了~名额有限,先到先得
5630
由腾讯承办的第四届“绽放杯”智慧生活专题决赛今日举行,25个优秀入围项目参与路演
3610
「云开发CTO交流日·上海站」报名开启!
9980
邀您参会 | 首届TDSQL开源生态私享会
6360
9月22日,Weda Platform产品技术交流会,广州见
2090
腾讯技术创作特训营开班!用写作开启职业生涯新爆点 | 内含福利
2050
相关推荐
直播预告|腾讯有哪些优秀的开源项目?Serverless Components了解一下?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验