[Vue.js] 開始使用 vue.js

vue.js 是近年開始出現在許多開發專案的 js 框架，有著相較於其他兩個熱門框架(react.js 和 Angular)更好學且更有彈性的特性，這邊來看一下官方的文件介紹。

要使用可以先讀入 vue.js

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

接著 html 先放這樣設定 vue 的作用範圍。

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

接著像這樣把資料綁進去

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

接著使用 v-bind:title ，可以把 data 綁在 html 的 tilte 的 attr 裡：

 data 內設定變數的 true 或 false，可以簡單切換區塊的可見與否

 使用 v-for 搭配陣列物件，一次把東西顯示出來：

接下來的範例是示範當按下按鈕後，去 methods 執行 reverseMessage 這個 function，會執行把 message 字串前後顛倒的功能。

使用 v-model 的方式綁定資料內容，讓資料可在輸入時同步改變 message 的內容