上回這裡成功的建置環境後，進入下個環節的討論。就是在接觸框架之前，其實並不是非常明白所謂的架構，就會常常出現各種功能混在一起的情況，像是一個Js事件需要同時處理「資料變動」、「樣式修改」或是「資料處理」以及「後端互動」，雖說在開發時都算順利，但過了幾天後回來開發，或是後來要針對網站進行改動維護，卻完全不知該從何下手，而這也就是框架最大的價值，他讓我們在開發時，每一段Code可以專注處理某一個部分的任務，結構分明，在維護上也能更加輕鬆。
開始使用Vue.js
在Vue的官網其實有明確指出「建議不熟悉Vue或是node.js環境使用的開發者先不要使用Vue-Cli」，所以建議一開始接觸Vue.js框架可以先從CDN開始熟悉，基本上只需要在HTML檔的 <head> 中引入CDN即可使用：
//開發者模式版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//產品開發使用的穩定版本 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
創建Vue實例
在引入CDN之後，要讓網頁能夠成功顯示需要有兩個要件，分別是模板 (Template)與實例 (Vue Instance)，模板可以直接建立在HTML檔中，而實例則是Vue的Javascript物件實例，首先我們先從實例開始說起。
Vue的實例主要是關注資料面的操作，他會負責控管資料以及處理資料，而在Vue的實例中，物件的屬性與方法是有既定寫法的，最核心的屬性設定有 el 以及 data ，el 是指Vue實際掛載在DOM的哪一個節點，通常這個屬性會設定為 “#app” ，這個「掛載」的觀念會在後面的章節中做解釋，這邊可以先把他理解為Vue實際能在DOM中的作用範圍，如果超出這個節點，Vue就無法控制了；接著 data 則是這個頁面會使用到的資料，寫法就是 Object ，key是在模板使用的資料名稱，Value是資料的實際內容，像下方的範例就是我們在Vue中建立了一筆資料，資料的變數名稱叫作 text ，而資料內容是 “Hello World!”：
var vm = new Vue({
el: "#app",
data:{
text: "Hello World!"
}
})
規劃模板
在建立Vue實例並規劃掛載節點與Data之後，接著就是規劃模板啦~規劃模板其實非常簡單，Vue的模板是直接寫在Html當中的，首先我們在 <body> 中先建立我們在上面的實例中規範的掛載節點，也就是 <div id=”app”> ，接著我們就可以在這個容器中利用特殊語法 {{ }} 將我們的資料插植進模板當中即可讓Vue幫我們把資料渲染到畫面當中：
<body>
<div id="app">
<p>{{ text }}</p>
</div>
</body>結果：
從上面的結果可以看到，雖然我們在Html中寫的是 {{ text }} ，但在Vue運行之後，他自動幫我們把text的資料值渲染成 “Hello World!” 。
以上就是Vue的基本實例化以及基本資料渲染，在接下來的文章中，我們會逐步介紹其他Vue的核心語法以及功能~
WRITTEN BY
Glove Yen
一個不務正業的企管人，喜歡一切有創造性的事物，從管理到設計到程式，目前正沈浸於資料科學與前端開發的汪洋之中，不知從何時開始已經習慣了每天Coding的日子。
好文轉自 Glove-Coding ，如果你喜歡他的文章，歡迎回到原文看更多:) 另外，老師也在Udemy 推出VueJS實作課程啦，快來這裡一起快樂學程式！
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
