vue.js 教程(一) Hello World!

Vue.js有人说它像React,也有人说它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及学习门槛都比React或Angular低,所以上手简单,对于javascript苦手,或是一直迟迟无法学会React或Angular的同学们来说,简直是一道曙光!

Vue.js的优点呢,主要就是专注在web技术上,支援html template、pug (jade)、coffeescript,甚至可与sass、less等加强版CSS做整合,而扩充性质的plugin也是颇多的,所以对于专注web技术研发的朋友呢,这就真的值得学一下了。

毕竟不像React、Angular专注跨平台、跨载具,导致要学的东西就变很多,或是有很多新的架构概念要学习,当然Vue.js也是有缺点的,那就是太专注于web上了,其他平台就没办法好好使用了,不过反过来说,如果你主要是开发web,那你来说就没什么差了。而且Vue.js可以说是简单版的Angular,当你学会Vue.js之后要转到Angular反而可以让你学习快速,神奇吧!赶快来看一下怎么用Vue.js吧!

仔细看官网文件你会发现有一堆安装方式要看,感觉好像非常复杂,其实一点也不复杂,就跟你载入jquery一样:

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

只要把上面这一行放在html档案里就可以了,有没有很简单?当然你要下载下来放在网站目录里也是一个不错的选择!

按照写程式惯例,我们就来示范一个Hello World吧!

第一步,非常简单,建立空白的html页面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>

</body>
</html>

第二步,引入Vue.js,并建立一个div命名id为app。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id=”app”>

</div>

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

第三步,建立Vue执行的function,在div#app写入Hello World!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id=”app”>
{{ message }}
</div>

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script>
new Vue({
el:’#app’,
data:{
message:’Hello World!’
}
});
</script>
</body>
</html>

结束!有没有超简单!看不太懂?没关系我来稍微解释一下,在div#app里面,你会看到{{ message }}这样的东西,如果你以前学过Smarty(PHP的样板引擎),你会觉得有点熟悉,如果没学过Smarty也没关系,pug (jade)也类似{}的东西,简单来说{{}}就是会帮你带参数进去这个位置上,而在new Vue里面我指定在id名称为app的这个element(通常会翻成元素)里带进message参数,而message我在这里指定预设值为Hello World! ,以上就是示范Hellow world的写法,有没有很简单!很简单吧!让我们用jsfiddle把这一篇的code来执行一下看看:

Author: bwh

发表评论