《风尚坐火箭学习vue》-- 第二章：页面中输出hello Vue

最新推荐文章于 2024-02-14 16:53:09 发布

风尚云网

最新推荐文章于 2024-02-14 16:53:09 发布

阅读量747

点赞数 1

分类专栏：风尚坐火箭学习vue vue 文章标签： jquery 动画前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zsx0806/article/details/121430477

版权

vue 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

风尚坐火箭学习vue

20 篇文章 3 订阅

订阅专栏

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

图片来自vue官网

第二章：hello Vue

上章回顾：风尚内心答应了跟白发老头学习vue

风尚内心答应了跟白发老头学习vue后，对白发老头说道：“行吧，我跟你学，不过你得管我我吃喝玩乐衣食住行啊，能成不？”

白发老头蔑视这看风尚说：“一个成年人了啊，还不能自立，拉跨，别说了，管你，学习期间全包。不过你以后出去找到工作了工资的百分之6归我咋样？”

风尚想了想回答道：“成交”。

说完之后，老头朝着太阳的方向走去，风尚也紧紧的跟着老头走，老头朝着一个石头一挥手，竟然出现一个银灰色的大门，科技感十足，让风尚露出了羡慕的眼光。

一边走着，老头笑着对风尚说：“这些都是通过python人脸识别和物联网实现的，高级吧？”

风尚懵了，好家伙，这是未来啊，，，

老头带着风尚来到了他的住处，好家伙，面前几十台外星人电脑正在运行，风尚满脸期待的走到一台电脑跟前。电脑突然开机了，并且发出声音：

“您好，我的主人，风尚，庆祝您的到来！让我们一起愉快的学习vue吧！”

这让风尚下了一大跳。内心：好家伙，真牛x。

“别玩了啊！你来到这里学习vue，你得听我的啊，跟着我，别乱跑！”说着老头打开一台电脑，风尚感觉十分激动。跟着老头来到电脑前。

”今天我们来学习利用vue在浏览器当中输出“hello Vue！”说着老头打开了HBuilderX 软件，

HBuilderX-高效极客技巧HBuilderX是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛https://www.dcloud.io/hbuilderx.html幸好风尚之前学习jQuery用过，不然一脸懵啊。

老头说道：首先我们来引入vue.js，要么去官网下载本地版的，要么去引入cdn

1.引入vue.js库(本地版)

<script src="vue.js"></script>

2. 创建vue实例（js）

<script>

new Vue({

el：'#app',

data: {msg:'Hello,Vue.js 2'}

})

</script>

3. 完整html导入(html)

<div id="app">

hello Vue!

</div>

完整的helloWorld代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../assets/js/vue.js"></script>

<title>Helloworld</title>

</head>

<body>

<h1>Hello World</h1>

<hr>

<div id="app">

{{message}}

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

}

})

</script>

</body>

</html>

经过以上的这些步骤，就可以在浏览器中输出 hello Vue! 了啊！风尚你学会了嘛？

“会个球球啊。。。”风尚照着敲了一遍说道。

“你好好理解啊！！！算了，我给你总结一下吧”老头说道。。。。。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《风尚坐火箭学习vue》-- 第二章：页面中输出hello Vue

《风尚坐火箭学习vue》-- 第二章：页面中输出hello Vue
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

风尚云网 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。