用户投稿其实这次标题有点骗人，因为对小弟来说也不算第一次接触了，但也只是前几天读过官方文件的等级而已，所以如果有些地方解释的不对，还请各位大大留言告诉我了，在此小弟感激不尽。
这个Vue.js一直在我的愿望清单中，也是打算今年可以应用在实务上的套件之一，当然除此之外还有React或是AngularJS，而我也不是单纯的前端工程师，在工作上主要还是全端为主，所以最后可能还会玩个Node.js，但是一个人学实在是太孤单了！所以想要和熟悉Vue.js的大大，或是和我一样不太熟的版友们一起分享学习过程！
另外此历程除了废话外的所有技术及用法都是看官方的文件来的，如果有一天我没讲完断尾了大家可以去看(但是我会努力不让这种事发生XD)，如果我有其他从别的地方整理的用法，会在文章中附上来源连结！那本篇历程开始！
Vue.js的功能是什么？
Vue.js是用来做资料繫结的套件，他会帮你绑定JavaScript的物件资料到网页的画面上面，物件的资料可以从任何地方来，不论是暂存在网页上；或是从server传回来的资料，只透过Vue.js就可以让资料和画面离不开彼此。
顺带一提，小弟第一次看到Vue.js的时候，就直觉是一个vue就是在操控物件；操控DOM，而事实上也是这样子，所以如果不认识JavaScript中的物件的话，可以看一下这篇文章。
怎么用Vue.js？
使用Vue.js的方式有很多，他可以透过套件管理工具npm去下载，或使用官方的Vue CLI样板工具快速建置一个vue架构的SPA(Singal Page Application)专案，而就算上述的那些不会使用也没关係，因为我也不太熟，让我们把焦点放在Vue.js身上，先不去增加学习负债，最简单的方法就是和全天下的API一样，在HTML上使用<script>标记引入即可，像以下起手式：
<html><head></head><body><!--开发版本--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--生产版本--><script src="https://cdn.jsdelivr.net/npm/vue"></script></body></html>然后要注意哦！ JS 的 CDN 最好是放在 body 的最后，确定让所有的 DOM 都已经準备就绪，再载入套件，否则在一开始就载入可能会造成错误，然后我们打的程式码也必须要在 Vue 的 CDN 之后，这样也才会有 Vue 的执行环境。
官方提供的引入文件有两种可以下载：
开发版本，他会有完整的警告讯息在console中显示。生产版本，据官方说针对文件的大小及速度都有做了优化。在本篇历程中，小弟都会使用生产版本，不过练习时使用起来应该也不会察觉到差别。
从哪里学起？
当然直接从Code中学习，让我们看着官方文件开始练习吧！
一、绑定数据
在HTML中使用两个大括号来标记要繫结资料的物件key值。
HTML
<div id="firstVue"> {{content}}</div>JavaScript
let firstVueObj = new Vue({ el:'#firstVue', data:{ content:'Hello!world!', },})在JavaScript中我们去建构一个Vue物件，并且在el属性中指定这个firstVueObj要去繫结的DOM的id，在这里是firstVue，data属性内是个物件，里面包含了我们要绑定到HTML的资料，在这里的content值为Hello!world!，所以HTML中的{{content}}会被繫结成content的Hello!world!，结果如下：
另外值得说明的是，因为小弟我好奇如果有一次绑定多个资料的话可不可以把id改成class；el:'#firstVue'则改为el:'.firstVue'但是实验结果发现，他只会绑定到第一个符合class=firstVue的DOM，第二个就不会被繫结了，而在找资料的时候有看到板上的大大也注明了相同情况，文章在这里。
还有就是vue.js的资料是动态绑定的，所以如果去修改data中content的资料，HTML的{{content}}也会动态被繫结成新资料，例如：
JavaScript
//我把data中的资料抓出来let firstData = { content:'Hello!world!',}let firstVueObj = new Vue({ el:'#firstVue', //在这里直接指定firstData物件 data:firstData,})以上程式码产生出来的画面应该会和上方一模一样，但我们以下图打开console将firstData的content修改为别的值，可以看到的经过红框内重新指定content的值，上方的HTML画面也会动态变成新的值：
二、绑定属性
vue.js除了可以用来繫结资料外，他也可以使用v-bind直接绑定DOM的属性。
HTML
<div id="timeDiv" v-bind:title="nowTime"> {{content}}</div>JavaScript
let timeData = { content:'现在时间', nowTime:'目前是' + String(new Date()),}let timeDiv = new Vue({ el:'#timeDiv', data:timeData,})这个原理和上方绑定数据一样，首先在HTML中使用v-bind去设定该DOM的属性，这里是title，做用为滑鼠停留会显示的提示文字，并将该属性的值绑定给data中nowTime的值；这个值会动态回传目前的时间new Date()，结果如下：
这里可以提的是v-bind有缩写，如果不想要每次都写那么长(是也没很长XD)，可以简写成:，变成这样子，也是完全没有问题：
HTML
<div id="timeDiv" :title="nowTime"> {{content}}</div>三、绑定事件
数据和属性都有了，绝对少不了事件，vue.js提供了v-on来绑定DOM的事件，我们直接修改上面的範例，让他变成透过click事件显示时间。
HTML
<div id="timeDiv" v-on:click="getTime" > {{content}}</div>JavaScript
let timeData = { content:'点我看时间',}let timeDiv = new Vue({ el:'#timeDiv', data:timeData, methods: { getTime: ()=>{ console.log(String(new Date())) }, },})在绑定事件的时候vue.js的物件多了一个属性methods，用法就和data属性一样，用来控制v-on的事件名称以及执行的内容，他同样也是物件，所以也可以像timeData一样拆出来：
JavaScript
let timeData = { content:'点我看时间',}let timeMethods = { getTime: ()=>{ console.log(String(new Date())) },}let timeDiv = new Vue({ el:'#timeDiv', data : timeData, methods: timeMethods,})至于v-on也是有缩写可以用的，他的缩写写法是@，可以把HTML改成下方的样子：
<div id="timeDiv" @click="getTime" > {{content}}</div>最后运行的结果如下，点击后会在console中印出目前的时间：
当然他不只可以用click事件，只要是DOM本身的事件他都可以做绑定，如果想尝试更多的话可以看这个w3school整理的事件列表做设定，而关于绑定事件在之后的文章中还会再提到，只是现在先让大家有个概念说vue.js基本可以做到哪些事情。
这篇先讲完了用vue.js繫结HTML标籤的数据、属性及事件的部分，算是把最基本的讲完了，明天在来提vue.js中的if-else条件判断式和for迴圈的用法。
最后如果以上说明有误，或是不清楚、有问题的部分，再麻烦各位大大留言告诉我，毕竟是第一次边学边打文章，非常怕会不小心误人子弟XD，谢谢各位大大的观看
微信扫一扫打赏
支付宝扫一扫打赏
