箭头函数、for循环、事件修饰符

m0_58310590

于 2024-05-19 23:24:50 发布

阅读量924

点赞数 13

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_58310590/article/details/139050726

版权

【箭头函数】

匿名函数： 使用function关键字定义的普通匿名函数。

var f = function(name) {
    console.log(name);
};
f('jing');

无参数无返回值的箭头函数：

var f1 = () => {
    console.log('这个就是箭头函数');
};
f1();

有多个参数无返回值的箭头函数：

var f2 = (name, age) => {
    console.log(name, age);
};
f2();

有一个参数无返回值的箭头函数：

var f3 = name => {
    console.log(name);
};
f3('jingyexiao');

var f3 = () => {

};
f3();

有一个参数，一个返回值的箭头函数：

var f4 = name => {
    return name + '_nb';
};
f4('jianshu');

这个可以简写成：

var f5 = name => name + '_nb';
var res = f5('jianshu');
console.log(res);

箭头函数内部的this： 箭头函数内部没有自己的this，会继承外层作用域的this

// 在全局作用域下定义一个对象
const obj = {
  name: 'Alice',
  getNameRegular: function() {
    return this.name; // 正常函数中的this指向当前对象obj
  },
  getNameArrow: () => {
    return this.name; // 箭头函数中的this继承自外层作用域，在这里指向全局作用域的this（通常是window对象）
  }
};

console.log(obj.getNameRegular()); // 输出: "Alice"，正常函数中的this指向obj对象
console.log(obj.getNameArrow()); // 输出: undefined，箭头函数继承外层作用域的this，在全局作用域中找不到name属性，返回undefined

如果在外部写一个let name = 'yun'

结果就会输出console.log(obj.getNameRegular()); // 输出: "Alice"，正常函数中的this指向obj对象
console.log(obj.getNameArrow()); // 输出: yun，

总结

原始的函数声明方式：

var f = function(name) {
    console.log(name);
};
f('jing');

使用箭头函数：

这里function= =>

var f3 = (name) => {
    console.log(name);
};
f3('jing');

let f=()=>{}

【 js for循环】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js for 循环</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<ul id="app">
    <li v-for="item in arr" :key="item">{{ item }}</li>
    <hr>
    <br>
    <li v-for="num in data_list" :key="num">{{num}}</li>
</ul>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4, 5, 6, 7, 8],
            data_list:[]
        },
        created() {
            // 在Vue 在组件创建之后执行
            // 这个就是一个钩子函数
            for (let i = 11; i < 19; i++) {
                this.data_list.push(i);
            }

        }
    })


</script>

</html>

【事件修饰符】

.stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）

注意事项：

.stop 修饰符会阻止事件继续传播，这意味着在点击 .inner 元素时，事件只会触发 .inner 的处理函数，不会继续传播到其父元素 .top 上。
.self 修饰符只有当事件的目标是当前元素本身时才触发处理函数，不会触发由子元素冒泡上来的事件。
.prevent 修饰符用于阻止默认行为，比如在点击 <a> 标签时，阻止其默认的跳转行为。

就会可以让阻止事件不起作用
- ```
    dian1(){
         console.log("点个毛")
         location.href='https://www.yituyu.com/'
     },
```
.once 修饰符确保事件处理函数只会触发一次，无论是通过点击还是其他方式触发，而且刷新页面后会重置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <style>
        .top {
            height: 300px;
            width: 300px;
            background-color: lightpink;
            margin: auto;
        }

        .inner {
            height: 50px;
            width: 150px;
            background-color: cadetblue;
            margin: auto;
        }
        .text-center{
            text-align: center;
        /*  将文本水平居中对齐  */
        }
    </style>

</head>
<body>

<div id="one">
    <h3 class="text-center">事件修饰符号---》stop</h3>

<!--  阻止事件冒泡(点击（子类）有惊喜！！！只会触发当前的事件，并不会冒泡触发（父类) 没有的事件)  -->
    <div class="top" @click="handTop">（父类) 没有
        <div class="inner" @click.stop="handinner">（子类）有惊喜！！！</div>
    </div>

    <h3 class="text-center">事件修饰符号---》self</h3>
<!--只有event.targer是当前操作的元素才触发(只有点击自身才会触发，通过冒泡也不会触发事件)-->
    <div class="top" @click.self="handTop">
        <div class="inner" @click="handinner">点我！！！</div>
    </div>

    <h3>事件修饰符--》prevent</h3>
<!--    阻止a链接的跳转   -->
    <a href="https://www.yituyu.com/" @click.prevent="dian1">点我看美女</a>

    <h3>事件修饰符--》once</h3>
    <button @click.once="choujian">抽奖</button>
</div>
<script>
    new Vue({
        el: "#one",
        data:{},
        methods:{
            handTop(){
                console.log('我是你爹！！')
            },
            handinner(){
                console.log('对对对对我是儿子！！')
            },
            dian1(){
                console.log("点个毛")
                location.href='https://www.yituyu.com/'
            },
            choujian (){
                console.log('只会执行一次')
            }
        }
    })

</script>

</body>
</html>

注意:

在使用 v-model 指令时对数据进行处理：

.number: 当输入框的值发生变化时，将输入值转换为数值类型。
.trim: 自动过滤用户输入的首尾空白字符。
.lazy: 默认情况下，v-model 默认在 input 事件中同步输入框的值与数据，而 .lazy 修饰符会转变为在 change 事件中同步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="app">
    <h2>输入框示例</h2>

    <!-- 使用 .number 修饰符，将输入值转换为数值类型 -->
    <label>年龄（数字）：</label>
    <input type="text" v-model.number="age">

    <!-- 使用 .trim 修饰符，自动过滤用户输入的首尾空白字符 -->
    <label>用户名（去除首尾空格）：</label>
    <input type="text" v-model.trim="username">

    <!-- 使用 .lazy 修饰符，将在 change 事件中同步输入框的值 -->
    <label>消息（延迟同步）：</label>
    <input type="text" v-model.lazy="message">
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            age: "6546",
            username: '你啊啥的爱书',
            message: '你失败了'
        }
    });
</script>

</body>
</html>