技术自查-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)
            },
        }
    }
}