学习vue笔记（1）

最新推荐文章于 2024-09-28 22:16:01 发布
最新推荐文章于 2024-09-28 22:16:01 发布
阅读量95 收藏
点赞数 5
分类专栏： 前端 文章标签： javascript vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxxxxii/article/details/116431965
版权

事件监听

1.v-on的基本使用

首先使用v-on语法编写了一个小型的计数器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{counter}}</h2>
<!--  <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>
</html>

在这里插入图片描述
实现了点击加号，数字显示加一；点击减号，数字显示减一的效果。

2.v-on的参数问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  1.事件调用方法没有参数-->
  <button @click="btn01Click()">按钮1</button>
  <button @click="btn01Click">按钮2</button>
<!--  2.在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,这个时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
  <button @click="btn02Click">按钮2</button>
<!--  3.方法定义时，我们需要event对象，同时又需要其他参数-->
<!--  在调用方式，如何手动的获取到浏览器参数的event对象：$event-->
  <button @click="btn03Click(123,$event)">按钮3</button>
  <button>按钮4</button>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好"
    },
    methods:{
      btn01Click(){

      },
      btn02Click(event){
        console.log('------',event)
      },
      btn03Click(abc,event){
        console.log('+++++++',abc, event);
      }
    }
  })
</script>

</body>
</html>

注意点：1.事件调用方法没有参数时，括号可以省略，如下两种方式都为正确；

<button @click="btn01Click()">按钮1</button>
<button @click="btn01Click">按钮2</button>

2.方法本身需要一个参数，但是写函数时省略了小括号，这时Vue会默认将浏览器产生的event事件对象作为参数传入，就会产生如下效果，MouseEvent为event事件对象传入参数；

<button @click="btn02Click">按钮2</button>
 btn02Click(event){
        console.log('------',event)
      },

在这里插入图片描述
3.定义方法时，即需要event对象又需要其他参数时，利用手动获取浏览器参数的event对象，在event前加上$即可。

 <button @click="btn03Click(123,$event)">按钮3</button>
 btn03Click(abc,event){
        console.log('+++++++',abc, event);
      }

在这里插入图片描述

3.v-on的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  1. .stop修饰符的使用-->
  <div @click="divClick">
    <button @click.stop="btnClick">按钮</button>
  </div>
<!--  2. .prevent修饰符的使用-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
<!--  3. .监听某个键帽的点击-->
  <input type="text" @keyup.enter="keyUp">
<!--  4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好"
    },
    methods:{
      btnClick(){
        console.log('btnClick');
      },
      divClick(){
        console.log('divClick');
      },
      submitClick(){
        console.log('submitClick');
      },
      keyUp(){
        console.log('keyUp');
      },
      btn2Click(){
        console.log('btn2Click');
      }
    }
  })
</script>

</body>
</html>

注意点：1. .stop修饰符可以阻止多级对象冒泡，类似于js中点击父盒子时，子盒子显示。点击几次，显示几次数字；

<button @click.stop="btnClick">按钮</button>
 btnClick(){
        console.log('btnClick');
      },

在这里插入图片描述
2. .prevent修饰符的使用，可以阻止向服务器传递。

<form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
   submitClick(){
        console.log('submitClick');
      },

3. .keyUp监听某个键帽的点击。按下键盘任一按键时，显示按下键帽的数量

 <input type="text" @keyup="keyUp">

在这里插入图片描述
如果只想敲击回车才有keyUp显示数量时，在时间后加上.enter

<input type="text" @keyup.enter="keyUp">

4. .once修饰符的使用。点击事件使用时，使得显示的数量只为1，即只显示一次点击数量。

<button @click.once="btn2Click">按钮</button>

在这里插入图片描述

明月挽我心
关注
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
个人学习vue笔记自己整理精华
02-18
本人学习vue时候的学习笔记，以及工作共遇到的我认为需要记录的一些知识点
Vue的v-bind和v-on
qq_47443027的博客
03-11 686
一、样式绑定 　　class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 　　v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 1、class 属性绑定 　　我们可以为v-bind:class设置一个对象，从而动态的切换 class //将 isActive 设置为 true 显示 class 名为active 的样式，如果设置为 false 则不显示： ..
一款基于vue的机械键盘键帽设计工具
08-10
一款基于vue的机械键盘键帽设计工具
vue实现【简洁版软键盘】的封装以及调用
weixin_50450473的博客
02-24 5465
一、创建组件Keyboard.vue
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue 3 学习笔记
qq_46735055的博客
05-23 3257
禹神最新Vue3教程学习笔记
vue3学习笔记
qq_43276836的博客
07-02 949
自定义事件发射this.$emit("todo-added",参数);v-on监听事件触发函数读取事件参数。
vue3学习笔记（黑马）
最新发布
Z_Y_R_的博客
09-28 1674
vue3学习内容
学习笔记：尚硅谷Vue2基础篇
D_boj的博客
04-22 1279
通过B站尚硅谷学习，了解Vue2基本概述，以及基本使用。本章节主要了解选项式API以及组件化编程
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
【狂神说】Vue笔记（全部完整）.zip
01-22
在"【狂神说】Vue笔记"中，我们可以期待学习以下关键知识点： 1. **数据绑定**：Vue的数据绑定使用`v-bind`指令将数据模型与DOM元素属性关联。双向数据绑定通过`v-model`实现，使得视图和模型之间的数据实时同步。 ...
Vue笔记，Vue笔记，Vue笔记
07-18
Vue笔记主要涵盖了从基础到进阶的各种Vue知识，通过一系列的学习日程，旨在帮助开发者深入理解和熟练掌握Vue框架。 在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-...
Vue速成学习笔记
TRXCX的博客
05-24 1208
三、ElementUI。
Vue笔记
xflr_Andrew的博客
09-04 2929
前端其实是个很大的范畴。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript。Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
异步、同步以及异步的各种解决方法 最全解！
xxxxxii的博客
09-09 3873
1. 异步和同步 JavaScript是单线程语言，所谓"单线程"，就是指一次只能完成一件任务。遇到等待（网络请求、定时任务）会卡住，所以需要异步模式。 同步和异步的区别： 同步模式：后一个任务等待前一个任务结束，然后再执行，如果遇到等待会阻塞代码的执行； 异步模式： 后一个任务不等待前一个任务结束就可以执行，不会阻塞代码的执行。异步通过callback形式调用。 具体来说，异步运行机制如下： （1）所有同步任务都在主线程上排队依次执行，形成一个执行栈。 （2）主线程之外，还存在一个"任务队列"（task
腾讯云多人视频会议 TUIRoom 功能体验
xxxxxii的博客
09-21 2551
​ TUIkit 是腾讯云音视频团队在 5000+ 客户的服务积累中，结合业内主流的音视频场景，提炼出的开源解决方案，包含视频通话组件、直播组件、视频房间组件等多个客户端音视频组件，可以帮助开发者快速搭建诸如通话、客服、直播、语聊、教育等场景解决方案。​
babel的基本使用方法
xxxxxii的博客
07-04 1949
babel编译器 1.babel的功能 2.babel的使用特点 （1）babel本身可以编译ES6的大部分语法； （2）ES6 Module语法一般使用webpack来处理； （3）babel本身不能编译ES6新增的API，需要借助其他模块。 3.babel的使用方式 （1）查询babel官网的setup页面：babel官网的setuo页面； （2）一般在命令行工具（CLI）或者webpack中使用babel。 4.使用babel的流程 （1）安装node.js（携带安装npm），node.js官网：n
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值