【Vue.js學習筆記】初探之迴圈、判斷、事件綁定、輸入..

最後更新於 2021 年 5 月 21 日

Vue.js(/vjuː/,或簡稱為Vue)是一個用於建立使用者介面的開源JavaScript框架,也是一個建立單頁應用的Web應用框架。今天就作一些簡單的示例,基本上都是參考官方文檔。

安裝

初學者建議可以創建.html文件,使用引入Vue的方式來學習,下方有三種引入的方式,選擇一個使用即可。

1.直接引入最新版本

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

2.生產環境版本,優化了尺寸和速度

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

3.引入指定版本

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

其他方法建議參考官方文檔

Vue示例

每個Vue應用都是通過用 Vue 函數創建一個新的 Vue實例開始的:

var app = new Vue({
 //options
})

首先在網頁上新增一個div

<div id="app"></div>

Vue.js使用大括號{{ }}作為資料的佔位符。

Vue.js指令是帶有前綴的HTML屬性 v-

el:'#app':將新的Vue物件綁定到具有id = "app"的HTML元素。

:若想綁定到具有 class="app" 的HTML元素,可以寫成 el: '.app'

var app = new Vue({
 el:'#app',
 data:{
  message:'HELLO!'
 }
})
<div id="app">
{{message}}
</div>

效果

HELLO!

v-bind 屬性綁定

綁在HTML上的屬性,若希望能與 vue instance結合,就要加上v-bind:attribute

v-bind:title="message",可將message綁進屬性中。

<div id="app">
  <span v-bind:title="message">鼠標懸停</span>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})

效果

【Vue.js學習筆記】初探之迴圈、判斷、事件綁定、輸入..

:當 Vue 物件綁定到 HTML 元素時,一旦Vue物件更改時,HTML元素也會更改。

v-on 指令

使用 v-on 添加事件監聽,通過它調用在 Vue 實例中定義的方法,可讓使用者與應用進行交互:

<div id="app">
  <button v-on:click="alertMessage">跳出視窗</button>
</div>
var app = new Vue({
 el: '#app',
 data: {
   message: 'HELLO!'
  },
 methods: {
   alertMessage: function() {
     alert(this.message)
   }
  }
})

當使用者按下按鈕,則會跳出視窗顯示「HELLO!」。

v-if 條件判斷

控制切換一個元素顯示與否:

<div id="app">
  <span v-if="seen">判斷為true則會顯示這段文字</span>
</div>
var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

v-for 迴圈

可利用迴圈產生重複的元素。

<div id="app">
  <ul>
    <li v-for="todo in todos">{{todo.text}}</li>
  </ul>
</div>
var app = new Vue({
  el: '#app',
  data: {
    todos: [{
      text: '第一條'
    }, {
      text: '第二條'
    }, {
      text: '第三條'
    }]
  }
})

效果

  • 第一條
  • 第二條
  • 第三條

這段程式碼運用到JS object 的概念,JS object結構類似 JSON,以 { key1 : value1 , key2 : value2 } 的格式儲存,與JSON的差別在於,JSON只能儲存字串資料另一組JSON結構,而js object 可以儲存任何JS中的資料型態:

var obj = {
 key1 : 10 , //數值
 key2 : "string" , //字串
 key3 : function() { alert(); } , //函式
 key4 : [ 1 , 2 ] , //陣列
 key5 : { key5_1 : 1 } //object
}

而想要使用裡面的資料,可以利用 . 來存取,如 obj.key3,會被稱作object是因為我們可以將裡面的每一個元素視為這個object的屬性,而屬性的名稱就是它key的名字。

在js中array與object主要的差別在於其宣告的方式

{ num1 : 1 , num2 : 2 } //object
[ 1 , 2 ] //array

回到一開始的程式碼,這有點像foreach的概念,遍歷todos這個array並將其每個值提出為todo,然後呼叫todo.text。

<div id="app">
  <ul>
    <li v-for="todo in todos">{{todo.text}}</li>
  </ul>
</div>
var app = new Vue({
  el: '#app',
  data: {
    todos: [{
      text: '第一條'
    }, {
      text: '第二條'
    }, {
      text: '第三條'
    }]
  }
})

:todos要是個array,且array中每一個object都要有text屬性才能使用{{todo.text}}

array中也不一定要是object,也可以是一般的資料型態,如:

var app = new Vue({
el: '#app',
data: {
  todos : [
  "Line1",
  "Line2",
  "Line3",
  ]
}
})
<div id="app">
  <ul>
    <li v-for="todo in todos">{{todo}}</li>
  </ul>
</div>

依樣畫葫蘆即可。

v-model 雙向綁定

v-model可以讓使用者在表單中輸入的文字和應用雙向綁定。

<div id="app">
  <p>{{message}}</p>
  <input type="text" v-model="message">
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Type here'
  }
})

效果

3YEv957 【Vue.js學習筆記】初探之迴圈、判斷、事件綁定、輸入..

如此一來,當用戶在輸入框中輸入任何文字,vue裡對應的data也會跟著改變。

參考資料

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 【Vue.js學習筆記】初探之迴圈、判斷、事件綁定、輸入..
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論