Vue第二周

1.事件修饰符

.prevent 阻止浏览器默认事件

<!--设置之后无法跳转链接，但是能触发函数-->
 <a href="http://www.baidu.com" @click.prevent="fun()">链接</a>

.stop阻止冒泡事件

当两个盒子重叠在一起并且都设置了事件时，stop可以阻止冒泡

.once只触发一次

.self 阻止自身事件促发，但不会阻止冒泡，间接性有捕获效果

    在冒泡事件中，点击设置了self的子类，才不会触发自身
    点击设置了self本身是可以触发的

<div @click.self="func2()" class="box1">
            1
            <p @click.self.once="func3()" class="box2">
                2
                <span @click="func4()" class="box3">3</span>
            </p>
        </div>

func2(){
                console.log("div元素");
            },
            func3(){
                // console.log(event);
                // event.stopPropagation();
                console.log("p元素");
            },
            func4(){
                console.log("span元素");
            }

2.v-model修饰符

注：使用v-model时尽量使用v-model=“” 不要使用v-model:value=“”,只有在需要设置初始值才使用v-model:value=“”

.lazy 失去焦点后提交值

<textarea v-model.lazy="formData.other" name="" id="" cols="30" rows="10"></textarea>
{{formData.other}}

失去焦点后提交里面的值，失去焦点前并不会触发

.number有效转换"1"== 1 为数字

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

设置之后获取的value值是数字，而不是字符串

.trim清除前后空格

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

v-model是什么

  1.双向数据绑定，既可以从data流向页面，也可以由页面流向data
  2.通常用于表单收集，v-model默认绑定value值
  3.v-model:value=""或v-model=""(简写)

v-model原理

  1.v-model本质是一个语法糖
  2.v-bind绑定数据
  3.oninput数据传递

directives局部自定义指令语法

directives:{
            "nums":{
                // bind成功绑定时调用
                bind(element,binding){
                    console.log(element);
                    console.log(binding);
                    console.log("----------------");
                },
                // inserted成功插入页面调用
                inserted(element,binding){
                    console.log(element);
                    console.log(binding);
                    console.log("----------------");
                },
                // update重新解析时(改变)调用
                update(element,binding){
                    console.log(element);
                    console.log(binding);
                    console.log("----------------");
                }
            }
        }

测试双向数据绑定原理

  e和event区别
  1.定义函数()，接收时e,当为形参
  2.e自身某个事件带有的方法，event是window带有的
  3.e = window.event;兼容

自定义指令

  规则：定义指令名称不能使用驼峰和v-，要是用-连接，记得添加引号
  使用时要v-自定义名称
  函数写法:名称(节点,绑定对象){}
  对象写法:
  名称:{
        绑定成功调用
        bind(节点,绑定对象){},
        插入到页面调用
        inserted(节点,绑定对象){},
        重新解析时调用(值发生改变)
        update(节点,绑定对象){}
    }

1.局部自定义指令

directives ,写入Vue实例中，上边directives局部自定义指令语法已经写了，咱们直接跳过

2.全局自定义指令

Vue.directive ,定义在实例化之前

Vue.directive("num2",function(element,binding){
        element.innerHTML = binding.value;
    })

插值

1.使用插值做计算

<h1>{{a-b}}</h1>

2.methods操作计算

<h1>{{func()}}</h1>

func(){
        // return this.a-this.b; 计算
        return this.a+"-"+this.b//拼接
}

MVVM模型

Vue的MVVM模型，数据代理

MVVM与MVC区别

  1.VM(vue)==C(调服务)
  2.MVVM双向(双向绑定，数据代理)，MVC单向(直接操作DOM)
  3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)