技術自查-vue2.x

vue2.x 

node/npm  包管理器
vue-cli 工程搭建
參考mvvm 框架進行代碼劃分和分工
vm 代表 vue 實例

vue 實例

 

new Vue({
    data:{},
    created(){},
    methods:{},
})

vue 組件選項參數

export default {
    name:'',
    mixins: [
      Mixin.calcHeight,
    ],
    props:[],
    data(){},
    created(){},
    computed:{}, // 有緩存
    watch:{}, // 場景：監聽表單對象是否修改
    methods:{},
}

vue 響應式數據

只有當實例被創建時就已經存在於 data 中的屬性纔是響應式的。
使用 Object.freeze()，這會阻止修改現有的屬性，也意味着響應系統無法再追蹤變化。
有前綴 $是vue實例屬性方法，以便與用戶定義的屬性區分開來

console.log(this.$data === data);
this.$watch('a',function(newVal,oldVal){})

vue 實例初始化過程中的鉤子函數，生命週期

包括：設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等
不要在選項 property 或回調上使用箭頭函數

vue模板語法

Mustache 語法 {{msg}}
高效渲染和渲染順序(key 不重複)
Vue 會儘可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。

vue常用指令

v-once  
v-html
v-bind  動態綁定屬性，靜態綁定屬性 
 

<div  class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<div  :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

v-on  監聽事件  事件修飾符

<a @click="doSomething">...</a>
<a @[event]="doSomething"> ... </a>
<a @click.stop="doThis"></a>
<form @submit.prevent="onSubmit"></form>
<a   @click.stop.prevent="doThat"></a>
<div @click.capture="doThis">...</div>
<div @click.self="doThat">...</div>
<a   @click.once="doThis"></a>
<div @scroll.passive="onScroll">...</div>
<input @keyup.enter="submit">
<input @keyup.13="submit">

v-for 列表渲染
v-if 真正的條件渲染
v-else-if
v-else
v-show  v-show 不支持 <template> 元素，也不支持 v-else 初始渲染開銷大
v-model 表單雙向綁定

<input v-model.lazy="msg">
<input v-model.number="age" type="number">
<input v-model.trim="msg">
<input v-model.lazy="msg">

vue 組件通信
子組件可以通過調用內建的 $emit 方法並傳入事件名稱來觸發一個事件
使用 $emit 的第二個參數來提供這個值
一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合併”。

export default {
    calcHeight: {
        data() {
            return {
                tableHeight: ''
            }
        },
        mounted() {
            this.calcHeight()
        },
        methods: {
            calcHeight() {
              setTimeout(() => {
                this.tableHeight = this.$refs.main.$el.offsetHeight - 70 + 'px'
              }, 10)
            },
        }
    }
}