接下來可能會跳很快

不懂的隨時可以打斷

Vue.js是漸進式框架

何謂漸進式框架？

基本上Vue.js的核心只關注於view layout的呈現，是提供最小化且必要的功能給予使用者。

其餘相關的功能項目都可用其他函式庫或是工具去協助處理。

https://medium.com/@gotraveltoworld/7d0281a7efa9​

也就是說

Vue.js只是一小塊

你可以獨立使用

也可以一起使用

首先，是vue的結構

<template>
 ...
</template>

<script>
export default {
  name: 'vue-simple',
  data () {
    return {
    }
  },
  props: {
    foo: {
      type: String,
      default: 'foo'
    }
  },
  watch: {
    foo (value) {
      this.foo = `${value}123`
    }
  },
  created () {
    // ...
  }
}
</script>

vue file原則上要有<template>以及<script>

<template>定義HTML
<script>定義行為

可是要注意

<template>只能有一個element

<template>
  <div>
    <div class="row">
      <div class="col-md-12">
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'component-foo',
  data () {
    return {
    }
  }
  
  // ... write your code here
}
</script>

一定會想問

default裡面是什麼

介紹幾個基本的

Vue.js 的實體物件

• data                - 定義在template可以使用的變數
• props             - 同data，由parent component引入
• watch             - this底下的變數觸發時會變動
• name             - template使用的名稱
• utils                - 為一個陣列，定義vuejs的實體物件(擴充)
• components - 引入的component 
• methods        - Vue.js的自定義function
• computed      - 經過計算的變數，用function in object

再來，是生命週期

篇幅有限，忍耐一下

根據官方的說法

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

一般的情況，只有前面四個比較好用

另外，值得注意的是

Vue.js跟jQuery的lifecycle不一樣

通常得到`beforeMount`

才有可能找得到DOM

所以盡量別在裡面用jQuery