第二节：VUE绑定数据、事件指令

最新推荐文章于 2024-03-22 11:14:05 发布

小戈&328

最新推荐文章于 2024-03-22 11:14:05 发布

阅读量512

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43220836/article/details/126268291

版权

vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

第二节：VUE绑定数据、事件指令

基本指令

事件绑定指令：

v-on、@ : 绑定事件

@ 是 v-on 的缩写

数据绑定：

v-bind 动态进行绑定

: 是 v-bind: 的缩写

事件绑定案例

v-on 、@ 事件绑定

v-on 是绑定事件的组件，可以简写为：@ 。例如 v-on:click 等于@click

v-on:click.once 或 @click.once 绑定一次性事件

@keyup.13、@keyup.enter 回车事件

v-on 绑定多个事件：{键：事件，值：事件函数}

@submit.stop.prevent 阻止默认事件以及阻止冒泡事件

扩展： 创建事件这里不得不提起vue的生命周期，vue生命周期可以分为以下八个阶段，分别是：

beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）。这里我们先介绍一下 vue的 methods 属性 ,在vue中,函数被定义成为方法来使用,这些方法定义在methods属性中,然后就可以在vue 表达式中调用函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例</title>
</head>

<body>
    <!-- 判断指令 -->
    <div id="app">
        <div>
            <p>显示算法数据：{{sum}}</p>
            <hr>
            <!-- v-on绑定事件 -->
            <h1>{{about}}</h1>
            <button v-on:click.once="funcReset">v-on:click.once:Reset</button><!-- 绑定一次事件 -->
            <button v-on:click="funcAdd">v-on:Add</button>
            <button v-on:click="funcReduce">v-on:Reduce</button>
            <button v-on:click="funcReset">v-on:Reset</button>
            <hr>
            <!-- @绑定事件 -->
            <h1>{{about1}}</h1>
            <button @click.once="funcReset">@click.once:Reset</button><!-- 绑定一次事件 -->
            <button @click="funcAdd" funcAdd>@click:Add</button>
            <button @click="funcReduce">@click:Reduce</button>
            <button @click="funcReset">@click:Reset</button>
            <hr>
            <!-- 响应键值的事件，属于修饰符 -->
            <h1>{{about3}}</h1>
            <input type="text" value='键盘按下事件！' @keyup.13='funcAdd'>
            <input type="text" value='键盘按下enter事件！' @keyup.enter='funcAdd'>
            <hr>
            <!-- {键：事件，值：事件函数} -->
            <h1>{{about4}}</h1>
            <button v-on="{click:funcAdd,mousemove:funcReset}">绑定多个事件</button>
            <hr>
            <!-- @submit.stop.prevent 阻止默认事件以及阻止冒泡事件 -->
            <h1>{{about5}}</h1>
            <form action="https://www.baidu.com" @submit.stop.prevent>
                <input type="submit" value="提交按钮">
            </form>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                about: 'v-bind:事件绑定',
                about1: '@:事件绑定',
                about3: 'enter:回车事件',
                about4: ' v-on:绑定多个事件',
                about5: ' @submit.stop.prevent 阻止默认事件以及阻止冒泡事件 ',
                sum: 0
            },
            methods: {
                funcAdd: function () {
                    this.sum++
                },
                funcReduce: function () {
                    this.sum--
                },
                funcReset: function () {
                    this.sum = 0
                }
            }
        })
    </script>
</body>
</html>

数据绑定

v-bind 数据绑定

v-bind:src 绑定图片应用地址 :scr 绑定图片地址 :alt 绑定提示

v-bind:value 绑定值等价于:value

v-bind 可以简写为：: 例如：v-bind:class 等于 :class

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>案例</title>
</head>
<style>
    .div1 {
        color: aqua;
    }
</style>

<body>
    <div id="app">
        <h1>{{about}}</h1>
        <span>{{author}}</span>
        <hr>
        <img src="./images/1.jpg" alt="加载失败。。。">
        <!-- v-bind:动态进行绑定; 加v-bind后，双引或单引的内容变成变量-->
        <img v-bind:src="'./images/1.jpg'" alt="">
        <br />
        <!-- 直接引用字符串 -->
        <img v-bind:src="'./images/123.png'" alt="" width='200'>
        <!-- es5字符串接 -->
        <img v-bind:src="'./images/'+idxImg" alt="" width='200'>
        <!-- 图片的路径可以使用es6的反引号 -->
        <img v-bind:src="`./images/${idxImg}`" alt="" width='200'>
        <br />
        <!-- v-bind:attr  可以简写为:attr -->
        <img :src="`./images/${idxImg}`" alt="" :width='widths'>
        <img src="" :alt="'加载失败'" :width='widths'>

        <!-- 动态绑定class -->
        <div class="div1">123</div>
        <div v-bind:class="cls"> 动态绑定class类名 </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        new Vue({
            el: '#app',
            data () {
                return {
                    about: 'v-bind:绑定数据',
                    author,
                    img: './images/1.jpg',
                    idxImg: '123.png',
                    widths: '300',
                    cls: "div1"
                }
            }
        })
    </script>
</body>

</html>

小戈&328

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
第二节：VUE绑定数据、事件指令

@submit.stop.prevent 阻止默认事件以及阻止冒泡事件 '属性 ,在vue中,函数被定义成为方法来使用,这些方法定义在。属性中,然后就可以在vue 表达式中调用函数。这里我们先介绍一下 vue的。阻止默认事件以及阻止冒泡事件。' v-on:绑定多个事件''v-bind:事件绑定''v-bind:绑定数据''enter:回车事件'......
复制链接

扫一扫