create account

每天进步一点点:学习Vue.js的一小步 by oflyhigh

View this thread on: hive.blogpeakd.comecency.com
· @oflyhigh ·
$52.14
每天进步一点点:学习Vue.js的一小步
最近突发奇想,打算把cutehive.com的网站重新弄一下,之所以有这个想法,是因为我那个网站代码几乎全部手敲,维护起来太麻烦了。


![image.png](https://images.hive.blog/DQmNhqbpaLcPZ6XEMRqfejDwGvURYtRYjy1ZjusbMCMcnRk/image.png)
(图源 :[pixabay](https://pixabay.com/photos/web-design-laptop-html-design-2038872/))

在过去的几年里,许多建站技术、框架和建站工具都得到了广泛的应用,并被用于构建各种各样的网站。而我还停留在90年代的记事本(或者vi)手写代码的阶段,实在是Low爆了。

听说Vue.js 就是一个非常优秀开源的 JavaScript 框架,非常简单灵活,而且据说是国内的大神(E尤雨溪van You)创建的,我决定尝试学习一下。

首先,我找了一些vue教程来看,以及官方网站的Quick Start教程,可是看得我一头雾水,哎,算了,不如直接先实践一下。

想到以前学习各种语言,都先写一个`Hello World`代码,然后试着运行,通过这个来了解最基本的代码以及流程。

那么Vue版的`Hello World`应该是什么样子呢?我不想安装Vue,只想测试一下,所以通过CDN使用Vue暂时对我来讲是最好的选择。

我们可以在代码中插入如下script标签,来通过CDN使用Vue:
>`<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>`

从Vue的网站上找到的最简单的Hello World例子(Hello Vue!)大概是这个样子:
>![image.png](https://images.hive.blog/DQmYr3ERLeQv9nTsuZ4vt57LKtnH9YVkGAPpEhhevyqZn4u/image.png)

可是这玩意该如何执行啊?研究了半天,发现似乎据说大概是,可以写一个html文件,然后把这部分代码插入进去,就可以执行啦。

比如说这样一个最简单index.html文件:
>![image.png](https://images.hive.blog/DQmQPpJzoV2mNne31mRMiraWqdG9cNAmG6hnuAhXzJYjxyr/image.png)

将上述代码,插入到`<body>`以及`</body>`之间,就可以啦,插完是这个样子:
>![1670667423524.png](https://images.hive.blog/DQmaDCLpNEfQmSE7Cyj1hkcJjMME4YzENWgRtGHooUsGCwN/1670667423524.png)

试着在浏览器中执行一下,咦,怎么什么都不显示?哪里出错了?找来找去才发现,原来是我插入新代码后没有保存😓。

将上述代码保存,然后再次在浏览器中执行,总算可以看到`Hello Vue!`的输出啦:
>![image.png](https://images.hive.blog/DQmWCEt8NDowdxBk9eXcP2hh9LCYbJirPBobiArCaabhMqA/image.png)

突然想起半个世纪前,美国宇航员阿姆斯特朗登上月球时曾说过一句话:“这是我个人的一小步,却是人类迈出一大步”。我觉得成功执行Vue.js的`Hello Vue!`,看似非常非常简单的一步,但是却是我学习Vue.js以及重构cutehive.com的一大步。

当然,其实,运行起来这个例子也并非我上文中描述起来的这样简单。比如我起初找到的Vue代码,类似这个样子:
>![image.png](https://images.hive.blog/DQmTrvBFcjYxqMSovQWz32kuEA4D5Qdgza32sSsoc54B7GD/image.png)

然而这例子却死活不工作,通过浏览器的调试功能,发现如下错误:
> `Uncaught ReferenceError: Vue is not defined`

后来Google搜索到的解决方案是,把上述CDN代码换成:
>`<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>`

这让我知道了Vue不同版本之前使用起来还是有很大诧异的。后来又在一篇文章中找到如下解释:
>Straight off the bat, the way we bootstrap a new Vue app has changed. Rather than using new Vue(), we now need to import the new createApp method.

另外,我想把html和js分离开来,比如说用index.html以及app.js,同样,我没能让它正确工作。

所以,虽然迈出了一小步,但是距离我掌握如何使用Vue.js以及成功重构cutehive.com网站,任重而道远啊。


我突然有些感慨,我为啥要折腾呢?出去找朋友们喝酒,或者躺床上刷会抖音看美女不香嘛?哎!

# 相关链接

* https://vuejs.org/guide/quick-start.html#using-vue-from-cdn
* [Vue 3 Tutorial (for Vue 2 Users)](https://vuejsdevelopers.com/2020/03/16/vue-js-tutorial/)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 129 others
👎  
properties (23)
authoroflyhigh
permlinkvue-js
categoryhive-105017
json_metadata{"tags":["cn","life","blog","vue","html","js"],"image":["https://images.hive.blog/DQmNhqbpaLcPZ6XEMRqfejDwGvURYtRYjy1ZjusbMCMcnRk/image.png","https://images.hive.blog/DQmYr3ERLeQv9nTsuZ4vt57LKtnH9YVkGAPpEhhevyqZn4u/image.png","https://images.hive.blog/DQmQPpJzoV2mNne31mRMiraWqdG9cNAmG6hnuAhXzJYjxyr/image.png","https://images.hive.blog/DQmaDCLpNEfQmSE7Cyj1hkcJjMME4YzENWgRtGHooUsGCwN/1670667423524.png","https://images.hive.blog/DQmWCEt8NDowdxBk9eXcP2hh9LCYbJirPBobiArCaabhMqA/image.png","https://images.hive.blog/DQmTrvBFcjYxqMSovQWz32kuEA4D5Qdgza32sSsoc54B7GD/image.png"],"links":["https://pixabay.com/photos/web-design-laptop-html-design-2038872/"],"app":"hiveblog/0.1","format":"markdown"}
created2022-12-10 10:43:27
last_update2022-12-10 10:43:27
depth0
children10
last_payout2022-12-17 10:43:27
cashout_time1969-12-31 23:59:59
total_payout_value26.086 HBD
curator_payout_value26.056 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,383
author_reputation6,290,502,051,253,650
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id118,998,955
net_rshares115,523,977,753,385
author_curate_reward""
vote details (194)
@aellly ·
>我突然有些感慨,我为啥要折腾呢?出去找朋友们喝酒,或者躺床上刷会抖音看美女不香嘛?哎

看到后面这句才是重点。躺平,刷抖音。世事无常看金瓶梅才正常。
properties (22)
authoraellly
permlinkre-oflyhigh-20221210t195436787z
categoryhive-105017
json_metadata{"tags":["cn","life","blog","vue","html","js"],"app":"ecency/3.0.30-vision","format":"markdown+html"}
created2022-12-10 11:54:36
last_update2022-12-10 11:54:36
depth1
children0
last_payout2022-12-17 11:54:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length76
author_reputation858,251,241,711,680
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id119,000,033
net_rshares0
@love5200 ·
爱学习的O哥👍
properties (22)
authorlove5200
permlinkre-oflyhigh-20221211t23414180z
categoryhive-105017
json_metadata{"tags":["cn","life","blog","vue","html","js"],"app":"ecency/3.0.30-vision","format":"markdown+html"}
created2022-12-10 18:34:48
last_update2022-12-10 18:34:48
depth1
children0
last_payout2022-12-17 18:34:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7
author_reputation537,458,395,149,458
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id119,007,953
net_rshares0
@lovelingling ·
我对此话非常赞同,第一遍我看错了,以为是看着美女躺在床上。额,真的是看错了。对不起,O哥,我不应该想的这么庸俗。

>出去找朋友们喝酒,或者躺床上刷会抖音看美女不香嘛?
properties (22)
authorlovelingling
permlinkre-oflyhigh-20221210t191354736z
categoryhive-105017
json_metadata{"tags":["hive-105017","cn","life","blog","vue","html","js"],"app":"ecency/3.0.19-mobile","format":"markdown+html"}
created2022-12-10 11:13:57
last_update2022-12-10 11:13:57
depth1
children0
last_payout2022-12-17 11:13:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length85
author_reputation719,696,982,836,210
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id118,999,449
net_rshares0
@magicmonk ·
太棒了
properties (22)
authormagicmonk
permlinkre-oflyhigh-rmq9me
categoryhive-105017
json_metadata{"tags":["hive-105017"],"app":"peakd/2022.11.2"}
created2022-12-11 13:03:48
last_update2022-12-11 13:03:48
depth1
children0
last_payout2022-12-18 13:03:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3
author_reputation1,099,988,396,950,062
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id119,027,828
net_rshares0
@marygong77777 ·
👍👍
properties (22)
authormarygong77777
permlinkre-oflyhigh-20221210t204514499z
categoryhive-105017
json_metadata{"tags":["hive-105017","cn","life","blog","vue","html","js"],"app":"ecency/3.0.35-mobile","format":"markdown+html"}
created2022-12-10 12:45:15
last_update2022-12-10 12:45:15
depth1
children0
last_payout2022-12-17 12:45:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2
author_reputation401,979,691,185,907
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id119,000,930
net_rshares0
@swkailing ·
这种代码类的我觉得好难😂😂
properties (22)
authorswkailing
permlinkre-oflyhigh-20221210t19648521z
categoryhive-105017
json_metadata{"tags":["hive-105017","cn","life","blog","vue","html","js"],"app":"ecency/3.0.25-mobile","format":"markdown+html"}
created2022-12-10 11:06:48
last_update2022-12-10 11:06:48
depth1
children0
last_payout2022-12-17 11:06:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length13
author_reputation42,698,332,715,916
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id118,999,361
net_rshares0
@tvb ·
我也想学,但我实在没时间,羡慕O哥
properties (22)
authortvb
permlinkrmoj0y
categoryhive-105017
json_metadata{"app":"hiveblog/0.1"}
created2022-12-10 14:31:51
last_update2022-12-10 14:31:51
depth1
children2
last_payout2022-12-17 14:31:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length17
author_reputation35,098,102,223,749
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id119,002,939
net_rshares0
@oflyhigh ·
时间都去哪啦?
properties (22)
authoroflyhigh
permlinkrmphgt
categoryhive-105017
json_metadata{"app":"hiveblog/0.1"}
created2022-12-11 02:55:45
last_update2022-12-11 02:55:45
depth2
children1
last_payout2022-12-18 02:55:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7
author_reputation6,290,502,051,253,650
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id119,018,722
net_rshares0
@tvb ·
我微信和你说
properties (22)
authortvb
permlinkrmpja4
categoryhive-105017
json_metadata{"app":"hiveblog/0.1"}
created2022-12-11 03:34:54
last_update2022-12-11 03:34:54
depth3
children0
last_payout2022-12-18 03:34:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6
author_reputation35,098,102,223,749
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id119,019,167
net_rshares0
@xiaoyaodidi ·
小时候最喜欢看的节目就是探索和发现  对于未知的事物我很好奇→_→
properties (22)
authorxiaoyaodidi
permlinkre-oflyhigh-20221210t185738596z
categoryhive-105017
json_metadata{"tags":["hive-105017","cn","life","blog","vue","html","js"],"app":"ecency/3.0.35-mobile","format":"markdown+html"}
created2022-12-10 10:57:45
last_update2022-12-10 10:57:45
depth1
children0
last_payout2022-12-17 10:57:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length33
author_reputation420,068,217,197,428
root_title每天进步一点点:学习Vue.js的一小步
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id118,999,232
net_rshares0