04-ES6语法、事件监听和条件判断

最新推荐文章于 2023-02-24 18:12:25 发布
原创 最新推荐文章于 2023-02-24 18:12:25 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了ES6中的let与const关键字，它们带来的块级作用域特性，以及在变量管理和事件处理中的应用，包括v-if/v-else-if/v-else在条件渲染中的使用和Vue中的事件绑定技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、ES6语法

var和let

在ES6之前，我们不管是变量还是常量都使用var来定义，这种设计很不合理，存在很大的缺陷，因为它没有块级作用域的概念，什么是块级作用域呢？就是一个变量它可以作用的范围，没有块级作用域会产生什么后果呢？我们来看下面的代码：

<body>
  <button>点击</button>
  <button>点击</button>
  <button>点击</button>
  <button>点击</button>
  <button>点击</button>
  <script>
    if (true){
      var a=10;
    }
    console.log(a);//10  变量定义在if里面，可是外面依旧可以访问

    var btns=document.getElementsByTagName("button");
    for (var i=0;i<btns.length;i++){
      btns[i].addEventListener("click",function () {
        console.log("第"+i+"个按钮被点击");//不管点击哪一个都是“第5个按钮被点击”
      })
    }
  </script>
</body>

从上面可以看到，我们在if块内定义的变量a在块外部依旧可以被访问到；还有for循环给按钮添加点击事件，不管点击哪一个按钮，都是输出“第5个按钮被点击”，这显然不是我们所希望的。那么这是为什么呢？因为没有块级作用域的话，使用var定义的变量将可以在任何地方使用，没有范围限制，从你定义它开始，你就可以在任何地方对它进行修改，也就是说，在上面的for循环中，我们每一次进行的i++操作，其实都是在对同一个i变量操作，当我们触发点击事件时，输出的i也是同一个。那么我们现在进行修改，将var变为let

var btns=document.getElementsByTagName("button");
    for (let i=0;i<btns.length;i++){
      btns[i].addEventListener("click",function () {
        console.log("第"+i+"个按钮被点击");//不管点击哪一个都是“第5个按钮被点击”
      })
    }

输出结果：

第0个按钮被点击

第1个按钮被点击

第2个按钮被点击

第3个按钮被点击

第4个按钮被点击

let是我们的ES6的语法，用于定义变量，并且它是有块级作用域的，所以不会发生那样的状况。

const

当我们希望所修饰的标识符无法被再次进行赋值的时候，我们可以使用const。

  <script>
    const a='aa';
    //a='bb';  无法对const修饰的标识符再次赋值

   // const b; 必须给const修饰的标识符赋值

    //const指向的对象不能修改，但是对象的属性是可以修改的
    const obj={
      name: 'zs',
      age: 23
    }
    obj.name='ls';
    obj.age=23;
  </script>

字面量增强写法

  <script>
    const name='zs';
    const age=23;
    //ES5写法
    const obj={
      name: name,
      age: age
    }
    console.log(obj);
    //ES6写法
    const obj2={
      name,
      age
    }
    console.log(obj2);
  </script>

在这里插入图片描述

函数增强写法

<script>
    //ES5写法
    const obj={
      eat: function () {
        console.log("obj吃饭");
      }
    }
    //ES6写法
    const obj2={
      eat(){
        console.log("obj2吃饭");
      }
    }

    obj.eat();
    obj2.eat();
  </script>

在这里插入图片描述

10、事件监听

我们知道，现在的网站开发经常需要处理和用户的交互，比如用户点击、拖拽或者键盘敲入等，我们需要去监听这些事件，并作出反应，在vue中，我们通过

v-on指令来监听事件。

v-on的基本使用

<body>
  <div id="app">
    {{counter}}
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
<!--    <button v-on:click="increment">+</button>-->
<!--    <button v-on:click="decrement">-</button>-->
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        counter: 0
      },
      methods: {
        //函数增强写法
        increment() {
          this.counter++;
        },
        decrement() {
          this.counter--;
        }
      }
    })
  </script>
</body>

v-on的参数问题

有的时候，我们希望在触发事件时传递一些参数给调用的方法。

<body>
  <div id="app">
    <!--方法没有参数，调用时可以省略括号-->
    <button @click="btn1Click">按钮1</button>
    <!--如果方法需要一个参数：
      1、不传入参数的话，不会报错，形参为undefined
      2、如果省略小括号的话，那么默认会将浏览器
      生成的event事件对象作为参数传入
    -->
<!--    <button @Click="btn2Click(123)">按钮2</button>-->
<!--    <button @Click="btn2Click()">按钮2</button>-->
    <button @Click="btn2Click">按钮2</button>

    <!--如果方法需要一个参数，同时也需要event事件对象:
      1、如果省略小括号，会将浏览器生成的event事件对象传给第一个参数
      2、如果想传入字符串，不能省略引号，因为会被vue实例当作变量处理
      3、如果想将event事件对象传入的话，不能直接使用`event`，需要使用`$event`
    -->
<!--    <button @click="btn3Click">按钮3</button>-->
<!--    <button @click="btn3Click(123,'abc')">按钮3</button>-->
    <button @click="btn3Click(123,$event)">按钮3</button>
    <button>按钮4</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      methods: {
        btn1Click() {
          console.log("btn1Click");
        },
        btn2Click(aa) {
          console.log("----------",aa);
        },
        btn3Click(aa,event){
          console.log(aa);
          console.log(event);
        }
      }
    })
  </script>
</body>

v-on的修饰符问题

<body>
  <div id="app">
    <!--
        stop修饰符的使用
        事件冒泡：当我们的元素接收到事件的
      时候，会将它所接收到的事件传给它的父元素。
        在下面的示例中，如果我们点击按钮，两个方法都会被调用，
      如果想阻止事件冒泡，可以加上stop修饰符
    -->
    <div @click="divClick">
      aaa
<!--      <button @click="btnClick">按钮</button>-->
      <button @click.stop="btnClick">按钮</button>
    </div>

    <!--prevent修饰符的使用-->
    <!--
      我们知道，html中有一些默认事件，
      比如当我们点击form元素内的submit
      它就会自动提交到服务器，如果我们
      不希望它自动提交，而是调用我们自定义的
      方法的话，可以使用prevent修饰符
    -->
    <form>
      <input type="submit" @click.prevent="subClick" value="提交"/>
    </form>

    <!--
      监听键盘的敲入
      @keyup监听按键抬起，@keydown监听按下
      如果希望监听某个键，比如`enter`
    -->
<!--    <input type="text" @keyup="keyUp"/>-->
    <input type="text" @keyup.enter="keyUp"/>

    <!--
      once修饰符的使用
      如果希望点击事件只触发一次的话
      可以使用once修饰符
    -->
    <button @click.once="onceClick">点我</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      methods: {
        divClick() {
          console.log("divClick");
        },
        btnClick() {
          console.log("btnClick");
        },
        subClick() {
          console.log("subClick");
        },
        keyUp() {
          console.log("keyUp");
        },
        onceClick() {
          console.log("onceClick");
        }
      }
    })
  </script>
</body>

11、条件判断

v-if、v-else-if和v-else的使用

通过判断表达式是否为true来决定是否渲染元素

<body>
  <div id="app">
    <h2 v-if="score>=80">优秀</h2>
    <h2 v-else-if="score>=70">良好</h2>
    <h2 v-else="score>=60">及格</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        score: 86
      }
    })
  </script>
</body>

切换登录小案例

案例：点击按钮，在账户登录和邮箱登录之间来回切换

<body>
  <div id="app">
    <span v-if="flag">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号"/>
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱"/>
    </span>
    <button @click="change">切换类型</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        flag: true
      },
      methods: {
        change() {
          this.flag=!this.flag;
        }
      }
    })
  </script>
</body>

注：上面的小案例会有一点小问题，就是当我们使用账户登录时输入文本，点击切换到邮箱登录依旧会保留输入的文本。

原因：Vue在渲染DOM的时候，出于性能考虑，会尽可能的复用已存在的元素，而不是创建新的元素，在上面的案例中，会被复用，所以保留了之前输入的文本，如果我们不希望被复用的话，可以给两个加上不同的key，vue在渲染DOM的时候，会判断两个元素的key是否一致，如果不一致则不会进行复用。

<input type="text" id="username" placeholder="用户账号" key="username"/>
 <input type="text" id="email" placeholder="用户邮箱" key="email"/>

v-show是一个指令，和v-if类似，通过表达式的值来决定是否显示某个元素。

<body>
  <div id="app">
    <h2 v-if="isShow" id="aaa">{{message}}</h2>
    <h2 v-show="isShow" id="bbb">{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "哈哈",
        isShow: true
      }
    })
  </script>
</body>

在这里插入图片描述

当我们通过控制台将isShow的值设为false时，使用v-if的元素直接从DOM中剔除了，而v-show的元素只是将display设为none

下一篇Vue的循环遍历

吉吉冕下
关注
第 43 题：如何使用 ES5、ES6 实现监听对象属性的改变？
qq_21774317的博客
09-08 651
利用 ES5 的 Object.defineProperty 实现 let student = {}; let age = undefined; Object.defineProperty(student, 'age', { get: function() { // 获取该属性时触发 return age; }, set: function(val) { // 设置该属性值时触发 age = val;
Web API(ES6新增JS语法、获取元素修改属性、监听事件）
m0_59592734的博客
04-29 1518
内部Javascript：直接写在html文件离script标签写在</body>里面 外部JavaScript：代码写在以.js结尾的文件里 语法：通过script标签，引入到html页面中。 内联式Javascript：代码写在标签内部 let 变量名（let不允许多次声明一个变量！！） let和var的区别： var声明： 可以先使用再声明（不合理） var声明的变量可以重复声明（不合理） 变量提升、全局变量、没有块级作用域等 通过单引号（''）、双引号（""）或反引号
JavaScript（ES6）逻辑判断条件优化
极客神殿
01-05 7501
javascript-判断(if…else…)优化 1、使用Array.includes function test(fruit){ if(fruit == 'apple' || fruit == 'watermelon') { console.log('red') } } 从上面的例子看，在判断的条件较少的时候，这种写法是没什么问题的，但是如果我们需要判断更多...
es6 添加事件监听
weixin_30471065的博客
05-31 893
//定义被侦听的目标对象 var engineer = { name: 'Joe Sixpack', salary: 50 }; //定义处理程序 var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to', va...
Vue学习----第二天_ES6补充、事件监听【5.31】
weixin_43848802的博客
05-31 408
一、ES6补充 1.let/var 2.const的使用 修饰常量 注意一：一旦给const修饰的标识符被赋值之后，不能修改 const a = 'abc' a = 'cde' 注意二：在使用const定义标识符，必须先赋值 const name; 注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性 const obj = { name: 'why', age: 30, height: 1.88 } con
ES6：Reflect
weixin_34392906的博客
02-15 199
Reflect 概述。 Relflect对象与Proxy对象一样，也是ES6为了操作对象而提供的新的API。Reflect对象的设计目的有几个。（1）将Object对象的一些明显属于语言内部的方法(比如Obejcet.defineProperty)，放到Reflect对象上。现阶段，某些方法同时在Object喝Reflect对象上部署，未...
flux-react-es6-webpack:使用 ES6 的 Flux 和 React
06-23
总结，"flux-react-es6-webpack" 项目结合了 Flux 数据流管理、React 组件化视图、ES6 的现代化语法和 Webpack 的模块打包能力，为构建高效、可维护的前端应用提供了一套强大的基础框架。通过熟练掌握这些技术，...
Modern-Image-Gallery-Using-ES6-VANILLA-JS
05-25
**现代图像库构建：使用...这个项目不仅提供了实践ES6语法的机会，也强调了使用原生API进行高效、轻量级的Web开发。通过深入理解这些知识点，开发者可以提升自己的JavaScript技能，并能够创建更高效、更灵活的Web应用。
gulp-es6：用于Javascript ES6编译的Gulpfile设置，以及SCSS，图像和字体处理
02-03
1. **ES6编译**：由于浏览器目前对ES6语法的支持程度不一，`gulp-es6`使用了Babel这样的转译工具，将ES6（ECMAScript 2015）代码转换为广泛兼容的ES5代码，以便在更多环境中运行。这包括模块导入（`import`和`export...
react-webpack-es6-example:只是弄乱了 react、webpack 和 es6
06-22
在IT行业中，React、Webpack和ES6是现代前端开发中的三大关键组件，它们共同构建了高效、可维护的Web应用程序。这个"react-webpack-es6-example"项目是一个实践性的示例，旨在展示如何将这些技术有效地整合在一起。...
React-ES6:ReactJS ES6 样板
06-11
React-ES6是React JavaScript库的一个实践模板，它利用了ES6（ECMAScript 2015）的现代语法特性，为开发React应用提供了一种简洁、高效的方法。这个项目旨在帮助开发者快速搭建React应用的环境，并且通过`npm ...
js集合es6判断条件使用技巧技巧
weixin_30793643的博客
01-29 323
1. 多重判断中使用Array.includes // condition function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 如果添加更多的红色的水果，比如cherry和cranberries，那会怎样呢？你会使...
使用es6的proxy的实现数据监听
weixin_41277748的博客
03-21 1685
Proxy 代理：提供了修改底层实现的方式 //代理一个目标对象 //target：目标对象 //handler：是一个普通对象，其中可以重写底层实现 //返回一个代理对象 new Proxy(target, handler) 例子 const obj = { a: 1, b: 2 } const proxy = new Proxy(obj, { set(target, propertyKey, value) { // console.log(target
js (ES6) 二维数组监听内部属性，满足条件返回布尔值
weixin_41555038的博客
02-24 486
监听二维数组内部属性，二维数组为列表数据，若有item满足条件则返回true。遍历二维数组结果，都为true则一位数组结果为true,反之亦然！拓展：若要使数组内部所有监听属性都满足条件将。遍历数组只要有满足条件的属性值则返回。遍历数组数组内容都满足条件返回。
键盘监听事件
douyunqian668的博客
10-13 449
onkeydown：摁下 onkeyup监听键盘事件，松开
Shell入门知识6——运算符、条件判断
lihaoen666的博客
05-03 563
运算符 基本语法 1）$((运算式)) 或 $[运算式] 2）expr m + n 3）expr m - n 4）expr \* ,/, % 乘、除、取余 实例 1.计算（2+3）X4的值 #第一种方式$(()) RES1=$((2+3)*4) echo "结果1=$RES1" #第二种方式$[] RES2=$[(2+3)*4] echo "结果2=$RE...
es6对象字面量增强写法和vue事件监听
qq_34412985的博客
02-15 193
es6中会将对象中变量作为key，将值作为value。es6的语法糖 es6中函数增强写法，去掉function关键字 事件监听： v-on参数 v-on修饰符 v-for遍历数组 v-for遍历对象 遍历时候key属性： ...
JS监听对象属性＜ES5和ES6详解＞
mkbird的博客
05-06 2013
文章目录JS监听对象属性Object.defineProperty()ProxyObject.defineProperty与Proxy区别ES5中，通过defineProperty()的set进行监听ES6中，通过Proxy实现 JS监听对象属性 在这之前，先了解以下稍后要用到的知识 Object.defineProperty() // Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象 Object.defineProperty
javascript 监听事件
Phil_Young的博客
05-19 1004
今天接触了事件监听，下午写出来了，洗澡的时候回想了好久居然又不甚明白。下面梳理下： 先来个简单版的，严格来说不算是监听，但是方便理解。 const Listener = { constructor { this.listeners = [ ]; //这是储存监听事件的容器； } subscribe ( functionName ) { this.listeners.p
cesium-popup-es6 文档
07-18
cesium-popup-es6是一个基于ES6语法编写的Cesium.js的弹窗组件，用于在Cesium地图上显示自定义的弹窗内容。 这个组件主要包含了以下几个部分： 1. Popup类：这是弹窗的主要类，负责创建和管理弹窗的各种属性和方法...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值