fbpx

在接觸框架之前,其實並不是非常明白所謂的架構,就會常常出現各種功能混在一起的情況,像是一個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的核心語法以及功能~

Leave a Reply