來到了連假Day3~
今天要寫一個Vue實例的組成

一樣是很無聊卻又非常重要的觀念篇~

撐住就是你的!!
　　--某個老師跟我講的

#Vue實例的組成

基本一個Vue實例會包含以下, 但不是一定會需要, 視情況使用:

• el: 對應要實例的元件
• data: 用於存放各種數據
• methods: 用於存放方法供呼叫
• props: 來自父層給予的資料
• computed: 用於計算資料後回傳
• watch: 用於觀察數據的改變

其中 el & data & methods 在前幾篇都有用到, 大致用法也有提到, 這幾個待會會簡單帶過

#el

el的部分, 前面某篇提到過, 它是使用CSS選擇器來抓到要實例的元件
這裡寫個簡單範例:

<div id="app"></div>

var app = new Vue({
  el: '#app' //抓到id為app的元件並將它Vue實例化
})

#data

data的部分
非常重要!!!!
非常重要!!!!
非常重要!!!!
Vert important!!!!
由於Vue是用資料來驅動畫面, 於是存放資料的地方就相當於人的大腦, 是整個Vue實例的核心
存放資料是使用key:value的方式, 例如:

var app = new Vue({
  ...,
  data: () => ({
      key1: 'value1',
      key2: 'value2',
  }),
})

#methods

methods沒甚麼好說的~
就是個放function的地方, 等待呼叫
寫法如下:

var app = new Vue({
  ...,
  methods: {
      myFunction1(){
          //dosomething...
      },
      myFunction2(){
          //dosomething...
      },
  },
})

是個無聊的區塊

///分隔線///接下來是之前沒有出現過的成員了///

#props

props是接收從父層傳遞進來的資料
寫法如下:

var app = new Vue({
  ...,
  props: ['myProps1', 'myProps2'],
})

接收進來的資料, 使用方式就跟data一樣

順帶一提父層是使用v-bind把資料綁定後傳進來的
例如:

<mycomponent :myProps1="fatherData"></mycomponent>

傳入後子層的元件就可以去呼叫他使用囉!!

#computed

computed也是很重要常常使用到
他的用途在於, 常常我們的data不會是要呈現在畫面上的樣子, 透過computed做加工的動作再去呈現出來
寫個簡單的範例, 假設今天得到的data->datetime長這樣:

var app = new Vue({
  ...,
  data: () => ({
      datetime: '20200627104030',
  }),
})

但我們要把它改為人看的日期格式, 這時利用computed來協助:

var app = new Vue({
  ...,
  data: () => ({
      datetime: '20200626104030',
  }),
  computed: {
      formatdatetime() {
          return (
              this.datetime.substr(0, 4) +
              "/" +
              this.datetime.substr(4, 2) +
              "/" +
              this.datetime.substr(6, 2) +
              " " +
              this.datetime.substr(8, 2) +
              ":" +
              this.datetime.substr(10, 2) +
              ":" +
              this.datetime.substr(12, 2)
          );
      }
  }
})

最後在原本呼叫datetime的地方改為呼叫formatdatetime就可以囉~

//這邊會出現20200627104030
<div>
    {{ datetime }}
</div>
//花括號改成formatdatetime
<div>
    {{ formatdatetime }}
</div>
//結果變為2020/06/27 10:40:30

#watch

最後一個watch顧名思義是在觀察, 觀察什麼呢? 觀察你(羞)
它的用途是在觀察指定值, 當值發生變動時, 做一些什麼事
套一個官網的範例:

var app = new Vue({
  ...,
  data: () => ({
      a: 1,
  }),
  watch: {
      a: function(val, oldVal) {
          console.log('new: ' + val + ', old: ' + oldVal)
      },
  },
})

當a值改變為2時, 看一下console會發現跑出
new: 2, old: 1

這個功能就很適合拿來用在前端表單驗證上
例如input先v-model某個data, 且限制輸入數字, 當內容改變, 就用watch來寫判斷這個data是否為數字, 進而跳出提示之類的

今天大概就到這~
重新複習了一下vue的組成部分
充實了第三天的早上

PS. 天氣似乎有一天比一天熱的現象, 家裡冷氣又剛好壞掉...你懂的