跳至主要内容

[Vue] 快速創建範例

開始使用Vue​

簡單示範Vue起手式

<div id="app">
  {{ counter }}
  {{ text }}
  <button type="button" v-on:click="clickMe">綁定按鈕的方法</button>
</div>

<script>
  Vue.createApp({
    // 資料(函式)
    data() {
      return {
        counter: 0,
        text: '這裡有一段文字'
      }
    },
    // 生命週期(函式)
    created() {
      this.counter=10;
    },
    // 方法(物件)
    methods: {
      clickMe() {
        this.counter+=1;
      }
    }
  }).mount('#app')
</script>
Vue的this

在生命週期或方法裡調用this的時候，其實這個this並不是指向物件。
將 Line:23 事件修改成 console.log(this); 後，觀察this是什麼。

this是proxy物件

可以觀察到，事件觸發之後印出的this是一個proxy物件。
proxy物件下就會看到我們在data內所設定的counter，以及我們在methods內撰寫的clickMe function

所以我們才可以在生命週期created內使用this.counter=10調整我們在data內設定的數值。因為proxy會自動幫我們將我們所撰寫的資料以及方法展開到下面，方便我們去取用。

官方CDN起手式​

CommonJS​

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <div id="app">
    {{ text }}
  </div>
  
  <script>
    // 解構取出createAPP
    const { createApp } = Vue
    const app=createApp({
      data(){
        return {
          text:'some text here'
        }
      }
    })

    app.mount('#app')

  </script>
</body>
</html>

ESM​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ text }}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    const app=createApp({
      data(){
        return{
          text:'some text'
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>