百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

第2天|16天搞定Vue3.0,Vue3.0的核心(必学)

bigegpt 2025-03-10 12:41 5 浏览

在我上班的企业,这是第2个产品在使用Vue3.0了。对于学过HTML、CSS和JavaScript的朋友,完全有必要升级一下个人技能,补充上Vue3.0的知识。Vue封装了JavaScript,核心库只关注视图层,不仅上手快,还便于与第三方库或既有项目整合。

Vue是一个构建数据驱动的系统,web界面的渐进式框架,目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。如果你想马上使用,那就赶紧安装Vue.js去。

2.1 如何安装Vue

大多数人在说到安装Vue时,都是依样画葫芦,生搬硬套,缺少个人想法。按推荐三板斧,安装Vue,不是引用CDN地址、不是用npm指令,就是用CLI脚手架。

好多人一看npm和CLI,顿时就对Vue没了兴趣。搞什么玩意,学习Vue.js,还要搞这些?

也有好多人推荐用<script src="https://unpkg.com/vue@next"></script>,就是引用CDN的方式。从https名字,你就知道,这是引用网上的资源。可网络差或断网的话,怎么办,不学了?

考虑到你的困惑,我回想到了以前的传统方法,就是直接到
https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/下载vue.global.js文件,然后在要用Vue的HTML文件中引用就好了!

2.2 Vue3.0倍轻松

在Vue3.0中,每个Vue应用都是通过用createApp函数创建一个新的应用实例开始的,这种统一的应用方式,让你学起来更加轻松。学习Vue3.0,就是对其生命周期的中函数,有的放矢,加加减减,或独立或联合。生命周期图,你不用记忆,也不用背诵,浏览一下就好,后面会逐步讲解的。

用第1个框图中的createApp和mount搞个样例,让代码飘一会。




    
    第1个vue3.0
    
    <script src="vue.global.js"></script>



大家好,{{ msg }}
<script> const vue = Vue.createApp({ data() { return { msg: "我是老陈,我爱分享编程之vue3.0" } } }) vue.mount("#hello") </script>

输出结果

2.3 Vue3.0三步曲

应用Vue3.0,可按三步曲进行,1是定义将要赋予元素的数据,2是声明Vue实例,3是将数据和元素进行绑定。定下这个调调之后,后面就是学习它的语法(模板、条件和组件等)和生命周期函数的应用了。

为了方便和提高代码的可读性,定义数据和Vue实例,常常放在一起声明。为了让你更清晰Vue的意义,我就来个数据绑定的例子。




    
    第2个vue3.0
    
    <script src="vue.global.js"></script>



想学编程的人,快点来,{{ msg }}在咆哮vue3.0了。

<script> // 第1步:data数据;第2步:vue实例,第3步:绑定元素 Vue.createApp({ data() { return { msg: '' } } }).mount("#hello") </script>

输出结果

好了,有关Vue3.0的核心内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注今日头条:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。

#前端##Vue.js##JavaScript##Web##小程序#

相关推荐

科氪 | 华硕天选6系列正式发布,搭载满功耗RTX 5060实际到手5999元起

5月19日晚,华硕旗下潮玩新次元游戏本天选6系列正式发布。作为Z世代青年的潮酷游戏装备,天选6系列再一次印证了其出色的综合实力。搭载满功耗RTX5060笔记本电脑GPU的天选6Pro以及天选6皆...

最新历史最低价显卡汇总!低端高端一网打尽

文|宋金戈责编|吕东兴总编|唐迪近期开展的618大促,各个品类尤其是数码科技好物的产品优惠都诚意满满,而作为消费者最关心的大类之一,显卡在最近同样表现不俗——华硕、技嘉等多个品牌,从1660s...

DNF:南山必胜客“败诉”,TX被DD373实锤,谁说玩家只有使用权?

TX和DD373的官司终于落下帷幕,南山必胜客终于中断了传奇。TX这一次被判定败诉。其中关于游戏账号和虚拟财产的问题,最受玩家关注。之前TX所说的:游戏账号不是玩家私有财产,游戏币更不是,只有使用权!...

Switch最新SX OS破解系统发布:可运行国行卡带xci镜像了

本周,TX团队(Team-Xecuter)发布了SXOS自制系统的最新版本,v2.9.5Beta,该版本支持了任天堂最新的V10.0.0和v10.0.1固件,同时改善了兼容性,优化了本地联机的稳定...

神舟战神TX8R5 QHD游戏本电脑今晚开售:2.5K屏+RTX4060,6999元

IT之家4月9日消息,神舟战神TX8R5QHD游戏本电脑今晚12点正式开售,仅有16GB+512GB一个版本可选,售价6999元。神舟战神TX8R5QHD搭载13代酷...

开创第三代手游商业模式《武极天下》推无商城玩法

翻阅游戏论坛与贴吧,大家对网络游戏的一些“坑爹”的设定抱怨不已,不是游戏职业设定不合理,就是游戏太烧钱,在游戏中被碾压的抬不起头,最后从玩游戏变成了被游戏玩,俨然游戏本质完全变味。由巨人移动自主研发并...

真满血Gen5电竞存储神装!佰维X570 Pro天启高速固态硬盘测评

2025一开年,对于存储行业来说,就是速度狂飙的开局。各固态硬盘品牌PCIe5.0SSD纷纷亮相,开启了新一轮的性能PK。在2024年异常活跃的佰维科技,也于CES期间推出了佰维X570PRO...

Kingston FURY Renegade G5评测 最速PCIe5.0固态硬盘诞生

【ZOL中关村在线原创评测】说起KingstonFURYRenegade叛逆者的大名,相信PCDIY玩家都知道这是金士顿高端存储的代名词,尤其是内存产品给人印象尤为深刻。实际上它还有固态硬盘系列...

《武极天下》力挺苹果TestFlight创业界先河

关于革旧鼎新,有人说就像是摸石头过河,在摸索中前行。一场正真的创新改革会带来什么?在数字行业,苹果公司的每一个产品都代表着一个时代的开启,它独立的操作系统、顺应用户需求的体验设计,在十几年时间内收获了...

闪迪至尊超极速移动固态硬盘USB4版评测 超越SSD的三防猛兽

移动固态硬盘,凭借TB级的容量和远超传统移动机械硬盘几倍、十几倍的速度,当仁不让地成为高效移动存储的代名词,为4K/8K超高清内容创作、海量文件备份带来了超乎想象的效率提升。国际知名品牌SanDisk...

RTX5070笔记本有哪些:游戏笔记本电脑哪个牌子好?

RTX5070游戏本,个人其实不是很喜欢,对于新款显卡,要不就考虑RTX5060,要不就考虑12GB显存的RTX5070Ti这样好一些,从RTX5070显卡的游戏本的量,也能看出来,估计5060会更多...

破军天下安装指南详解 游戏安装方法介绍

破军天下游戏怎么正确安装?破军天下安装方法是什么?对于破军天下中的安装问题,今天安趣网小编就为各位玩家小伙伴来好好的讲解下,让我们一起来看看,破军天下怎么正确安装游戏的吧!希望大家喜欢!安卓系统(An...

从高性能轻薄本到硬核电竞本 华硕天选新品解锁全场景体验

来源:环球网【环球网科技综合报道】5月19日,华硕天选多款笔记本新品正式发布。其中,14英寸轻薄全能本标杆华硕天选Air2025正式发布,显卡升级至GeForceRTX5060笔记本电脑GPU...

笔记本无线网卡有哪几种 有必要对其升级吗?

无线网卡是很多朋友购买笔记本时容易忽视的部分,相比较处理器、内存、显卡和硬盘,无线网卡几乎不可选,而且很少有厂商提到自家产品采用的无线网卡型号。大家可能遇到过这种情况:为什么手机可以连接到5Ghz,而...

下班了才发现,你的手机里藏着5个定时炸弹!

各位打工人累了一天终于可以躺平刷手机了吧?且慢!工信部最新通知,有些App比加班还可怕!它们可能正在偷偷收集你的信息,比你的老板还要了解你!今天就让我们一起来扒一扒这些“职场内鬼“,看看你的手机里有没...