VUE超详细入门

news2024/9/22 15:50:17

目录

1.什么是 Vue.js

2.Vue.js 优点

Vue中的第一个hello world

Vue指令

 v-model

v-bind

v-on

v-if

v-show

v-for

Vue 实例生命周期

从传统架构转向单文件架构(通过组件拼接)

安装element-ui使用


1.什么是 Vue.js

Vue (读音 /vju ː /,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue
的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三
大主流框架!地址:https://v2.cn.vuejs.org/

2.Vue.js 优点

1.体积小 压缩后 33K
2.更高的运行效率,用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的
时候,浏览器要不停的渲染新的 DOM 树,导致页面看起来非常卡顿。
基于虚拟 dom,一种可以预先通过 JavaScript 进行各种计算,把最终的
DOM 操作计算出来并优化的技术,最后在计算完毕才真正将 DOM 操作提交。
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定,让开发者不用再操作 dom 对象,
把更多的精力投入到业务逻辑上.
MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的
状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。
如图如果使用dom来操作需要拿到文本框对象的值赋给上面div中的对象,反复的操作对象不利于我们写业务逻辑,所以vue简化了这一操作,不用再操作对象.
此图就反映了mvvm思想,model就是data数据,dom就是标签对象,vue框架实现了数据和标签的双向绑定,使data数据在改变时dom中的值也随之改变,dom标签中的值改变data数据也随之改变

Vue中的第一个hello world

在vue官方中用这在线地址找到内容并保存。(这相当于一个vue的jar包)

在左侧的js中将vue.js导入进去然后src引用官方中的第一hello world就实现了

接下来我们对这个hello world解析

{{}}插值表达式在vue中用来获取data中的值,el和标签绑定通过id获取

Vue指令

指令带有前缀 v- 开头,以表示它们是 Vue 提供的特殊属性。

如图我们用插值表达式{{}} v-text v-html也都可以实现,那么它们有什么区别呢?

答:插值表达式会将msg1中的你好赋值给插值表达式{{}}后面的vue不产生影响

        而v-text和v-html会将标签<p>vue<p>中的vue覆盖掉,(就是把你好放在了这个p标签里)

v-text和{{}}都是拿到msg1文本然后赋值,而v-html还可以对这个msg1文本进行解析里面的标签

 v-model

作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
这里先解释一点: body标签中需要一个最大的div标签,这是因为div和这个vue.js用el绑定之后在这个最大的div里的子标签都可以使用这个new Vue对象了(不直接在body上绑定是因为vue不允许)
再来看这个图,逻辑是通过<input>文本框标签通过 v-model实现了和msg的双向数据绑定,更改文本框的值,这个data中的msg就会改变(在代码中看不见),之后又通过<p>标签使用插值表达式对msg进行双向数据绑定。最终则会实现在文本框中打字,<p>标签也会显示出来。(总结:也就是说文本框和<p>对msg)

v-bind

对图片的属性进行双向数据绑定

如图中所示显示一张图片仅仅用src"地址"这样会把src图片写死了,用v-bind可以绑定data中的img,通过改变data中的img从而改变图片.(这里v-bind:可以简写成 :src默认使用(v-bind))

我们在改变前端一些样式的时候也会用到

我们定义了一个.imgcss,然后可以用v-bind:class={imgcss:isActive},将isActive写在data里设为true,则在使用时默认绑定的就是这个样式,当不想用这个样式时可以用按钮添加事件将isActive改变为false

v-on

作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@(例如v-on:click和@click)
绑定的方法定义在 methods 属性中,可以传入自定义参数

这里强调一点:在methods方法中调用data中的数据必须要用this

v-if

作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true ,元素存在于 dom 中,为 false,从 dom 中移除

v-show

作用是根据真假切换元素的显示状态 原理是修改元素的 display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值
值为 true 元素显示,值为 false 元素隐藏
数据改变之后,对应元素的显示状态会同步更新

这里强调一下:v-if和v-show的区别是前者在dom中如果为false直接移除,而后者则是display将其隐藏,总的来说频繁的切换用v-show,反之使用 v-if,前者的切换消耗小。

v-for

v-for的使用更像是java中的增强for循环,每一个值用插值表达式输出出来

对于一个表格来说前面的值可以为两个一个为对象,一个为索引。

Vue 实例生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数
据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时
在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添
加自己的代码的机会。 (new 了一个vue的对象之后,在这个运行过程中的一些函数例如java中的创建一个构造函数在创建时就初始化了一些东西)
钩子函数和methods、data是平级的
运行后就可看到输出到控制器中,所以我们在每一个时间段想要执行什么就在哪个函数里面写。

从传统架构转向单文件架构(通过组件拼接)

什么是node?

  1. 服务器端 JavaScript:Node.js 让 JavaScript 可以在服务器端运行,这样开发者可以使用同一种语言(JavaScript)来编写前端和后端代码,实现全栈开发。

  2. 事件驱动和非阻塞I/O模型:Node.js 是基于事件驱动和非阻塞I/O 的模型,这使得它能够处理大量并发连接,非常适合构建高性能、可伸缩的网络应用。

  3. 模块化:Node.js 支持 CommonJS 规范的模块系统,使得代码可以以模块的形式组织、管理和重用。

  4. 包管理器 npmNode.js 自带 npm(Node Package Manager),是世界上最大的开源库生态系统,开发者可以通过 npm 轻松地安装、分享和管理 JavaScript 包和依赖项。

  5. 文件操作:Node.js 提供了丰富的文件操作 API,使得开发者可以轻松地对文件进行读取、写入和操作。

  6. 跨平台:Node.js 可以运行在多种操作系统上,包括 Windows、Mac OS 和各种 Linux 发行版,具有较高的可移植性。

  7. 构建工具和任务自动化:由于 Node.js 生态系统丰富,开发者可以使用各种构建工具和任务自动化工具(如 Gulp、Webpack 等)来简化开发流程、优化代码和资源管理。

  类似与java中的maven

需要的环境
Node.js(没有node环境创建不了vue项目)
简单的说 Node.js 是一个前端 js 运行环境 或者说是一个 JS 语言解释器
npm
npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。
组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建
单页面应用变得易如反掌。( 我们在没有组件路由之前网站上访问不了vue组件 )
安装
vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的。 打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3
安装成功之后,我们创建一个router包里面放一个js文件,先必须导入再包中导入router和Vue,之后再导入我们需要的组件, Vue.use(router) 的作用是在 Vue.js 应用中安装并注册 Vue Router,使得我们可以在应用中使用 Vue Router 提供的各种路由功能和组件。path就是我们配置的网站可以访问到的路径,最后导出这个rout对象(虽然默认访问的是App组件但是通过路由配置路径'/'即可在什么也没有时访问到index组件)
最后我们需要再main.js中配置到Vue对象中去.这短main.js代码解析: 先导入库Vue再导入了app组件,再导入了我们组建的路由配置,创建了一个vue对象初始化了router路由,并对App组件作为入口访问.在App.vue中创建一个router-view就可显示所有的vue组件
在index页面中访问其他组件就不是使用超链接了而是使用如图中所示<router-link to="/login">的方式。

安装element-ui使用

在命令行中下载即可npm i element-ui -S

并在main.js中配置即可,在element-ui官网就可使用它的组件

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

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

相关文章

基本的路由策略配置

目录 原理概述 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建OSPF和RIP网络 3、使用Route-Policy对引入到OSPF 进程的路由进行过滤和修改 主要命令 原理概述 路由策略Route-Policy 的应用非常广泛。例如,它可以规定路由器在发布路由时只…

Databricks 收购 Tabular 的意义:数据开放框架的胜利

Databricks 宣布收购 Tabular&#xff0c;这是一个由 Apache Iceberg 的原始创建者开发的数据平台&#xff0c;在数据分析行业引发了涟漪。此次收购凸显了开放框架在数据领域日益增长的重要性&#xff0c;预示着数据管理、分析和 AI/ML 计划领域的创新、协作和可访问性的新时代…

RedisTemplate 中序列化方式辨析

在Spring Data Redis中&#xff0c;RedisTemplate 是操作Redis的核心类&#xff0c;它提供了丰富的API来与Redis进行交互。由于Redis是一个键值存储系统&#xff0c;它存储的是字节序列&#xff0c;因此在使用RedisTemplate时&#xff0c;需要指定键&#xff08;Key&#xff09…

伺服【禾川X6】

驱动器&#xff1a; A&#xff1a;脉冲 B&#xff1a;EtherCAT // SV-X6 FB 040 AA 一套360 N&#xff1a;CANopen R&#xff1a;PROFINET 电机&#xff1a; SV-X6 MA 040A-B2 KA 框号&#xff1a; 40 8mm 50…

C++ Primer 总结索引 | 第十六章:模板与泛型编程

1、面向对象编程&#xff08;OOP&#xff09;和泛型编程 都能处理在编写程序时 不知道类型的情况。不同之处在于&#xff1a;OOP 能处理类型 在程序运行之前都未知的情况&#xff1b;而在泛型编程中&#xff0c;在编译时就能获知类型了 2、容器、迭代器 和 算法 都是泛型编程的…

element el-upload 粘贴上传图片

对form中的某一个el-form-item添加 paste.native 事件&#xff0c;事件绑定方法名 handlePaste也可以在其他控件中添加事件监听&#xff0c;这里在当前form-item 这个块使用了&#xff0c;只有当你点击目标区域时才有效。 <el-form-item label"备注图片" paste.n…

skywalking-2-客户端-php的安装与使用

skywalking的客户端支持php&#xff0c;真的很棒。 官方安装文档&#xff1a;https://skywalking.apache.org/docs/skywalking-php/next/en/setup/service-agent/php-agent/readme/ 前置准备 本次使用的php版本是8.2.13: php -v PHP 8.2.13 (cli) (built: Nov 21 2023 09:5…

Prometheus+Grafana主机运行数据

目录 介绍 安装Node Exporter 配置Prometheus 验证配置 导入仪表盘 介绍 Prometheus是一款开源的监控和警报工具&#xff0c;而Node Exporter是Prometheus的一个官方插件&#xff0c;用于采集主机上的各种系统和硬件指标。 安装Node Exporter 下载最新版本的Node Export…

科普文:浮点数精度运算BigDecimal踩坑和填坑

概叙 用过Java的BigDecimal类型&#xff0c;但是很多人都用错了。如果使用不当&#xff0c;可能会造成非常致命的线上问题&#xff0c;因为这涉及到金额等数据的计算精度。 首先说一下&#xff0c;一般对于不需要特别高精度的计算&#xff0c;我们使用double或float类型就可以了…

PHP实现用户认证与权限管理的全面指南

目录 引言 1. 数据库设计 1.1 用户表&#xff08;users&#xff09; 1.2 角色表&#xff08;roles&#xff09; 1.3 权限表&#xff08;permissions&#xff09; 1.4 用户角色关联表&#xff08;user_roles&#xff09; 1.5 角色权限关联表&#xff08;role_permissions…

MySQL之基本查询(下)-表的增删查改

表的增删查改&#xff1a;CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; Update(更新) 语法&#xff1a; UPDATE table_name SET column expr [, column expr ...] [WHERE ...] [ORDER BY ...] [LIMIT ...] …

【观成科技】Websocket协议代理隧道加密流量分析与检测

Websocket协议代理隧道加密流量简介 攻防场景下&#xff0c;Websocket协议常被用于代理隧道的搭建&#xff0c;攻击者企图通过Websocket协议来绕过网络限制&#xff0c;搭建一个低延迟、双向实时数据传输的隧道。当前&#xff0c;主流的支持Websocket通信代理的工具有&#xf…

AnimateLCM:高效生成连贯真实的视频

视频扩散模型因其能够生成连贯且高保真的视频而日益受到关注。然而&#xff0c;迭代去噪过程使得这类模型计算密集且耗时&#xff0c;限制了其应用范围。香港中文大学 MMLab、Avolution AI、上海人工智能实验室和商汤科技公司的研究团队提出了AnimateLCM&#xff0c;这是一种允…

盲盒抽卡机小程序:抽卡机的多样化发展

近几年&#xff0c;盲盒卡牌出现在了大众的生活中&#xff0c;深受学生和年轻消费者的喜爱。卡牌是一种新的盲盒模式&#xff0c;玩家购买后随机获得卡牌&#xff0c;为了收集一整套卡牌&#xff0c;玩家会进行各种复购行为&#xff0c;卡牌逐渐成为了年轻人追捧的休闲方式&…

获取天气数据

获取天气数据其实是一个简单的HTTP接口&#xff0c;根据用户输入的adcode&#xff0c;查询目标区域当前/未来的天气数据&#xff0c;数据来源是中国气象局。 第一步&#xff0c;申请”web服务 API”密钥&#xff08;Key&#xff09;&#xff1b; 链接: 首页 | 高德控制台 (am…

HTTP协议分析/burp/goby/xray

一、HTTP简介 HTTP(超文本传输协议)是今天所有web应用程序使用的通信协议。最初&#xff0c;HTTP只是一个为获取基于文本的静态资源而开发的简单协议&#xff0c;后来人们以名种形式扩展和利用它.使其能够支持如今常见的复杂分布式应用程序。HTTP使用一种用于消息的模型:客户端…

软件产品必须进行确认测试吗?包括哪些测试流程和注意事项?

在当前科技快速发展的时代&#xff0c;软件产品已经成为人们生活和工作中不可或缺的一部分。然而&#xff0c;随着软件产品的增多和复杂性的提升&#xff0c;软件质量的问题也逐渐浮现出来。为了确保软件产品的质量和稳定性&#xff0c;软件产品在开发完成后必须进行确认测试。…

模版初阶(更新)

文章目录 模版介绍函数模版模版匹配规则类模版结言 模版介绍 函数模版分为两个类型&#xff1a; 函数模版类模版 函数模版 语法格式&#xff1a; t e m p l a t e < t y p n a m e T 1 , t y p n a m e T 2... > template<typname T1,typname T2...> template&…

小技巧(更新中)

1.Pycharm使用小技巧pycharm的使用小技巧1---快速找到模块内的函数和类&#xff0c;快速定位查看的模块所在位置_pycharm怎么查找某个函数-CSDN博客 2. Python库之requirments Python库安装之requirements.txt, environment.yml_python requirements-CSDN博客 3.执行.sh脚本的…

N6 word2vec文本分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊# 前言 前言 上周学习了训练word2vec模型&#xff0c;这周进行相关实战 1. 导入所需库和设备配置 import torch import torch.nn as nn import torchvision …