irpas技术客

《风尚坐火箭学习vue》-- 第二章:页面中输出hello Vue_vue输出hello_风尚云网

未知 7232

前言:前端框架千千万,独有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.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #vue输出hello #风尚坐火箭学习vue #第二章页面中输出hello #Vue