要使用的話首先跟 jQeury 一樣先把 vue 給讀進來。
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
來看官方第一個範例:
- <div id="app">
- {{ message }}
- </div>
- var app = new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue!'
- }
- })
像這樣在 {{ 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 意見:
張貼留言