{%hackmd theme-dark %}
# Vue.js 學習
## 2023/2/17
Vue.js 是一個開源的前端框架，具有以下特色:
+ 撰寫良好的官方文件
+ 輕量、高彈性
+ 簡潔的語法
+ 較低的學習曲線
+ 穩定的社群成長

resources:
https://ithelp.ithome.com.tw/users/20129072/ironman/3052
https://vuejs.org/
https://codepen.io/

### 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>

### method 屬性
在vue實體中的methods屬性讓我們能定義一些可以綁在該實體上的函數，這些函數可以替我們做到我們想做的事情，就像一般的js函數一樣。像是我們希望點擊按鈕後跳出訊息、使用者輸入密碼時給予提示都可以透過methods達成。

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

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

假如我要設計一個按鈕，就可利用v-on這樣的指令綁訂了一個click事件，並告訴它click之後要觸發methods中的哪個函數。`v-on:click="greet"` 可以簡寫為 `@click="greet"`