当前位置: 首页 > news >正文

【Vue2】Vue的介绍与Vue的第一个实例

文章目录

  • 前言
  • 一、为什么要学习Vue
  • 二、什么是Vue
      • 1.什么是构建用户界面
      • 2.什么是渐进式
        • Vue的两种开发方式:
      • 3.什么是框架
  • 三、创建Vue实例
  • 四、插值表达式 {{}}
      • 1.作用:利用表达式进行插值,渲染到页面中
      • 2.语法
      • 3.错误用法
    • 五、响应式特性
      • 1.什么是响应式?
      • 2.如何访问 和 修改 data中的数据
  • 总结


前言

Vue.js,是一个流行且灵活的前端 JavaScript 框架,以其简洁的语法和高效的性能而备受开发者青睐。作为一款渐进式框架,Vue 不仅易于上手,而且能够应对各种规模的应用程序开发需求。本文将介绍 Vue.js 的基本概念和优势,并通过一个简单的示例来演示如何构建 Vue 的第一个实例。


一、为什么要学习Vue

1.前端必备技能

2.岗位多,绝大互联网公司都在使用Vue

3.提高开发效率

4.高薪必备技能(Vue2+Vue3)

二、什么是Vue

概念:Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架

Vue2官网:https://v2.cn.vuejs.org/

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面
在这里插入图片描述
在这里插入图片描述

2.什么是渐进式

所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点

Vue的两种开发方式:
  1. Vue核心包开发

    场景:局部模块改造

  2. Vue核心包&Vue插件&工程化

    场景:整站开发

3.什么是框架

所谓框架:就是一套完整的解决方案

举个栗子

如果把一个完整的项目比喻为一个装修好的房子,那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上,增加功能代码即可。

提到框架,不得不提一下库。

  • 库,类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等
  • 框架,是一套完整的解决方案,实现了大部分功能,我们只需要按照一定的规则去编码即可。

下图是 库 和 框架的对比。

在这里插入图片描述

框架的特点:有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则 官网

三、创建Vue实例

我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面,那应该怎么做呢?

比如就上面这个数据,基于提供好的msg 怎么渲染后右侧可展示的数据呢?

核心步骤(4步):

  1. 准备容器
  2. 引包(官网) — 开发版本/生产版本
  3. 创建Vue实例 new Vue()
  4. 指定配置项,渲染数据
    1. el:指定挂载点,可以理解为css的选择器
    2. data提供数据
      在这里插入图片描述

四、插值表达式 {{}}

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

我们可以用插值表达式渲染出Vue提供的数据

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

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

以下的情况都是表达式:

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法

插值表达式语法:{{ 表达式 }}

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

3.错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错2.支持的是表达式,而非语句,比如:if   for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

五、响应式特性

1.什么是响应式?

当我们谈论Vue的响应式时,实际上是在说Vue.js框架如何帮助我们轻松地处理数据变化的方式。通俗来说,Vue的响应式是指当你改变程序中的数据时,界面会自动更新以反映这些变化的特性。

比如说,你在Vue应用中有一个变量 count,用来表示某个数字。当你改变这个 count 的值,比如从 1 变成 2,Vue会自动帮你更新相关的界面部分,使其显示最新的值,而不需要你手动去修改页面上的内容。

这种机制背后的原理是Vue使用了一种称为“响应式数据绑定”的技术。它会监视你的数据,并在数据变化时负责更新相关的视图。这样,你就可以更专注于数据和业务逻辑,而不必担心手动更新页面。

总的来说,Vue的响应式让我们更方便地开发交互式的用户界面,因为它自动处理了数据变化时界面的更新,使得整个过程更加流畅和高效。

2.如何访问 和 修改 data中的数据

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


总结

Vue.js 是一个强大且灵活的前端框架,具有响应式数据绑定、组件化等特性,能够轻松构建现代化的用户界面。通过本文的介绍和第一个实例,我们初步了解了 Vue.js 的基本概念和用法。Vue 的简洁性和易用性使其成为前端开发中的热门选择,未来它将继续在构建优秀 Web 应用的道路上发挥重要作用。

相关文章:

【Vue2】Vue的介绍与Vue的第一个实例

文章目录 前言一、为什么要学习Vue二、什么是Vue1.什么是构建用户界面2.什么是渐进式Vue的两种开发方式&#xff1a; 3.什么是框架 三、创建Vue实例四、插值表达式 {{}}1.作用&#xff1a;利用表达式进行插值&#xff0c;渲染到页面中2.语法3.错误用法 五、响应式特性1.什么是响…...

十五届蓝桥杯分享会(一)

注&#xff1a;省赛4月&#xff0c;决赛6月 一、蓝桥杯整体介绍 1.十四届蓝桥杯软件电子赛参赛人数&#xff1a;C 8w&#xff0c;java/python 2w&#xff0c;web 4k&#xff0c;单片机 1.8w&#xff0c;嵌入式/EDA5k&#xff0c;物联网 300 1.1设计类参赛人数&#xff1a;平…...

原生video设置控制面板controls显示哪些控件

之前我们学习了如何使用原生video播放视频 今天来一个进阶版的——设置控制面板controls显示哪些控件 先看一下当我们使用原生video时&#xff0c;controls属性为true时&#xff0c;相关代码如下&#xff1a; 正常的控制面板默认显示的控件有&#xff1a;播放、时间线、音量调…...

openlayers地图使用---跟随地图比例尺动态标绘大小的一种方式2

openlayers地图使用—跟随地图比例尺动态标绘大小的一种方式2 预期&#xff1a;随着地图比例尺放大缩小&#xff0c;地图上的标绘随着变化尺寸 思路&#xff1a;通过不断添加地图图层实现标绘的动态缩放 优点&#xff1a;标绘放大缩小非常流畅 缺点&#xff1a;标绘超过1000…...

C语言期末考试复习PTA数据类型及表达式-分支结构程序-循环结构-数组经典选择题

目录 第一章&#xff1a;C语言数据类型和表达式 第一题&#xff1a; 第二题&#xff1a; 第三题&#xff1a; 第四题&#xff1a; 第五题&#xff1a; 第六题&#xff1a; 第七题&#xff1a; 第八题&#xff1a; 第九题&#xff1a; 第二章&#xff1a;分支结构程序…...

RHEL8_Linux访问NFS存储及自动挂载

本章主要介绍NFS客户端的使用 创建FNS服务器并通过NFS共享一个目录在客户端上访问NFS共享的目录自动挂载的配置和使用 1.访问NFS存储 前面介绍了本地存储&#xff0c;本章就来介绍如何使用网络上的存储设备。NFS即网络文件系统&#xff0c;所实现的是 Linux 和 Linux 之间的共…...

python 使用 AppiumService 类启动appium server

一、前置说明 在Appium的1.6.0版本中引入了AppiumService类&#xff0c;可以很方便的通过该类来管理Appium服务器的启动和停止。 二、操作步骤 import osfrom appium.webdriver.appium_service import AppiumService as OriginalServerfrom libs import pathclass AppiumSer…...

HbuilderX使用Uniapp+Vue3安装uview-plus

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章 小程序的第三方ui库推荐较多的还是uview的&#xff0c;看起来比较美观&#xff0c;功能也比较完善&#xff0c;下面将提一下Vue3安装uview-plus库的教程 创建项目 安装 首先进入官网 uView-Plus 直接下载并导…...

【Android】Java NIO(New I/O)的`Selector`类来实现非阻塞的Socket监听

如果你不想使用循环来监听客户端的连接和数据&#xff0c;你可以使用Java NIO&#xff08;New I/O&#xff09;的Selector类来实现非阻塞的Socket监听。Selector类提供了一种选择一组已经就绪的通道的机制&#xff0c;这样你就不需要使用循环来等待连接和数据。 以下是使用Sel…...

『亚马逊云科技产品测评』在当前飞速发展的AI人工智能时代云服务技术哪家强?

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 文章目录 引言一、亚马逊&阿里云发展历史介绍1.1 亚马逊发展历史1.2…...

经典神经网络——ResNet模型论文详解及代码复现

论文地址&#xff1a;Deep Residual Learning for Image Recognition (thecvf.com) PyTorch官方代码实现&#xff1a;vision/torchvision/models/resnet.py at main pytorch/vision (github.com) B站讲解&#xff1a; 【精读AI论文】ResNet深度残差网络_哔哩哔哩_bilibili …...

OpenCV-Python:DevCloud CodeLab介绍及学习

1.Opencv-Python演示环境 windows10 X64 企业版系统python 3.6.5 X64OpenCV-Python 3.4.2.16本地PyCharm IDE线上注册intel账号&#xff0c;使用DevCloud CodeLab 平台 2.DevCloud CodeLab是什么&#xff1f; DevCloud是一个基于云端的开发平台&#xff0c;提供了强大的计算…...

如何在Linux环境搭建本地SVN服务器并结合cpolar实现公网访问

目录 前言 1. Ubuntu安装SVN服务 2. 修改配置文件 2.1 修改svnserve.conf文件 2.2 修改passwd文件 2.3 修改authz文件 3. 启动svn服务 4. 内网穿透 4.1 安装cpolar内网穿透 4.2 创建隧道映射本地端口 5. 测试公网访问 6. 配置固定公网TCP端口地址 6.1 保留一个固定…...

C语言入门课程之课后习题之折半查找法

目录 1解题思路&#xff1a; 2代码所示&#xff1a; 3运行代码&#xff1a; 4习题不难&#xff0c;多刷题&#xff0c;练思路&#xff0c;最重要的不是学会了一道题&#xff0c;而是掌握其编程思想&#xff1b; 1解题思路&#xff1a; 折半查找法&#xff08;half-interval…...

【CSP】202209-1_如此编码Python实现

文章目录 [toc]试题编号试题名称时间限制内存限制题目背景题目描述输入格式输出格式样例1输入样例1输出样例2输入样例2输出样例3输入样例3输出样例3解释子任务提示Python实现 试题编号 202209-1 试题名称 如此编码 时间限制 1.0s 内存限制 512.0MB 题目背景 某次测验后&#x…...

std::function

通过使用std::function&#xff0c;可以将不同类型的可调用对象封装成统一的格式&#xff0c;从而使用相同的接口进行调用&#xff1b;在设计回掉函数、事件处理 、函数对象等场景中十分有用。 ① 封装函数指针 ② 封装lambda ③ 封装成员函数等 1. 包含头文件 #include<fun…...

SQL Server——权限管理

一。SQL Server的安全机制 SQL Server 的安全性是建立在认证和访问许可两种安全机制之上的。其中&#xff0e;认证用来确定登录Sal Server 的用户的登录账户和密码是否正确&#xff0e;以此来验证其是否具有连接SQL Server 的权限;访问许可用来授予用户或组能够在数据库中执行哪…...

实例解析关于兔鲜登录tab栏切换案例详细讲解!

文章目录 文章目录 效果图展示 整体制作的一个思路 代码展示 技术细节 小结 效果图展示 点击账户登录显示登录的模块&#xff0c;点击二维码登录显示二维码的模块 整体制作的一个思路 点击哪个模块哪个显示&#xff0c;另外一个模块让它隐藏即可&#xff01; 代码展示 <!…...

制作一个RISC-V的操作系统三-编译与链接

文章目录 GCCGCC简介GCC的命令格式gcc -Egcc -cgcc -Sgcc -ggcc -vGCC的主要执行步骤GCC涉及的文件类型针对多个源文件的处理 ELFELF介绍ELF文件格式ELF文件处理相关工具&#xff1a;Binutils&#xff08;binary utility&#xff09;readlelf -hreadelf -S或readelf -SW&#x…...

tmux工具--程序部署在服务器上持久化执行

程序部署在服务器上&#xff0c;想持久化执行 做以下操作&#xff1a; 在服务器上安装 tmux工具 对于 Ubuntu 或 Debian&#xff1a; sudo apt-get install tmux对于 CentOS 或 RHEL&#xff1a; sudo yum install tmux对于 Fedora&#xff1a; sudo dnf install tmux对于…...

当多线雷达遇上RTK:一个能跑工业现场的SLAM方案

多传感器融合建图及定位的工程化落地方案&#xff0c;多线雷达rtk&#xff1b;室内室外导航都适用。 包含部署文档和代码注释&#xff1b;包含工程落地角度的优化。 不含运动控制。 室外场景用RTK信号稳如老狗&#xff0c;一进厂房立马抓瞎&#xff1b;多线雷达在室内横扫千军…...

PyTorch实战(38)——深度学习模型可解释性

PyTorch实战&#xff08;38&#xff09;——深度学习模型可解释性0. 前言1. PyTorch 模型可解释性2. 训练手写数字分类器3. 可视化模型卷积核4. 可视化特征图小结系列链接0. 前言 在本专栏中&#xff0c;我们已经构建了多种深度学习模型来完成不同任务&#xff0c;包括手写数字…...

P15801 [GESP202603 六级] 完全二叉树

[GESP202603 六级] 完全二叉树 https://www.bilibili.com/video/BV1jQAEz3Eir/ 1.4满二叉树与完全二叉树 https://www.bilibili.com/video/BV1T44y1P7Xx/ 数据结构合集 - 二叉树&完全二叉树(定义, 性质) https://www.bilibili.com/video/BV1eQ3RzxEoS/ 202603GESP六级C第2题…...

三步掌握BepInEx插件框架:零基础也能懂的Unity游戏扩展指南

三步掌握BepInEx插件框架&#xff1a;零基础也能懂的Unity游戏扩展指南 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx作为Unity/XNA游戏的插件框架&#xff0c;为开发者和…...

零代码也能构建智能登录系统?Dify工作流让你告别繁琐的前端开发

零代码也能构建智能登录系统&#xff1f;Dify工作流让你告别繁琐的前端开发 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awes…...

寻音捉影·侠客行多场景落地:覆盖会议/媒体/司法/金融/教育五大垂直领域

寻音捉影侠客行多场景落地&#xff1a;覆盖会议/媒体/司法/金融/教育五大垂直领域 1. 产品核心功能解析 寻音捉影侠客行是一款基于先进语音识别技术的音频关键词检索工具&#xff0c;它能够像江湖中的隐士高手一样&#xff0c;在浩瀚的音频海洋中精准定位特定关键词。这款工具…...

GLM-OCR开发者实操手册:Gradio client调用+批量图片识别脚本示例

GLM-OCR开发者实操手册&#xff1a;Gradio client调用批量图片识别脚本示例 你是不是也遇到过这样的场景&#xff1a;手头有一堆发票、合同或者产品说明书图片&#xff0c;需要把里面的文字、表格甚至公式都提取出来&#xff1f;一张张手动录入或者用传统OCR工具&#xff0c;不…...

从单体到微服务:用Ruoyi-Vue-Plus框架快速搭建多租户后台系统(含AI模块开发避坑指南)

从单体到微服务&#xff1a;Ruoyi-Vue-Plus框架的多租户实战与AI模块开发精要 当企业级应用需要同时服务多个客户群体时&#xff0c;如何确保数据隔离与系统性能的平衡成为架构设计的核心挑战。Ruoyi-Vue-Plus作为一款基于Spring Boot的快速开发框架&#xff0c;其多租户实现机…...

3步打造开源工具效率引擎:QtScrcpy自定义配置全指南

3步打造开源工具效率引擎&#xff1a;QtScrcpy自定义配置全指南 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy …...

抖音视频批量下载效率革命:解放双手的douyin-downloader全攻略

抖音视频批量下载效率革命&#xff1a;解放双手的douyin-downloader全攻略 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 作为内容创作者&#xff0c;你是否曾为收集行业素材而重复点击下载按钮&#xff1f…...