Vue - 快速入门(一)

阅读文章可以收获:

1. 明白什么是vue

2. 如何创建一个vue实例

3. vue中的插值表达式如何使用

4. 如何安装vue的开发者工具

  • Vue 概念

什么是vue?

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

框架优点:大大提升开发效率 (70%↑)

缺点:需要理解记忆规则 

官网文档地址:

vue2:  https://v2.cn.vuejs.org/v2/guide/installation.html

vue3:  https://vuejs.org/ 

Vue 的两种使用方式:

① Vue 核心包开发

  • 场景:局部 模块改造

② Vue 核心包 & Vue 插件 工程化开发

  • 场景:整站 开发 

总结:

Vue是什么?
Vue 是一个用于 构建用户界面 的 渐进式 框架
1. 构建用户界面:基于 数据 动态 渲染 页面
2. 渐进式:循序渐进的学习
3. 框架:一套完整的项目解决方案,提升开发效率

  • 创建实例

步骤:

1. 准备容器


2. 引包 (官网) - 开发版本 / 生产版本

在线引入:

本地引入:


3. 创建 Vue 实例 new Vue()


4. 指定配置项 → 渲染数据

  • ① el 指定挂载点
  • ② data 提供数据

总结:这是一整个使用vue的流程,其实使用vue就是类似与引入js一样的,vue就是前人帮我们封装好的前端的框架,使用vue就必须遵守它指定的规则。

完整案例:

  • 插值表达式

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

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

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

语法:{{ 表达式 }}

注意点:

(1)使用的数据必须存在 (data)

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

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

 

 总结:

1. 插值表达式的作用是什么?

  • 利用表达式进行插值,将数据渲染页面中

2. 语法格式?

  • {{ 表达式 }}

3. 插值表达式的注意点:

  • ① 使用的数据要存在 (data)
  • ② 支持的是表达式,而非语句 if ... for
  • ③ 不能在标签属性里面

 

  • 响应式特性

响应式特性是vue的核心特性

  • 什么是响应式特性呢?

数据改变,视图会自动更新

响应式数据和传统的数据有很明显的区别,比如我们修改一个数组(传统数据)的内容后,需要重新自己在渲染一遍数据,然后视图才会改变,但在vue中这个数组的数据是响应式的,如果数据中的内容改变,视图会自动渲染

聚焦于数据 → 数据驱动视图 

使用 Vue 开发,关注业务的核心逻辑,根据业务修改数据即可

总结:

1. 什么是响应式呢?

  • 数据改变,视图自动更新
  • 使用 Vue 开发 → 专注于业务核心逻辑 即可

2. 如何访问或修改数据呢?

  • data中的数据, 最终会被添加到实例上
  • ① 访问数据: "实例.属性名"
  • ② 修改数据: "实例.属性名" = "

  • 开发者工具

为什么要装vue的开发中工具?

原因:为了更好的调试代码,查看页面数据

安装方式:

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

         地址:https://chrome.zzzmh.cn/index

 

使用:打开 Vue 运行的页面,调试工具中 Vue 栏,即可查看修改数据,进行调试

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

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

相关文章

第80讲订单管理功能实现

后端 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace"com.java1234.mapper.OrderM…

深入学习Pandas:数据连接、合并、加入、添加、重构函数的全面指南【第72篇—python:数据连接】

深入学习Pandas&#xff1a;数据连接、合并、加入、添加、重构函数的全面指南 Pandas是Python中最强大且广泛使用的数据处理库之一&#xff0c;提供了丰富的函数和工具&#xff0c;以便更轻松地处理和分析数据。在本文中&#xff0c;我们将深入探讨Pandas中一系列数据连接、合…

React18原理: 再聊Fiber架构下的时间分片

时间分片 react的任务可以被打断&#xff0c;其实就是基于时间分片的人眼最高能识别的帧数不超过30帧&#xff0c;电影的帧数差不多是在24浏览器的帧率一般来说是60帧&#xff0c;也就是每秒60个画面, 平均一个画面大概是16.5毫秒左右浏览器正常的工作流程是运算渲染&#xff…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之QRCode组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、QRCode组件 用于显示单个二维码的组件。 子组件 无。 接口 QRCode(value: st…

python-分享篇-GUI界面开发-PyQt5-对QListWidget列表进行数据绑定

代码 # -*- coding: utf-8 -*-# Form implementation generated from reading ui file bindlist.ui # # Created by: PyQt5 UI code generator 5.11.3 # # WARNING! All changes made in this file will be lost! 对QListWidget列表进行数据绑定from PyQt5 import QtCore, QtG…

Elasticsearch:混合搜索是 GenAI 应用的未来

在这个竞争激烈的人工智能时代&#xff0c;自动化和数据为王。 从庞大的存储库中有效地自动化搜索和检索信息的过程的能力变得至关重要。 随着技术的进步&#xff0c;信息检索方法也在不断进步&#xff0c;从而导致了各种搜索机制的发展。 随着生成式人工智能模型成为吸引力的中…

华为云ModelBox实战:体感小游戏应用实操

目录 一、VsCode插件注册ModelBox设备二、Windows SDK安装1.安装Git for Windows2.下载ModelBox SDK3.相关插件安装 三、体感小游戏应用开发1.技能模板使用2.AI应用示例3.体感小游戏体验 参与华为云活动【HCSD】ModelBox实战营邀请活动&#xff0c;呼朋唤友学AIoT&#xff0c;完…

flask+python企业产品订单管理系统938re

在设计中采用“自下而上”的思想&#xff0c;在创新型产品提前购模块实现了个人中心、个体管理、发布企业管理、投资企业管理、项目分类管理、产品项目管理、个体投资管理、企业投资管理、个体订单管理、企业订单管理、系统管理等的功能性进行操作。最终&#xff0c;对基本系统…

Java学习-常用API(二)

Math类及其常用API&#xff1a; 演示&#xff1a; StringBuilder的认识及其常用方法&#xff1a; StringBuilder支持链式编程 StringBuilder sbnew StringBuilder&#xff08;&#xff09;&#xff1b;sb.append&#xff08;12&#xff09;.append.&#xff08;“itHeima”&am…

synchronized关键字以及底层实现

目录 基本使用 底层实现 synchronized锁升级 对象的内存结构 ⅰ. 对象头 1. ① 运行时元数据 (Mark Word) (占64位) a. 哈希值 (HashCode) b. GC分代年龄 c. 锁状态标记 2. ② 类型指针: (Klass Point) (占 32位) ⅱ. 实例数据 ⅲ. 对齐填充 Moniter重量级锁 轻量…

[ai笔记3] ai春晚观后感-谈谈ai与艺术

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第3篇分享&#xff01; 今天我们不聊技术&#xff0c;只聊感受&#xff01; 1 关于ai春晚 期待许久的ai春晚&#xff0c;但是等初一晚上观看的时候&#xff0c;或多或少还是有些失望。 首先是观看人数…

前端工程化面试题 | 06.精选前端工程化高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【二叉树】构建销毁二叉树

目录 创建二叉树 整体思路 代码实现 图示理解​ 销毁二叉树 判断二叉树是否是完全二叉树&层序 整体思路 代码实现 图是理解 二叉树的性质 题目 创建二叉树 整体思路 通过前序遍历的数组"ABD##E#H##CF##G##"构建二叉树遇到#就回退&#xff0c;返回…

浅谈路由器交换结构

一、路由器技术概述 路由器&#xff08;Router&#xff09;是连接两个或多个网络的硬件设备&#xff0c;在网络间起网关的作用&#xff0c;是读取每一个数据包中的地址然后决定如何传送的专用智能性的网络设备。它能够理解不同的协议&#xff0c;例如某个局域网使用的以太网协议…

文章页的上下篇功能是否有必要?boke112百科取消上下篇功能

也不知道是从什么时候开始&#xff0c;我们很多站长的博客网站文章页都会在文末添加上“上一篇”和“下一篇”功能&#xff0c;目的是进行站内SEO优化和方便用户阅读上下篇文章。 boke112百科不管是以前使用的Three主题还是现在使用的YIA主题&#xff0c;刚开始的文章页都是有…

学习Android的第十天

目录 Android CheckBox 复选框 获得选中的 CheckBox 的值 自定义点击效果 改变文字与选择框的相对位置 修改文字与选择框的距离 Android ToggleButton 开关按钮 改变 ToggleButton 的状态和文本 Android Switch 开关 改变 Switch 的状态和文本 Android CheckBox 复选框…

腾讯云4核8G服务器可以用来干嘛?怎么收费?

腾讯云4核8G服务器适合做什么&#xff1f;搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以&#xff0c;腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM&#xff0c;轻量服务器和标准型CVM服务器性能是差不多的&#xff0c;轻…

sheng的学习笔记-docker部署springboot

部署文章目录&#xff1a;目录 docker部署&#xff0c;原理&#xff0c;命令&#xff0c;可以参考&#xff1a;docker原理图&#xff0c;部署&#xff0c;命令 目录 将springboot部署到docker中 遇到过的问题&#xff1a; pom配置 操作步骤 生成jar 构建镜像 查看镜像d…

CTFshow-WEB入门-信息搜集

web1&#xff08;查看注释1&#xff09; wp 右键查看源代码即可找到flag web2&#xff08;查看注释2&#xff09; wp 【CtrlU】快捷键查看源代码即可找到flag web3&#xff08;抓包与重发包&#xff09; wp 抓包后重新发包&#xff0c;在响应包中找到flag web4&#xff08;robo…

物联网和工业4.0

在当今这个快速发展的技术时代&#xff0c;物联网&#xff08;IoT&#xff09;和工业4.0成为了推动全球进入新工业时代的两大驱动力。对于刚入行的人来说&#xff0c;深入理解这两个概念及其背后的技术原理&#xff0c;对于把握未来的职业机会至关重要。 物联网&#xff0c;简…