基礎 Vue.js(上)

身為目前 3 大前端應用框架之一的 Vue.js，截至目前為止在 GitHub 已經累積 160k 的星星數，以下是個人的學習筆記。

開發環境

在 Vue.js官網 中建議在瀏覽器上安裝 Vue Devtools，這樣可以方便在瀏覽器中觀看訊息。

在

應用程式建立

首先在 HTML 建立一個 div ，這邊可以使用 id 或是 class，一般建議是使用 id，

接著在 <div> <div id="app"></div>

然後打開瀏覽器的開發人員工具，如果有安裝 Vue Devtools 就可以看到已經建立了一個 Root

如果要建立資料的話，然後顯示在 HTML 上：

注意事項： 一個頁面可以同時建立 2 個 app，但是 3 個就沒辦法

建立兩個是可以的，一樣會出現 2 個 Root

但是如果建立 3 個 app，就會出現找不到 element

雙向綁定的資料

在 Vue 中，有雙向綁定的特色，

前面提到如果要將資料顯示在網頁上，可以使用 {% raw %}{{ }}{% endraw %} 這個語法，在 Vue 的語法中還有其他可以使用的：

v-model v-text v-html

v-model 的使用

主要是使用在：

在畫面上 跟 {{message}} 就會顯示一樣的內容

而當直接在畫面修改 輸入欄中的內容時，{{message}}也會一起改變。

v-text 跟 v-html 使用的方法

兩者差不多，都可以直接顯示內容，差別在 v-html 可以加入 html 標籤

在畫面上的呈現是這樣：