第二周笔记

 事件修饰符

        .prevent阻止浏览器默认行为

        .stop阻止冒泡事件

        .once只能触发一次

        .capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发

        打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，

        先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）

        .self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式)

        给元素设置self后，点击当前设置的自身元素会触发

        点击设置self的子类，会跳过设置了self的元素

        event.stopPropagation();阻止冒泡事件

 v-model修饰符

        v-model.lazy失去焦点后提交数据(data)

        v-model.number可以将字符串转换为有效数字  "1"==1

        v.model.trim清除前后空格

        <form action="" method="" @click.prevent="func()">

            姓名：<input type="text" v-model.trim="dataList.userName">

            <br>

            .number可以将字符串转换为有效数字  "1"==1

             注：通常使用v-model绑定表单v-model="",

            v-model:value="" 需要设置默认值

            年龄1：<input type="number" v-model.number="dataList.age">

            年龄2：<input type="number" v-model="dataList.ages">

  v-model是什么

        1.双向数据绑定，既可以拿取data的数据，也可以写入数据

        2.v-model本身是一个语法糖，一般用于表单收集

        3.v-model自动绑定表单value值 v-model=""

        v-model原理

        1.使用v-bind绑定数据

        2.使用oninput传递数据 

         vue.js devtools扩展工具

   window.event==e

            不同：e定义函数后不要加(),event可加可不加

            相同：取到操作元素的所有方法

 Vue的MVVM模型，数据代理

    MVVM与MVC区别

    1.VM(vue)==C(调服务)

    2.MVVM双向(双向绑定，数据代理)，MVC单向(直接操作DOM)

    3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)

    自定义指令

    规则：1.定义指令名称时不要使用v-和驼峰，需要使用-连接，需要加引号

    2.使用时需要v-

    3.对象式

    "指令名":{

        绑定成功触发

        bind(元素,绑定对象){},

        插入页面触发

        inserted(元素,绑定对象){},

        元素解析触发(值改变)

        update(元素,绑定对象){}

    }

    4.函数式

    "指令名"(元素,绑定对象){}

    1.局部自定指令

    directives,需要定义在Vue实例中

    2.全局自定义指令

    directive,需要定义在Vue实例之前