Vue个人理解 Second Page（Vue个人理解 Second Page（v-on、事件修饰符、v-model数据双向绑定、Vue中样式的使用、使用内联样式、V-for和key属性、v-if与）

script~

已于 2022-10-28 21:46:02 修改

阅读量148

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-10-28 21:45:02 首次发布

本文链接：https://blog.csdn.net/weixin_48780364/article/details/127579064

版权

本文深入探讨Vue的事件处理，包括v-on的事件绑定、事件修饰符的使用，如.stop、.prevent等，以及v-model的数据双向绑定原理。同时，讲解了Vue中样式的动态应用，如使用class和内联样式，并介绍了v-for与key属性的关系以及v-if和v-show的选择策略。

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

书接上文

七、v-on

（1）进行事件的绑定

（2）简写@

示例：实现跑马灯效果

<!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>Document</title>
</head>

<body>
    <div id='app'>
        <button v-on:click="lang">浪起来</button>
        <button @click='didiao'>低调</button>
        <p>{
  {message}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '猥琐发育，别浪~~~',
                intervalId: null
            },
            methods: {
                lang() {
                    // 在这里可以直接通过this拿到message
                    // substring() 两个参数代表是一个范围
                    // substr() 第一个参数代表的是位置，第二个参数代表是个数
                    // 我们每次都创建一个新的定时器，旧的并没有被清楚掉
                    // clearInterval(this.intervalId)
                    if (this.intervalId != null) return;
                    this.intervalId = setInterval(() => {
                        let first = this.message.substring(1, 2);
                        let end = this.message.substring(1);
                        this.message = end + first;
                    }, 200);
                },
                didiao() {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                }
            },
        })
    </script>
    <!--
        1、给这个浪起来添加点击事件
        2、在methods定义一个方法，方法里我们让第一个字放到最后，然后重新给data里的message赋值。
        3、加一个定时器
    -->
</body>
</html>

八、事件修饰符

（1）.stop 阻止冒泡事件

（2）.prevent 组织默认事件

（3）.capture 添加事件侦听器时使用事件捕获模式

（4）.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

（5）.once 事件只触发一次

<!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>
    <style>
        .box {
            height: 200px;
            background-color: green;
        }
        .sub-box {
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" @click='clickBox'>
            <button @click.stop='clickBtn'>点我</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent='clickA'>baidu</a>
        <h1>capture事件修饰符</h1>
        <!-- 加这个capture修饰符要加在最外层容器 -->
        <div class="box" @click='clickBox'>
            <div class="sub-box" @click.capture='clickSubBox'>
                <button @click='clickBtn'>事件捕获</button>