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

vue.js 是近年很紅的 js 框架，之前也有多少在一些專案中使用了，這次就來整(ㄅㄧˇ)理(ㄐㄧˋ)一下，並希望可以之後再少用一些 jQuery 來寫專案了。

要使用的話首先跟 jQeury 一樣先把 vue 給讀進來。

view plaincopy to clipboardprint

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

來看官方第一個範例：

view plaincopy to clipboardprint

1. <div id="app">  
2.   {{ message }}   
3. </div>  

view plaincopy to clipboardprint

1. var app = new Vue({   
2.   el: '#app',   
3.   data: {   
4.     message: 'Hello Vue!'  
5.   }   
6. })  

像這樣在 {{ message }} 裡就會出現 Hello Vue! 的字了。


下面這個範例是把時間抓到後放到 message 顯示在 title 內，滑鼠移過去停留一下會出現當前的時間。

See the Pen Vue ex2 by deathhell (@deathhell) on CodePen.

這邊是可以用 v-if 決定是否顯示內容。




使用 v-for 把陣列的東西一次顯示出來



使用 v-on:click 在按下按鈕時去讀取 reverseMessage 這個 function，執行把 message 字串前後顛倒的功能。



這邊是使用 v-model 的方式，讓資料可再輸入的時候同步改變 message

反應：