終於踏入Javascript框架之Vue..(1)

懶人指路地圖

(0)開發環境

(5)組件Component

(9)生命週期

v-bind(或是使用:)

在屬性內綁定的用法，當我們想呈現的內容不是寫死的，而是隨著資料/計算的數值有所改變時就會用這個方式

v-for

<v-for="item in items" :key=""> 或是v-for="item of items" :key="">

可返回value、index、"單一"資料所有值

vue就地更新策略：指定key屬性，當位置有更動的時候會就地更新

key的類型:string或number

不建議用index(會變動)，建議用id或是其他唯一索引

透過v-bind綁定，與v-for同層級

//html
<div id="app">
  <ul>list:
    <li v-for="(user,index) in list" :key="user.id">
      <p> name:{{user}},index:{{ index }}</p></li>
     </ul>
  <ul>Object:
    <li v-for="(user,index) in results" :key="user.id"><p>name:{{user.name}},index:{{ index }}</p></li></ul>
 <li v-for="n in 4" :key="n">{{n}}</li>
</div>

data() {
    return {
      list:['kate','jack','betty'],
      results: [
        {
          "id": "2345",
          "name": "kelly",
          "mail": "kelly@mail.com",
        },
        {
          "id": "1309",
          "name": "mark",
          "mail": "mark@mail.com",
        },
        {
          "id": "3882",
          "name": "jenny",
          "mail": "jenny@mail.com",
        }]
    }

畫面顯示：

list:
name:kate,index:0

name:jack,index:1

name:betty,index:2

Object:
name:kelly,index:0

name:mark,index:1

name:jenny,index:2

1
2
3
4

v-on

(或寫為@)

類似addEventListener的功能，當對網頁上的物件進行互動時會有的語法

分為

• 內聯

<div @click="()">click</div>

直接return結果：像是直接寫一段code，需要的時候直接取用

• 方法事件

在script裡添加methods: {(code)}，用於獲取data()內的數據並操作內容@click="methods"，類似寫一個function，使用的時候是呼叫function

事件參數

可以直接傳遞event，例如在addEventListner的時候會有event.target

同樣也可以結合v-for，點擊的時候同步呈現event

<div @click = "getName($event, item)" v-for="item of items")>click {{item.key}} </div>

methods: {

getName($event, item) { }

記得參數順序要一致

事件修飾符

.stop

.prevent

.once

.enter

像上面提到的在template裡面可以用$event綁上methods，用console.log(event)看到點擊的內容

要實踐preventDefault或是stopPropogation時也需要在裡面處理

ex: event.preventDefault(),event.stopPropogation()

Vue的功能是可以在@click後面直接加上，就不需要在methods裡面處理

單一表達式

最簡單的判定方法：return 是否有結果

綁定attribute

null/undefine的話不會顯示

v-if/v-show

v-if

按照條件渲染，依據條件不一樣在切換的時候，所以區塊都會銷毀重建。如果初次渲染時，條件預設是false則不會渲染。

v-show

無論初始條件為何都會渲染，靠css屬性切換是否顯示(display:none)

使用情境：v-if有更高的切換開銷，v-show有更高的初始渲染開銷

如果需要頻繁切換則使用v-show，如果條件改變不頻繁則用v-if