檢視中的渲染

前面我們介紹了專案的執行（hello world), 資料夾的結構，以及index.html中的內容是如何一點點的渲染出來的。下面，我們來學習下Vuejs中對於檢視的操作。

渲染某個變數

假定我們定義了一個變數：

<script>
export default {
  data () {
    return {
      my_value: '預設值',
    }
  },
}
</script>

我們就可以這樣來顯示它：

<div>{{my_value}}</div>

完整程式碼如下： （ src/components/Hello.vue)

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: '你好Vue! 本訊息來自於變數'
    }
  }
}
</script>

<style>
</style>

可以看到，上面的程式碼顯示定義了 message 這個變數， 然後把它在 <h1> {{ message }} </h1> 中顯示出來。

開啟瀏覽器 http://localhost:8080/#/say_hi_from_variable , 就可以看到下圖所示：

方法的宣告和呼叫

宣告一個方法：　show_my_value

<script>
export default {
  data () {
    return {
      my_value: '預設值',
    }
  },
  methods: {
    show_my_value: function(){
      // 注意下面的　this.my_value, 要用到this這個關鍵字．
      alert('my_value: ' + this.my_value);
    },
  }
}
</script>

呼叫上面的方法

<template>
  <div>
    <input type='button' @click="show_my_value()" value='...'/>
  </div>
</template>

對於有引數的方法，直接傳遞引數就好了．　例如:

<template>
  <div>
    <input type='button' @click="say_hi('Jim')" value='...'/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      my_value: '預設值',
    }
  },
  methods: {
    say_hi: function(name){
      alert('hi, ' + name)
    },
  }
}
</script>

上面程式碼中，

<input type='button' @click="say_hi('Jim')" value='...'/>

就會呼叫 say_hi 這個方法 , 傳入引數　‘Jim’。

事件處理：v-on

我們看到，很多時候，　@click 等同於 v-on:click, 下面兩個是一樣的：

<input type='button' @click="say_hi('Jim')" value='...'/>
<input type='button' v-on:click="say_hi('Jim')" value='...'/>