vue学习day01-vue的概念、创建Vue实例、插值表达式、响应式、安装Vue开发者工具

1、vue的概念

Vue是一个用于构建用户界面渐进式 框架

(1)构建用户界面:基于数据动态渲染页面

(2)渐进式:循序渐进的学习

(3)框架:一条完整的项目解决方案,提升开发效率

2、创建Vue实例,初始化渲染

(1)大致步骤

1)准备容器(Vue所管理的范围)
2)引包(开发版本的包/生产版本包)
3)创建实例
4)添加配置项=>完成渲染

(2)详细步骤

1)准备容器

2)如何引包
①找官网(v2.cn.vuejs.org)

②点“起步”,跳转到以下页面

③点“安装”,找到“直接用<script>引入”,下载“开发版本”,或者直接引入开发版本的在线包

(开发版本会有更多提示)

④引入

3)创建实例

4)添加配置项

5)渲染

利用插值表达式

结果:

3、插值表达式

插值表达式是一种Vue模版语法

(1)表达式

是可以被求值的代码,JS引擎会将其计算出一个结果

(2)作用

利用表达式进行插值,渲染到页面中

(3)语法{{表达式}}

(4)注意点

1)使用数据必须存在(data已经提供)

2)支持表达式,而非语句,比如:if,for

3)不能在标签属性中使用{{}}插值

4、响应式

(1)响应式概念

数据改变,视图更新

(使用Vue开发->专注于业务核心逻辑即可)

(2)如何访问或修改数据

data中的数据最终会被添加到实例上(可以理解为data中提供的数据会被添加到el选择的选择器上)

  • 访问数据:“实例.属性名”
  • 修改数据:“实例.属性名=值”

(3)示例:

在原先代码data里提供一个count数据,值为100,在容器里渲染

在控制台访问

执行加一操作后(加一操作如果是app.count++,在控制台显示加加之前的值,在页面显示加后的结果)

5、安装Vue开发者工具

(1)安装方式

1)通过谷歌应用商店安装(国外网站)
2)极简插件:下载->开发者模式->拖拽安装->插件详情允许访问文件

(2)安装详细步骤(极简插件方式)

1)通过(https://chrome.zzzmh.cn/index)访问,有可能会出现访问失败的情况,通过浏览器搜索即可

2)通过搜索找到Vue Devtools,点击推荐下载

3)下载完成后,打开当前文件,进行解压

(crx后缀的文件是要安装的文件)

4)解压后找到浏览器的扩展部分,一部分是点击“.…”,点击“更多工具”或者点击“三”,直接点击扩展程序,将刚刚解压的文件拖拽,加入到“扩展程序”即可
5)让插件允许访问文件地址,在“插件详情”中将“允许访问文件网址”打开即可
6)重启浏览器,右键,点击“检查”,找到工具

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

回溯算法-以医院信息管理系统为例

1.回溯算法介绍 1.来源 回溯算法也叫试探法&#xff0c;它是一种系统地搜索问题的解的方法。 用回溯算法解决问题的一般步骤&#xff1a; 1、 针对所给问题&#xff0c;定义问题的解空间&#xff0c;它至少包含问题的一个&#xff08;最优&#xff09;解。 2 、确定易于搜…

Redis代替Session实现共享

集群的session共享问题 session共享问题&#xff1a;多台tomcat并不共享session存储空间&#xff0c;当请求切换到不同的tomcat服务时导致数据丢失的问题。 session的替代方案&#xff1a; 数据共享内存存储key、value结构 将redis替换session可以解决session共享问题

一文学会 BootStrap

文章目录 认识BootStrap历史优缺点使用注意安装CDN源码引入包管理器 媒体查询屏幕尺寸的分割点&#xff08;Breakpoints&#xff09;响应式容器网格系统基本使用底层实现.container.row.col、.col-份数 网格嵌套自动布局列 Auto-layout响应式类 Responsive Class 响应式工具类-…

在 PostgreSQL 里如何处理数据的版本跟踪和回滚?

文章目录 一、事务二、保存点三、使用版本控制扩展四、审计表和触发器五、使用时间戳列六、比较和还原数据七、考虑数据备份和恢复八、结论 在数据库管理中&#xff0c;数据的版本跟踪和回滚是非常重要的功能&#xff0c;有助于在数据操作出现错误或需要回滚到特定状态时进行有…

dbeaver连接postgresql报错��������: �û� “root“ Password ��֤ʧ��

文章目录 问题描述解决办法 问题描述 新安装完成的postgresql通过dbeaver连接访问报错&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;: &#xfffd;&#xfffd; “root” Password &#xfffd;&#xfffd;֤ʧ&#…

纷享销客荣获CDIE“2024优秀数字化技术服务商”

近日&#xff0c;在第十届数字化创新博览会&#xff08;CDIE 2024&#xff09;上&#xff0c;CRM品牌领导者纷享销客凭借其卓越的技术实力和创新的解决方案&#xff0c;荣获“2024 优秀数字化技术服务商”奖项。 作为国内领先的CRM数字化解决方案服务商&#xff0c;纷享销客一直…

如何构建数据驱动的企业?爬虫管理平台是关键桥梁吗?

一、数据驱动时代&#xff1a;为何选择爬虫管理平台&#xff1f; 在信息爆炸的今天&#xff0c;数据驱动已成为企业发展的核心战略之一。爬虫管理平台&#xff0c;作为数据采集的第一站&#xff0c;它的重要性不言而喻。这类平台通过自动化手段&#xff0c;从互联网的各个角落…

static的理论学习

在说到static之前&#xff0c;需要先明确变量类型&#xff1a; 而在聊到变量类型之前我们可以将变量的两个属性好好学一学 变量的两个属性 作用域&#xff08;scope&#xff09;&#xff1a; 从内存的角度来看&#xff0c;就是变量存放在栈&#xff08;stack&#xff09;中&…

Open3D SVD算法实现对应点集配准

目录 一、概述 1.1基本思想 1.2实现步骤 二、代码实现 三、实现效果 3.1原始点云 3.2配准后点云 3.3变换矩阵 一、概述 在点云配准中,SVD(Singular Value Decomposition,奇异值分解)方法是一种常用的精确计算旋转和平移变换的算法。其目标是找到一个刚体变…

解答|企业网站为什么首选OV SSL证书

在数字化转型日益加速的今天&#xff0c;企业网站不仅承载着品牌形象展示、产品服务介绍、客户互动沟通等多重功能&#xff0c;更是企业与客户建立信任桥梁的关键所在。然而&#xff0c;在网络空间中&#xff0c;数据安全与隐私保护成为不容忽视的核心议题。SSL证书作为加密通信…

在 PostgreSQL 里如何实现数据的自动清理和过期处理?

文章目录 一、使用 TIMESTAMP 列和定期任务二、使用事件触发器&#xff08;Event Triggers&#xff09;三、使用分区表&#xff08;Partitioned Tables&#xff09;四、结合存储过程和定时任务示例场景实现步骤测试与验证 在 PostgreSQL 中&#xff0c;可以通过多种方式实现数据…

Spring系统学习 - AOP之基于注解的AOP和XML的AOP

上一篇我们围绕了AOP中代理模式的使用&#xff0c;这篇我们将主要围绕AOP的相关术语介绍&#xff0c;以及重点围绕基于注解的AOP进行相关知识的概述和使用说明。 AOP的相关术语 切面&#xff08;Aspect&#xff09;&#xff1a;切面是一个模块化的横切关注点&#xff0c;它包含…

mybatis-plus参数绑定异常

前言 最近要搞个发票保存的需求&#xff0c;当发票数据有id时说明是发票已经保存只需更新发票数据即可&#xff0c;没有id时说明没有发票数据需要新增发票&#xff1b;于是将原有的发票提交接口改造了下&#xff0c;将调用mybatis-plus的save方法改为saveOrUpdate方法&#xff…

C++:多态(继承)

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;多态》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 :maple_leaf:多态的概念:maple_leaf:继承中的多态1.:leaves:虚函数表 :…

更亮更好听的户外耳机,下班之后畅快运动,哈氪聆光体验

在当今市场上&#xff0c;蓝牙耳机种类繁多&#xff0c;现在正值酷热的夏季&#xff0c;有必要准备一副适合户外活动的蓝牙耳机&#xff0c;对此&#xff0c;我觉得气传导耳机更适合在户外锻炼或散步时使用。这种耳机设计通常为后挂式&#xff0c;不仅佩戴舒适&#xff0c;而且…

宝塔面板运行Admin.net框架

准备 宝塔安装 .netcore安装 Admin.net框架发布 宝塔面板设置 完结撒花 1.准备 服务器/虚拟机一台 系统Windows server / Ubuntu20.04&#xff08;本贴使用的是Ubuntu20.04版本系统&#xff09; Admin.net开发框架 先安装好服务器系统&#xff0c;这里就不做安装过程描述了&…

安装nodejs | npm报错

nodejs安装步骤: 官网&#xff1a;https://nodejs.org/en/ 在官网下载nodejs: 双击下载下来的msi安装包&#xff0c;一直点next&#xff0c;我选的安装目录是默认的: 测试是否安装成功&#xff1a; 输入cmd打开命令提示符&#xff0c;输入node -v可以看到版本&#xff0c;说…

“郑商企航”暑期社会实践赴美丽美艳直播基地开展调研

马常旭文化传媒网讯&#xff08;记者张明辉报道&#xff09;导读&#xff1a;2024 年 7 月 3 日&#xff0c;商学院暑期社会实践团“郑商企航”在河南省郑州市新密市岳村镇美丽美艳直播基地&#xff0c;展开了一场意义非凡的考察活动&#xff0c;团队成员深度调研了直播基地的产…

DMA方式的知识点笔记

苏泽 “弃工从研”的路上很孤独&#xff0c;于是我记下了些许笔记相伴&#xff0c;希望能够帮助到大家 目录 1. DMA基本概念 2. DMA传送过程 易错点 DMA控制器操作流程 3. DMA传送方式 这是单总线的结果 &#xff08;CPU说了算 所以不会产生于CPU的冲突&#xff09; 这…

idea创建dynamic web project

由于网课老师用的是eclipse,所以又得自己找教程了…… 解决方案&#xff1a; https://blog.csdn.net/Awt_FuDongLai/article/details/115523552