1. vue散碎知識點學習

1.1. 特點

1. 數據渲染/數據同步
2. 組件化/模塊化
3. 其他功能路由，ajax，數據流

1.2. Vue.js學習資源

1. vuejs中文官網：http://cn.vuejs.org
2. vuejs源碼：https://github.com/vuejs/vue
3. vuejs官方工具：https://github.com/vuejs

1.3. Vue實例對象

var my = new Vue({
    el: '#app',
    template: '<div>{{}}</div>',
    data:{
        fruit: 'apple'
    }
})

1.4. 綁定事件

//綁定鍵盤按下enter事件
v-on:keydown.enter=""

v-on縮寫@

:class="{odd:index%2}" 判斷odd什麼時候需要顯示出來

v-bind:縮寫:

//修改數組
Vue.set(this.list, 1, {
    name: 'pinaapple',
    price: 256
})

this.$emit("xxx") 子組件提交事件，父組件可以監聽 

watch：{

}
用來監聽數據變化

1.5. 父子組件

子組件調用父方法

父組件 @my-event="getMyEvent"綁定方法 監聽事件
子組件 觸發方法，傳入參數
methods: {
    emitMyEvent(){
      this.$emit('my-event', this.hello)
    }
}

父組件調用子方法
父組件
componentA number='12' @my-event="getMyEvent">
      <p slot="header">header</p>//插槽
      <p slot="footer">footer</p>
    </componentA>

子組件
<div>{{number}}</div>
<slot name="header">no header</slot>
<slot name="footer">no footer</slot>

props: {
    number:[Number,String]
}

動態綁定組件
<p :is="currentView"></p>

import ComA from './components/a'
components: {
    ComA
},
data:{
    currentView: 'com-a'
}

1.6. 緩存

<keep-alive></keep-alvie>包裹

1.7. 元素過度

1. 相同元素key區分
2. transition動畫

1.8. 工具推薦

1. MobaXterm是ssh,ftp工具，https://mobaxterm.mobatek.net/
2. FinalShell，可用於mac，http://www.hostbuf.com

1.9. 路由

1. 在路徑加參數可以在路由到的組件拿到

main.js
routes: [
    {
      path: '/apple/:color',
      component: Apple
    },{
      path: '/banana',
      component: Banana
    }
  ]

Apple.vue
methods: {
      getParams(){
          console.log(this.$route.params)
      }
  }

1.10. vue實例

// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個回調將在 `vm.a` 改變後調用
})

<span v-once>這個將不會改變: {{ msg }}</span>

v-bind縮寫
    <!-- 完整語法 -->
    <a v-bind:href="url">...</a>

    <!-- 縮寫 -->
    <a :href="url">...</a>

v-on縮寫
    <!-- 完整語法 -->
    <a v-on:click="doSomething">...</a>

    <!-- 縮寫 -->
    <a @click="doSomething">...</a>

1.11. 計算屬性vs偵聽屬性

https://cn.vuejs.org/v2/guide/computed.html

不要濫用watch，有時候可以用computed代替

1.12. class與Style綁定

1.12.1. 對象語法

<div v-bind:class="{ active: isActive }"></div>
上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 truthiness。

1.12.2. 數組語法

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染為：
<div class="active text-danger"></div>

可以用三元表達式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

1.13. 條件渲染

https://cn.vuejs.org/v2/guide/conditional.html

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no