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 的內容