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.mzph.cn/diannao/43431.shtml

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

相关文章

GenAl如何改变 DevOps 中的软件测试?

TestComplete 是一款自动化UI测试工具&#xff0c;这款工具目前在全球范围内被广泛应用于进行桌面、移动和Web应用的自动化测试。 TestComplete 集成了一种精心设计的自动化引擎&#xff0c;可以自动记录和回放用户的操作&#xff0c;方便用户进行UI&#xff08;用户界面&…

RTK_ROS_导航(2):卫星图查看

目录 1. 基于MapViz的卫星图查看 1. 基于MapViz的卫星图查看 安装 # 源码安装 mkdir -p RTK_VISION/src cd RTK_VISION/src git clone https://github.com/swri-robotics/mapviz.git --branchmelodic-eol sudo apt-get install ros-$ROS_DISTRO-mapviz ros-$ROS_DISTRO-mapviz-…

IP-GUARD如何禁止电脑自带摄像头

IP-GUARD可以通过设备管理模块禁止USB接口&#xff0c;所以USB外置摄像头很容易就可以禁止了。 但是笔记本自带摄像头无法禁止&#xff0c;配置客户端策略如下&#xff1a; device_control_unknown_mode1 device_control_unphysical_mode3

记一次 Qt installer framework安装程序过程中 安装驱动依赖

在installscript.qs 文件中该函数添加exe 依赖程序放置位置

Python28-11 CatBoost梯度提升算法

CatBoost&#xff08;Categorical Boosting&#xff09;是由Yandex(一家俄罗斯互联网企业&#xff0c;旗下的搜索引擎曾在俄国内拥有逾60%的市场占有率&#xff0c;同时也提供其他互联网产品和服务)开发的一种基于梯度提升的机器学习算法。CatBoost特别擅长处理类别特征&#x…

什么是ThingsKit物联网平台?

在信息化时代的浪潮中&#xff0c;物联网&#xff08;IoT&#xff09;作为新一代信息技术的核心&#xff0c;已经逐渐渗透到我们生活的方方面面。而在这个大背景下&#xff0c;Thingskit物联网平台以其独特的技术优势和应用场景&#xff0c;成为了物联网领域的一颗璀璨明星。本…

3.flink架构

目录 概述 概述 Flink是一个分布式的带有状态管理的计算框架&#xff0c;为了执行流应用程序&#xff0c;可以和 Hadoop YARN 、K8s 进行整合&#xff0c;当然也可以是一个 standalone 。 官方地址&#xff1a;速递 k8s 是未来的一种趋势&#xff0c;对资源管控能力强。

Windows 控制中心在哪里打开,七种方法教会你

在 Windows 操作系统中&#xff0c;控制中心的概念可能稍有些混淆&#xff0c;因为 Windows 通常使用“控制面板”这一术语来指代用于配置系统设置和更改硬件及软件设置的中心区域。 不过&#xff0c;随着 Windows 的更新&#xff0c;微软也在逐步将一些设置迁移到“设置”应用…

关于Linux的操作作业!24道题

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

MySQL数据库基本操作-DDL和DML

1. DDL解释 DDL(Data Definition Language)&#xff0c;数据定义语言&#xff0c;该语言部分包括以下内容&#xff1a; 对数据库的常用操作对表结构的常用操作修改表结构 2. 对数据库的常用操作 功能SQL查看所有的数据库show databases&#xff1b;查看有印象的数据库show d…

16 - Python语言进阶

Python语言进阶 数据结构和算法 算法&#xff1a;解决问题的方法和步骤 评价算法的好坏&#xff1a;渐近时间复杂度和渐近空间复杂度。 渐近时间复杂度的大O标记&#xff1a; - 常量时间复杂度 - 布隆过滤器 / 哈希存储 - 对数时间复杂度 - 折半查找&#xff08;二分查找&am…

使用耳机壳UV树脂制作私模定制耳塞的价格如何呢?

使用耳机壳UV树脂制作私模定制耳塞的价格如何呢&#xff1f; 耳机壳UV树脂制作私模定制耳塞的价格因多个因素而异&#xff0c;如材料、工艺、设计、定制复杂度等。 根据我目前所了解到的信息&#xff0c;使用UV树脂制作私模定制耳塞的价格可能在数百元至数千元不等。具体价格…

LVS+Nginx高可用集群---Nginx进阶与实战

1.Nginx中解决跨域问题 两个站点的域名不一样&#xff0c;就会有一个跨域问题。 跨域问题&#xff1a;了解同源策略&#xff1a;协议&#xff0c;域名&#xff0c;端口号都相同&#xff0c;只要有一个不相同那么就是非同源。 CORS全称Cross-Origin Resource Sharing&#xff…

挑战杯 opencv python 深度学习垃圾图像分类系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; opencv python 深度学习垃圾分类系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这是一个较为新颖的竞…

昇思25天学习打卡营第13天|应用实践之ResNet50迁移学习

基本介绍 今日的应用实践的模型是计算机实践领域中十分出名的模型----ResNet模型。ResNet是一种残差网络结构&#xff0c;它通过引入“残差学习”的概念来解决随着网络深度增加时训练困难的问题&#xff0c;从而能够训练更深的网络结构。现很多网络极深的模型或多或少都受此影响…

数据链路层(超详细)

引言 数据链路层是计算机网络协议栈中的第二层&#xff0c;位于物理层之上&#xff0c;负责在相邻节点之间的可靠数据传输。数据链路层使用的信道主要有两种类型&#xff1a;点对点信道和广播信道。点对点信道是指一对一的通信方式&#xff0c;而广播信道则是一对多的通信方式…

风险评估:Tomcat的安全配置,Tomcat安全基线检查加固

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 这一章节我们需…

grafana数据展示

目录 一、安装步骤 二、如何添加喜欢的界面 三、自动添加注册客户端主机 一、安装步骤 启动成功后 可以查看端口3000是否启动 如果启动了就在浏览器输入IP地址&#xff1a;3000 账号密码默认是admin 然后点击 log in 第一次会让你修改密码 根据自定义密码然后就能登录到界面…

高职物联网实训室

一、高职物联网实训室建设背景 随着《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》的发布&#xff0c;中国正式步入加速数字化转型的新时代。在数字化浪潮中&#xff0c;物联网技术作为连接物理世界与数字世界的桥梁&#xff0c;其重要性日益凸显…