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

纯电车的OBD接口

尽管传统汽车的OBD接口主要用于监控和报告排放数据&#xff0c;但纯电动车辆作为零排放的交通工具&#xff0c;其设计初衷与需求截然不同。因此&#xff0c;从法律条文和车管所的规定来看&#xff0c;纯电动车辆是否仍需配置OBD接口这一问题&#xff0c;确实值得探讨。理论上&a…

ABAP中ARFC_GET_TID函数详细的使用方法

在ABAP中&#xff0c;ARFC_GET_TID 函数模块用于以十六进制形式返回终端的IP地址。这个功能在需要获取当前会话或终端的网络地址信息时非常有用&#xff0c;比如在日志记录、安全审计或网络诊断等场景中。 详细使用方法 调用函数模块 ARFC_GET_TID 函数的调用通常很直接&…

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

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

Spring @Value获取数组、集合、map等不同结构方法

Spring 架构中&#xff0c;可以使用Value注解从配置文件或命令行参数中获取集合数据。 各种示例 获取基础类型 当没有配置时&#xff0c;可以设置默认值。无默认值时会抛出空值异常。 Value("${lizz.timeout:3000}")private int timeout;Value("${lizz.key:…

Python28-11 CatBoost梯度提升算法

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

什么是ThingsKit物联网平台?

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

AI和人工智能是啥关系?

AI&#xff08;人工智能&#xff09;与通用人工智能&#xff08;AGI&#xff09;是人工智能领域中的两个重要概念&#xff0c;它们在定义、技术基础以及应用领域等方面有所区别。人工智能&#xff08;AI&#xff09;&#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;欢迎大家关注&&收藏&&…

js如何要让一个对象继承另一个对象的原型属性和方法

js如何要让一个对象继承另一个对象的原型属性和方法 1、使用 Object.create() const parent {greet: function() {console.log("Hello from parent!");} };const child Object.create(parent); child.greet(); // 输出: Hello from parent!2、使用 proto 属性 …

【算法】贪婪算法介绍及实现方法

贪婪算法简介 贪婪算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。贪婪算法通常用于解决优化问题&#xff0c;如最小化成本、最大…

Tomcat打破双亲委派模型的方式

文章目录 1、前言2、标准的双亲委派模型3、Tomcat的类加载器架构4、Tomcat打破双亲委派模型的方式5、总结 1、前言 双亲委派模型是一种类加载机制&#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…

关于TCP的三次握手流程

三次握手流程 第一次握手&#xff1a;客户端向服务端发起建立连接请求&#xff0c;客户端会随机生成一个起始序列号x&#xff0c;客户端向服务端发送的字段包含标志位SYN1&#xff0c;序列号segx。第一次握手后客户端的状态为SYN-SENT。此时服务端的状态为LISTEN 第二次握手&…

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

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