vue~methods_created_mounted_watch_computed的介紹

methods_created_mounted_watch_computed在vue裏是最基礎的方法，它在vue裏有着本身 的做用，例如頁面渲染前，渲染後，變量發生變化後，計算屬性值等等。

<template>
  <div>
    <Input type="text" v-model="message" clearable placeholder="請輸入用戶名" style="width: 200px" />
    {{full}}
    <br />len:
    <Input type="text" v-model="len" />width:
    <Input type="text" v-model="width" />
    <input v-model="areas" type="text" />
  </div>
</template>
<script>
export default {
  name: "test-manage",
  props: {
    //接收父組件傳遞過來的參數
  },
  data() {
    // 定義變量
    return {
      message: "hello",
      full: "",
      len: 0,
      width: 0
    };
  },
  methods: {
    //事件方法執行
    init() {
      message = "hello world!";
    }
  },
  created() {
    //html加載完成以前執行,執行順序：父組件-子組件
  },
  mounted() {
    //加載完成後執行,執行順序：子組件-父組件
  },
  watch: {
    //監聽一個值的變化，而後執行相對應的函數
    message: function(val) {
      this.full = "名稱:" + val;
    }
  },
  computed: {
    //計算屬性，也就是依賴其它的屬性計算所得出最後的值
    areas: function() {
      console.log("調用computed");
      return this.len * this.width;
    }
  }
};
</script>