当前位置：首页 > article >正文

Vue的简单入门二

article 2025/2/23 3:58:48

一、模块语法中的指令

事件处理

v-on

内联事件处理器

方法事件处理器

事件参数

Event对象

同时传入参数和event对象

事件修饰符

阻止默认事件

编辑阻止冒泡事件

.once

.enter

数组变化的侦测

变更方法

替换一个数组

计算属性（computed）

计算属性缓存VS方法

Class绑定

绑定对象

多个对象绑定

绑定数组

三元运算符

数组和对象

Style绑定

一、模块语法中的指令

事件处理

v-on

我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：v-on:click=”methodname” 或 @click=”handler”

事件处理器的值可以是

内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似）

方法事件处理器：一个指向组件上定义的方法的属性名或者是路径。

内联事件处理器

<template>
    <h2>事件处理</h2>
    <h3>内联事件处理示例</h3>
    <button v-on:click="count++">+1</button>
    <button @click="count--">-1</button>
    <p>{{count}}</p><br>
    <p>内联事件处理非重点</p>
 </template>
 
 <script>
 export default{
     data () {
         return{
            count:0
         }
     }
 }
 </script>

结果如下：

方法事件处理器

<template>
    <h2>事件处理</h2>
    <p>方法事件处理</p>
    <button @click="add">+1</button>
    <p>{{count}}</p>
 </template>
 
 <script>
 export default{
     data () {
         return{
            count:0
         }
     },
     methods:{
        add(){
            //读取data里面的数据：this.属性名
            this.count++;
            console.log("click");
        }
     }
 }
 </script>

结果如下：

事件参数

事件参数可以获取event对象和通过事件传递参数。

Event对象

<template>
    <h2>事件处理</h2>
    <p>方法事件处理</p>
    <button @click="add">+1</button>
    <p>{{count}}</p>
 </template>
 
 <script>
 export default{
     data () {
         return{
            count:0
         }
     },
     methods:{
        //event对象
        add(e){
            this.count++;
            //Vue中的event对象，就是原生js的Event对象
            e.target.innerHTML="add"+this.count;
        }
     }
 }
 </script>

e.target.innerHTML="add"+this.count;: 这行代码修改了触发点击事件的元素（在这个例子中是 <button> 元素）的内部 HTML 内容。e.target 指的是触发事件的具体 DOM 元素，而 innerHTML 属性用于设置或获取该元素的 HTML 内容。这行代码将按钮的文本更改为 "add" 后跟当前的 count 值。

同时传入参数和event对象

<template>
    <h2>事件传参</h2>
    <div v-for="(value,index) in result" :key="index">
        <p @click="getname($event,value.name)">{{value.name}}-{{index}}</p>
        <img :title="value.title">
    </div>
 </template>
 
 <script>
 export default{
     data () {
         return{
            result:[
                {name:"a" ,title :"a"},
                {name:"b" ,title :"b"},
                {name:"c" ,title :"c"}
            ]
         }
     },
     methods:{
        getname(e,name){
            console.log(name);
            console.log(e);
        }
     }
 }
 </script>

结果如下

事件修饰符

在处理事件时调用event.preventDefault或event.stopPropagation（阻止默认事件和冒泡事件）是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不去处理DOM事件的细节会更好。

为解决这一问题，Vue为v-on提供了时间修饰符，常用如下：Stop,prevent,once,enter等等

阻止默认事件

<template>
    <h1>事件修饰符</h1>
    <a href="https://baidu.com" @click="g">百度</a>
    <a href="https://baidu.com" @click.prevent>百度</a>
</template>
<script>
export default{
    data(){
        return{

        }
    },
    methods:{
        g(e){
            e.preventDefault();
            console.log("点击了");
        }
    }
}
</script>

可见效果是一样的，事件修饰符更加简洁与方便。

阻止冒泡事件

<template>
    <h1>事件修饰符</h1>
    <div @click="clickDiv">
        <p @click="clickP">测试冒泡</p>
    </div>
</template>
<script>
export default{
    data(){
        return{

        }
    },
    methods:{
        g(e){
            e.preventDefault();
            console.log("点击了");
        },
        clickDiv(){
            console.log("点击了div标签");
        },
        clickP(){
            console.log("点击了p标签");
        }
    }
}
</script>

结果如图

以上代码的问题是：在点击子标签时，父标签也会跟着冒泡，需要阻止阻止。

<template>
    <h1>事件修饰符</h1>
    <div @click="clickDiv">
        <p @click.stop="clickP">测试冒泡</p>
    </div>
</template>
<script>
export default{
    data(){
        return{

        }
    },
    methods:{
        g(e){
            e.preventDefault();
            console.log("点击了");
        },
        clickDiv(){
            console.log("点击了div标签");
        },
        clickP(){
            console.log("点击了p标签");
        }
    }
}
</script>

结果如图

.once

这个修饰符表示事件处理函数只会触发一次。在第一次触发之后，监听器将被移除，不再监听后续的事件触发。这在某些情况下很有用，比如你只想让用户点击一个按钮一次，或者防止表单重复提交等。

示例：<button v-on:click.once="doSomething">点击我（只响应一次）</button>

.enter

实际上，.enter 并不是Vue官方提供的一个标准事件修饰符。可能你指的是监听键盘的回车键（Enter key）事件。通常，这个可以通过检查键盘事件的keyCode或key属性来实现，但如果你是在说v-on:keyup.enter或v-on:keydown.enter这样的用法，那么这是Vue为键盘事件提供的一种便捷写法，用于监听特定的按键。

当使用.enter修饰符时，事件处理函数只会在用户按下回车键时触发。

示例：<input v-on:keyup.enter="submitForm" />

在上面的示例中，submitForm方法只会在用户在<input>元素中按下回车键时触发。

数组变化的侦测

变更方法

Vue能够侦听响应式数组的变更方法，并在他们被调用时触发相应的更新。这些变更方法包括：

以push()方法为例：

<template>
    <h3>数组侦测变化</h3>
    <button @click="adddata">add data</button>
    <p v-for="(vaule,index) in names" :key="index">{{vaule}}</p>
</template>
<script>
export default{
    data(){
        return{
            names:["iwen","weiyu","biaoge"]
        }
    },
    methods:{
        adddata(){
            //引起UI自动更新
            this.names.push("tfeng");

        }
    }
}
</script>

当点击按钮时将把元素添加在数组后面：

替换一个数组

变更方法，就是对调用它们的原数组进行变更。

相对的，也有一些不可变方法，例如filter(),concat()和slice（）,这些都不会更改原数组，而是返回一个新数组。

<template>
    <h3>数组侦测变化</h3>
    <button @click="adddata">add data</button>
    <p v-for="(vaule,index) in names" :key="index">{{vaule}}</p>
</template>
<script>
export default{
    data(){
        return{
            names:["iwen","weiyu","biaoge"]
        }
    },
    methods:{
        adddata(){
            //不会引起UI自动更新
            this.names.concat(["Alice"]);
            console.log(this.names.concat(["Alice"]));
        }
    }
}
</script>

当点击按钮时，不会引起UI自动更新，实际上concat()方法已经将元素添加在数组后面了。

如果使用该函数，想使UI发生变化则

将本代码改成：this.names=this.names.concat(["Alice"]);

计算属性（computed）

模板中的表达式虽然很方便，但也只能做一些简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此使用计算属性来描述响应式状态的复杂逻辑。

把模板语法里的复杂逻辑放在计算属性里，推荐操作形式：

<template>
    <h3>计算属性</h3>
    <p>{{EmptyIslength}}</p>
</template>
<script>
export default{
    data(){
        return{
            name:["1","2","3"]
        }
    },
    //计算属性
    computed:{
        EmptyIslength(){
            return this.name.length>0?"yes":"no"
        }
    }
}
</script>

计算属性缓存VS方法

计算属性：计算属性值会基于其响应式依赖（以上为例就是name数组）被缓存。一个计算属性仅在其响应式依赖更新时才重新计算。

方法：方法调用总是在重渲染发生时再次执行函数。