• 我的第一个Vue.js实例:Hello Vue!
  • 发布于 2个月前
  • 331 热度
    0 评论
  • Carmelo
  • 0 粉丝 6 篇博客
  •   

一直想学Vue.js ,想了半年也没开始动手学!今天终于出手了,写出了我的第一个Vue.js实例。Hello Vue。怎么开始学Vue.js?我是这样做的:

1.打开记事本

2.在记事本输入以下内容:

<html>
<head>
<title>Hello Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
})
</script>
</body>
</html>
3.将记事本的内容另存为HelloVue.html

4.双击HelloVue.html页面,直接用浏览器打开,我的第一个Vue.js实例就完美的完成了!效果如下:


有没有很简单?当然很简单啦,不过这里有几个点还是要简单备注一下:

1.在html页面的头部引入vue.js库。我这里是直接使用Vue.js官网提供的CDN地址,你在学习时也可以按这种方式引用,当然,在实际运用到项目时,我们还是建议把该js库下载到本地项目资源中。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.关于Vue.js的一些个人理解

很多初学者刚开始接触Vue.js时或刚听到Vue.js这个东西时,会觉得这是很高大上,或者很新奇的东西,会觉得这是一个很新的技术,其实,Vue.js的技术一点都“不新”。本质上,它就是一堆javascript代码,你可以理解为有一个叫尤雨溪的男人,他用Javascript写了一堆有“神奇”功能的代码。并把这个代码封装在一个叫Vue.js的箱子里。而这个vue.js箱子提供了各式各样连接箱子里面不同功能的接口,当我们想实现某个功能时,只要直接使用这个接口就可以了。就像奶茶店常见的充电宝,它会提供各式各样的接口线,可以实现给苹果手机,三星手机,华为手机进行充电。

3.如果你曾经有jQuery的开发经验,其实你在学习Vue.js时可以和jQuery一起对比学习,比如jQuery可以实现A这种功能,那么用Vue.js该如何实现,或者某个用Vue.js实现的功能,你也可以想一下这种功能在jQuery该怎么写。这样对于会有助于你理解Vue.js。

用户评论