2018年8月2日 星期四

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

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

要使用的話首先跟 jQeury 一樣先把 vue 給讀進來。
  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  

來看官方第一個範例:
  1. <div id="app">  
  2.   {{ message }}   
  3. </div>  

  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


反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...