iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 2
0
Modern Web

30天手把手的vue.js教學!系列 第 2

# 2020it邦鐵人賽-30天手把手的Vue.js教學 Day2-認識Vue.js中的data & methods屬性!

tags: Vue.js ItIron2020

前言

我們在昨天的文章中簡單介紹了vue.js以及如何利用線上編輯器打造你最初的vue.js專案,其中我們知道你可以利用Vue實體(instance)中的data屬性直接去影響最後渲染出來的畫面,今天我們將進一步地介紹vue實體中的兩大屬性data & methods!

先等等,你一直在講實體實體,到底什麼是vue實體?

其實不用想的太複雜,我們在js中一直有接觸到實體(instance)的概念,簡單說就是某個父親的孩子,聽不懂對吧? 看一下簡單的例子吧!

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  greet() {
    console.log(`Hello, My name is ${this.name}`)
  }
}

const danny = new Person('Danny', 29)
console.log(danny.age) // 29
danny.greet() // Hello, My name is Danny

在上方的例子中,我們就會說danny是一個Person的實體,就像親子關係一樣,孩子會有父母一些特點,換成程式語言來說就是會有一些既有的屬性或方法可以使用,如果你覺得class這樣的東西你有些難以理解,其實很多時候我們都在不自覺的使用這樣物件導向的概念

const arr = new Array()

這樣其實我們也創建了一個Array的實體囉~!
了解實體的基本概念後,要理解vue實體相信就難不倒你了,我們每次建立一個vue檔案,其實就是創建一個vue實體,原本的程式碼寫法會類似下方這樣

new Vue({
  el: '#app',
  data: {
   greeting: 'Hello World!',
   user: 'Hassan Djirdeh',
   city: 'Toronto',
  },
});

這樣就可以清楚的看出其實與我們一開始講的例子沒有太大的差別,就是建立一個實體,從中我們傳入了一些屬性這樣~! 而在vue實體中我們有著眾多的屬性讓我們使用(data、methods、computed等),今天我們則會介紹最常用到的兩個data & method!


認識data屬性

當一個vue實體被建立時,它會將在data物件中的所有屬性加入vue的響應系統中(eactivity system),當data物件中的任何屬性被改變值,我們的畫面(view)會即時重新渲染讓畫面的內容符合新變動的值,在vue的template中我們可以利用mustache syntax(也就是兩個大括號)使用data物件中的屬性,我們用昨天的範例做說明吧!

<template>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!'
    };
  }
};
</script>

在這個例子中我們可以看到,data物件中的message值取代了原先在template中的{{message}},我們若修改message的值,你會發現view也同時重新渲染,讓你在畫面上看奧你修改後的數值!

在vue實體中的data屬性有兩種寫法,你可以像上方的範例這樣(這種寫法記得要寫return,讓它呼叫data時可以得到一個物件)

data() {
    return {
      message: 'Welcome to Vue!'
    };
  }

或者你喜歡old school一點的寫法也沒關係~They both work~!

data: {
    message: 'Welcome to Vue!'
}

如果你是採用線上編輯器打造的練習專案,現在一般較為常見的會是第一種寫法!


認識methods屬性

在vue實體中的methods屬性讓我們能定義一些可以綁在該實體上的函數,這些函數可以替我們做到我們想做的事情,就像一般的js函數一樣! 像是我們希望點擊按鈕後跳出訊息、使用者輸入密碼時給予提示都可以透過methods達成,我們今天只會接觸到methods最最最基礎的應用,在之後的文章我們會進一步探討在vue中的事件監聽以及methods vs computed這樣的老問題!

我們接續昨天的範例,首先我們先定義一個簡單的函數,這個函數會跳出alert向使用者打招呼。 請你將script的內容修改為以下

<script>
export default {
  data: {
    message: 'Welcome to Vue!'
  },
  methods: {
    greet() {
      alert('Hello I am Danny')
    }
  }
};
</script>

現在我們有函數了,那要如何觸發這個函數呢?
一點也不困難,我們只要新增一個按鈕,並利用這個按鈕監聽點擊事件,最終觸發這個函數即可, 請你修改template部分的程式碼,我們等一下再解釋發生了什麼事情!

<template>
  <div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="greet">Click Me</button>
  </div>
</template>

畫面上應該會出現一個按鈕,點擊之後你會發現函數真的成功觸發了!

click-demo

在上方的範例中,我們利用v-on這樣的指令綁訂了一個click事件,並告訴它click之後要觸發methods中的哪個函數,你可以想成它其實是這樣的東西,我相信會更加好懂

btn.addEventListener('click', greet)

而v-on可以縮寫為@,所以原本的範例可以再精簡為

 <button @click="greet">Click Me</button>

看到這邊我想你也猜到了,能綁定的事件絕對不只點擊(click),再加上vue提供了許多的修飾符讓我們能做更精確的事件監聽,這些我們會留在之後的文章做說明,別急別急!

結語

今天我們認識了data & methods屬性,並且理解到如何在vue中監聽最常見的點擊事件,明天我們將介紹vue中幾個重要的指令(vue directives),藉由那些強大的指令可以讓我們輕鬆達到許多們想要的效果,先據透一下,我們今天接觸的v-on其實就是其中一個指令:D
如何,是不是很好很強大讓你很期待吧? 希望如此,我們明天見?


上一篇
# 2020it邦鐵人賽-30天手把手的Vue.js教學 Day1-什麼是Vue.js?
下一篇
# 2020it邦鐵人賽-30天手把手的Vue.js教學 Day3-認識vue directives(上)
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言