Vue小结（2）

最新推荐文章于 2024-06-25 21:26:57 发布

头秃患者77

最新推荐文章于 2024-06-25 21:26:57 发布

阅读量656

点赞数 23

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/pig_pig7/article/details/136786344

版权

本文详细介绍了Vue.js中的事件修饰符如.prevent、.stop、.once等，v-model的lazy、number和trim修饰符，以及双向数据绑定、自定义指令的使用、MVVM模型和计算属性的计算方法。实例演示了如何在实际项目中应用这些概念。

摘要由CSDN通过智能技术生成

一.事件修饰符

1 .prevent阻止浏览器默认行为

2 .stop阻止冒泡事件

3 .once只能触发一次

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

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

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

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

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

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

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

例：
<a href="" @click.prevent="func1()">链接</a>
        <div @click.self="func2()" class="box1">
            我是div
            <p @click.self="func3()" class="box2">
                我是p
                <span @click="func4()" class="box3">我是span</span>
            </p>
        </div>

二. v-model修饰符

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

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

3.v.model.trim清除前后空格

例：

<form action="" method="" @click.prevent="func()">
            姓名：<input type="text" v-model.trim="dataList.userName">
            <br>

4.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">

            <br>
            性别：
            <label for="nan">男</label>
            <input type="radio" id="nan" name="1" v-model="dataList.sex" value="1">
            <label for="nv">女</label>
            <input type="radio" id="nv" name="1" v-model="dataList.sex" value="2">
            <br>

5.lazy失去焦点后提交数据(data）

例：

手机号1：<input type="tel" v-model.lazy="dataList.iphone">
            {{dataList.iphone}}
            手机号2：<input type="tel" v-model="dataList.iphones">
            {{dataList.iphones}}
            <br>
            爱好：
            <label for="sing">唱</label>
            <input type="checkbox" id="sing" v-model="dataList.hobby" value="1">
            <label for="dance">跳</label>
            <input type="checkbox" id="dance" v-model="dataList.hobby" value="2">
            <label for="rap">rap</label>
            <input type="checkbox" id="rap" v-model="dataList.hobby" value="3">
            <label for="basketball">篮球</label>
            <input type="checkbox" id="basketball" v-model="dataList.hobby" value="4">
            <br>
            <input type="submit" value="提交">
            <!-- <button>确定</button> -->
        </form>
    </div>

三.v-model是什么和 v-model原理

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

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

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

v-model原理：

1.使用v-bind绑定数据

2.使用oninput传递数据

四. directives局部自定义指令

例：

directives:{
            "nums":{
                bind(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*10;
                    console.log("-----------------");
                },
                inserted(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*100;
                    console.log("-----------------");
                },
                update(element,binding) {
                    console.log(element);
                    console.log(binding);

                },
            }
        },

五. window.event==e

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

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

例：

func(){
                console.log(11111111111);
                console.log(event);
                console.log(event.target);
                return this.val=event.target.value;
            },
            fun1(){
                // console.log(event);
                console.log(window.event);
            },
            myfunc1(){

            }
        },
    })

六.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(元素,绑定对象){}

}

例：
 Vue.directive("num1",{
        bind(element,binding){
            // console.log(element);
            // console.log(binding);
            // element.innerHTML = binding.value;
        },
        inserted(element,binding){
            // console.log(element);
            // console.log(binding);
            element.innerHTML = binding.value+99;
            binding.value = binding.value+99;
        },

八.函数式

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

1.局部自定指令

directives,需要定义在Vue实例中

2.全局自定义指令

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

例：

 Vue.directive("num2",function(element,binding){
        // console.log(this);
        element.innerHTML = binding.value+98;
    })
    Vue.directive("num1",{
        bind(element,binding){
            // console.log(element);
            // console.log(binding);
            // element.innerHTML = binding.value;
        },
        inserted(element,binding){
            // console.log(element);
            // console.log(binding);
            element.innerHTML = binding.value+99;
            binding.value = binding.value+99;
        },
        update(element,binding){
            // console.log(element);
            // console.log(binding);
            element.innerHTML = binding.value+binding.oldValue;
            binding.value = binding.oldValue;
        }
    })

九.使用插值计算和methods中函数方法计算

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        
        <h1>{{firstName-lastName}}</h1>
        
        <h1>{{func()}}</h1>
        <h1>{{fullname}}</h1>
        <select name="" id="" v-model="fullname">
            <option value="0">江西省</option>
            <option value="1">湖南省</option>
            <option value="2">广东省</option>
        </select>
        <select name="" id="">
            <option v-for="(item,index) of arr[fullname]" :key="index+item" value="index">{{item}}</option>
        </select>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                firstName:"",
                lastName:"",
                nums:0,
                arr:[
                    ["南昌市","宜春市","赣州市","上饶市"],
                    ["长沙市","株洲市","怀化市"],
                    ["广州市","深圳市","潮汕市"],
                ]
            }
        },
        computed:{
            fullname:{
                get(){
                    console.log("调用了get方法");
                    return 1;
                },
                set(value){
                    console.log(value);
                    console.log(this.fullname);
                    this.fullname = value;
                }
            }
        },
        directives:{

        },
        methods: {
            func(){
                return this.firstName-this.lastName;
            }
        },
    })
</script>
</html>