1.事件绑定:v-on指令

 基本使用

Vue 中通过 v - on 指令给页面元素绑定事件。
语法:
v-on:事件名="js代码片段或函数" //事件名=事件属性-on  比如:click=onclick-on

//函数必须定义在Vue示例的methods属性中。
const vm = new Vue({
    el:"选择器",
  	methods:{
        //定义事件处理函数
        函数名:function(){
            //函数实现
        }
    }  
})

 示例代码

<div id="app">
    <h1 v-if="show">
        <span style="color:green">show=true</span>
    </h1>
    <h1 v-else>
        <span style="color:red">show=false</span>
    </h1>
    <!-- 直接使用函数名即可 -->
    <button v-on:click="handleClick">点我</button>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{//注意事件处理函数必须定义在methods中
            handleClick:function(){
                this.show=!this.show;//data中的属性,在函数中可以直接this.访问
            }
        }
    })
</script>

事件绑定还有简写语法:

@事件名="js代码片段或函数"

const vm = new Vue({
    el:"选择器",
    methods:{
        //定义事件处理函数:直接定义函数,甚至无需function关键字
        函数名(){
            ...
        }
    }
})

示例代码

<div id="app">
    <h2>num={{num}}</h2>
    <!-- 事件处理函数代码简单时,可以直接在事件绑定处写代码 -->
    <button @click="num++">自增</button>
    <button @click="decrement">自减</button>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            /*
         
            increment:function(){
                this.num--;
            }*/
            //methods定义函数还可以有如下简写形式 函数名(){}
           
            increment(){
                this.num--;
            }
        }
    })
</script>

 事件修饰符

在事件处理函数中调用 event.preventDefault() 禁用标签的默认行为或event.stopPropagation() 停止事件冒泡是非常常见的需求。

<div id="app">
    <a href="https://www.baidu.com" @click="handleClick">点我</a>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        methods:{
            handleClick(event){
                alert("被单击了");
                event.preventDefault();//禁用超链接的默认点击跳转
            }
        }
    })
</script>

尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop :阻止事件冒泡

  • .prevent :阻止默认事件发生,比如超链接的默认跳转、表单的提交(重点)

  • .self :只有元素自身触发事件才执行。(子元素的事件冒泡来的不执行)

  • .once :只执行一次

<div id="app">
    <a href="https://www.baidu.com" @click.prevent="handleClick">点我</a>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        methods:{
            handleClick(event){
                alert("被单击了");
                // event.preventDefault();
            }
        }
    })
</script>

2.标签属性的赋值:v-bind指令

 基本使用

有时,我们需要动态的修改标签的属性值,看如下需求:动态修改div的class属性值

<head>
    <style type="text/css">
        .red_bg{
            background-color: red;
        }
        .green_bg{
            background-color: green;
        }
    </style>
</head>
<body>
	<div id="app">
        <!-- 这里意图通过插值表达式动态获取class_name的值,但是失败了 -->
        <div class="{{class_name}}">点击按钮改变背景样式:{{class_name}}</div>
        <button @click="class_name='red_bg'">红色</button>
        <button @click="class_name='green_bg'">绿色</button>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                class_name:""
            }
        })
    </script>
</body>

无法直接在标签的属性中使用插值表达式动态的设置标签的属性值,这时候就需要使用v-bind指令。语法如下:

v-bind:属性名="Vue中的变量"

例如,在这里我们可以写成:

<div v-bind:class="class_name"></div>

不过,v-bind太麻烦,因此可以省略,直接写成::属性名="属性值" ,即:

<div :class="color"></div>
完整示例
<head>
    <style type="text/css">
        .red_bg{
            background-color: red;
        }
        .green_bg{
            background-color: green;
        }
    </style>
</head>
<body>
    
     <div id="app">
         <div class="{{class_name}}">点击按钮改变背景样式:{{class_name}}</div>
         <div v-bind:class="class_name">点击按钮改变背景样式:{{class_name}}</div>
         <div :class="class_name">点击按钮改变背景样式:{{class_name}}</div>
         <button @click="class_name='red_bg'">红色</button>
         <button @click="class_name='green_bg'">绿色</button>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                class_name:""
            }
        })
    </script>
</body>

绑定class属性的对象语法

我们可以传给 v-bind:class 一个对象,以动态地切换 class:

<div id="app">
   
    <div v-bind:class="{red_bg:showRed,green_bg:!showRed}">点击按钮改变背景样式</div>
    <button @click="showRed=true">红色</button>
    <button @click="shoRed=false">绿色</button>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            showRed:true
        }
    })
</script>

v-for时的key属性

当我们需要更新 v-for 渲染过的元素列表时,比如向数组中添加一个新的元素。为了保证Vue正确并高效的渲染页面,官方建议我们为每项提供一个唯一 key 属性,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素。key一般使用在遍历完后,又增、减数组的元素的时候更有意义。

示例:

<ul>
    <li v-for="(item,index) in items" :key="index"></li>
</ul>
  • 这里使用了属性赋值语法: :key="index"为每一个生成的元素设置一个唯一的key属性

  • 这里绑定的key是数组的索引,应该是唯一的

Logo

前往低代码交流专区

更多推荐