Vue学习笔记

点击查看视频

一、如何使用Vue

在这里插入图片描述
1.定义vue作用域
2.创建Vue对象

二、Vue重要的属性

el:指定绑定的容器
data:数据代理绑定数据
methods:写方法
在methods里不传参数默认传event参数,this是vm(即Vue创建的对象),如果写箭头函数的时候会传windows,如果自己传参数的情况下event会丢失,需要$event才会传过去
在这里插入图片描述
在这里插入图片描述
event的作用,可以显示按钮的文案,阻止默认行为

三、常用方法(学多少写多少,不全,特别基础的略过)

1.v-on:事件名称.修饰符 例如 v-on:click=“aaa” 是绑定一个点击事件,方法aaa写在methods里,简写为@事件名.修饰符
在这里插入图片描述
默认事件:例如a标签的跳转地址
事件冒泡:弹窗确认后又弹出一次
在这里插入图片描述
2.键盘事件
@keydown:按下执行
@keyup:按下松手后执行
在这里插入图片描述
3.计算属性
在这里插入图片描述
4.监视属性(支持异步)
数据监测对比走逻辑,可以监测计算属性和data里的普通对象
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5.动态绑定class样式,摒弃dom
在这里插入图片描述
数组形式写法
在这里插入图片描述

6.动态绑定style(key: value 形式)
在这里插入图片描述
7.v-if和v-show
v-if直接删除,v-show只是不展示
v-if不可以被打断
注意:template不影响结构,但是只能配合v-if
在这里插入图片描述
在这里插入图片描述
8.v-for
在这里插入图片描述
key:唯一标识符
key的作用是虚拟dom进行diff算法的标识,key一般不要选下标,否则极容易出现问题,且影响效率(可能导致大量虚拟dom转为真实dom),一般选中数据的唯一标识(例如id)作为key
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
实现搜素功能
在这里插入图片描述
在这里插入图片描述
年龄排序案例
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/70692.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为了偶像羽生结弦学习日语,花6k报的网课,有继承资料的嘛~

先说一下是我的情况我是之前在电视上面看到羽生结弦才决定开始学日语的,是先自学的,然后报的网课过了n1。日语自学——狗都不学! 自学的时候五十音想起来就练一下,跟着音频读一下。花了蛮长时间才真的记住。还有促音也不知…

如何检查手机上的 App 是不是正版?

作者 | Aditi Bhatnagar 译者 | 苏本如,责编 | 郭芮 头图 | CSDN 下载自视觉中国 出品 | CSDN(ID:CSDNnews) 以下为译文: 仔细看看你的安卓手机上的应用程序,你如何确保它们都是正版的?也就是说…

平面图

一 平面图概念 可以看成可平面图和平面图是同构的。 二 平面图性质 平面图的所有面的次数之和等于边数的两倍。 三 图的嵌入性问题 暂略

某小区6层住宅楼施工组织设计(图纸,横道图和施工总平面图,论文,工程量计算)

**市某小区住宅楼技术标编制 摘 要 随着建筑行业的发展,建筑设计的优劣将直接受其影响。在严格按照业主要求的条件下,结合现目前的建筑发展趋势,设计主体主要采用中、小户型灵活利用相结合的形式,达到合理、灵活的布置空间&…

【建筑类】1000套住宅户型CAD图纸

【建筑类】1000套住宅户型CAD图纸 资源文件为压缩包形式,没有套路,无需解压密码。 文件夹架构 图纸格式为DWG格式,用CAD软件打开 CAD打开的平面图 二室二厅76平米12平面图 资源链接 好资源分享来之不易,给有需要的人获取带来…

3381.54平米六层砖混住宅楼施工组织设计及施工图预算(建筑、结构图、平面图、进度表)

XX城一期1#施工组织设计及施工图预算 摘 要 本毕业设计完成了施工图预算和施工组织设计两大部分。 施工图预算包含工程量计算和套价两部分。工程量计算包括建筑工程部分和装饰装修部分。建筑工程部分包括土石方工程、砌筑工程、钢筋混凝土工程、木结构工程、屋面及防水工程、…

平面图的基本概念及性质

平面图的基本概念及性质 前言: 内容来源这篇博客 原文链接 为了免去跳转麻烦,直接复制博客内容过来。 基本概念 平面图:设无向图G,若能将G画在一个平面上,使得任何两条边仅在顶点处相交,则称G是具有平面…

Tableau6——地图绘制

文章目录 一,填充地图二,多维地图三,混合地图 一,填充地图 要求:各省市售电量地图 首先,转换地理角色,将省市右键单击——》地理角色——》州/省/市/自治区 第二,双击省份&#xff…

实例010 猴子吃桃

猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,有多吃了一个,第二天早上有将第一天剩下的桃子吃了一半,又多吃了一个,以后每天早上都吃前一天的一半零一个,到第十天…

翠香猕猴桃 和 薄皮核桃,快来下单

猴桃品种有很多,但不是所有的果子都叫翠香。椭圆形,果喙端较尖,黄褐色硬短茸毛;果肉翠绿色,质细多汁,香甜爽口,有芳香味,白色果心。这就是“翠香”,是集酸甜香于一身的猕…

monkey真是个好东西,强烈推荐

目录 Monkey简介测试原理命令常用命令 测试结果分析 事情的起因是一个不怎么维护的APP从小米市场下架了,原因是APP存在几个崩溃问题,对方把测试结果报告、录屏信息发了过来。我们看了一下,发现是一个很老的版本,至于为什么没有把新…

7-9 猴子吃桃

猴子第一天摘下若干个桃子,当即吃了2/3,还不过瘾,又多吃了一个,第二天早上又将剩下的桃子吃掉2/3,又多吃了一个。以后每天早上都吃了前一天剩下的2/3再多一个。到第n天早上想再吃时,发现只剩下k个桃子了。求…

红心猕猴桃文案:水果红心猕猴桃文案大全,水果红心猕猴桃文案短句

精选专业水果文案,持续更新整理,朋友圈发圈营销必备文案,让写文案不再费力。文案圈子已积累更新6000多条,汇总编辑300多类的水果,非常全面实用。 1、朋友圈文案哪里能看到 需要文案的话,可以在朋友圈下搜一…

Android支付宝接入及使用

登入支付宝开放平台,进入开发者中心控制台,选择网页&移动应用 AS快速集成支付 下载支付宝的Demo和SDK将SDK文件夹中的arr文件复制黏贴到工程目录的libs文件夹下在整个工程的build.gradle文件中添加如下代码 allprojects {repositories {// 添加下…

Android应用接入支付宝支付详细教程

第一步:访问支付宝开放平台,进入管理中心 支付宝开放平台 (alipay.com)https://open.alipay.com/ 第二步: 创建应用 客户端应用信息如何配置(Android端) - 支付宝文档中心 (alipay.com)https://opendocs.alipay.com/su…

手机APP使用支付宝支付(服务端)

最近本人刚做了手机APP支付宝支付功能,主要分为六步,在这里主要记录代码部分。 第一步:创建应用并获取APPID 要在您的应用中接入支付宝App支付能力,需要通过创建应用的方式接入蚂蚁相关接口并进行开发,基于对行业及业…

微信中使用支付宝进行支付

微信中使用支付宝不能直接使用,由于微信内置浏览器的原因,在微信中使用支付宝时无法跳转出去,支付宝官网给出了实例文档 支付宝官网地址 下载后 将其例子融入到vue中使用 步骤: 第一步:将ap.js放在vue项目中 第二步&a…

php 使用 yansongda/pay 进行微信,支付宝支付

最近项目使用yansongda/pay 进行微信与支付宝开发,整理一下自己开发中遇到的问题 yansongda/pay composer 扩展地址 https://packagist.org/packages/yansongda/pay // 使用composer update 更新下载yansongda包扩展 复制 文档中 支付宝支付,微信支…

pc接入支付宝支付功能

1. 后端调用支付宝api 2.前端拿到后端返回的url 3.前端在页面使用iframe嵌入请求支付宝 代码例: // 后端返回的链接, 放入iframe的src中。这里使用官方提供的链接 const alipayUrl "https://openapi.alipay.com/gateway.do?timestamp2013-01-01 08:08:0…

Android接入支付宝实现支付功能

Android接入支付宝实现支付功能 我本来是想直接讲Android支付这一块的,包括支付宝,微信,其他第三方整合支付等,但是微信开放平台他对我的账号做了限制,所有我今天就先把重心放在支付宝的支付上,也算是写得…