VUE

  • 表单修饰符

    v-model.lazy 失去焦点同步一次
    v-model.number 格式化数字
    v-model.trim 去掉首尾空格

  • 事件修饰符

    @click.stop 阻止冒泡
    @click.prevent 阻止默认行为
    @click.self 只有本节点触发，子节点冒泡也不会触发
    @click.once 只触发一次

  • 计算属性 computed:{}

    复杂逻辑,模板难以维护

    1. 基础例子
    2. 计算缓存 VS methods
    • 计算属性是基于它们的依赖进行缓存的。
    • 计算属性只有在它的相关依赖发生改变时才会重新求值
    1. 计算属性 VS watch
    • v-model

  • 自定义组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //全局组件
    Vue.component("name",{
        complate: `<div></div>`,
        //局部组件
        components: {
            name: {
                template: `<div>局部组件</div>`
            }
        },
        data(){
            return {
                data: data
            }
        }
    })

    组件编写方式与Vue实例的区别
    *自定义组件需要有一个root element
    *父子组件的data是无法共享
    *组件可以有data, methods, computed….,但是data 必须是一个函数

    组件通信
    1.父子组件传值 (props down, events up)
    2.属性验证
    props:{name:Number} Number, String, Boolean, Array, Object, Function, null(不限制类型)
    3.事件机制
    a.使用 $on(eventName) 监听事件
    b.使用 $emit(eventName) 触发事件
    4.Ref
    *<input ref="mytext"/> this.$refs.mytext
    5.事件总线
    *var bus = new Vue();
    *mounted生命周期中进行监听

    动态组件
    * 元素，动态地绑定多个组件到它的 is 属性
    * 保留状态，避免重新渲染

  • 自定义指令

    (1)自定义指令介绍 directives
    (2)钩子函数
    *参数 el,binding,vnode(vnode.context)
    *bind,inserted,update,componentUpdated,unbind
    (3)函数简写
    (4)自定义指令-轮播
    *inserted 插入最后一个元素时调用(vnode.context.datalist.length-1)
    *this.$nextTick()