VUE超详细入门

目录

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.mzph.cn/web/43343.shtml

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

相关文章

GPT-5要来了?我的博士生“AI朋友”!

GPT-5 一年半后发布&#xff1f;对此你有何期待&#xff1f; IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;…

Vue2-动画

1.transition过渡 过渡组件&#xff1a;进入/离开 & 列表过渡 — Vue.js [用transition做CSS动画]Enter状态&#xff1a;JS Bin - Collaborative JavaScript Debugging Leave状态&#xff1a;JS Bin - Collaborative JavaScript Debugging 2. animation动画 用animation做…

关于数组的常见算法

一、案例一 案例说明 案例&#xff1a;定义一个int型的一维数组&#xff0c;包含10个元素&#xff0c;分别赋一些随机整数&#xff0c;然后求出所有元素的最大值&#xff0c;最小值&#xff0c;总和&#xff0c;平均值&#xff0c;并输出出来 要求&#xff1a;所有随机数都是两…

Nginx -Web服务器/反向代理/负载均衡

文章目录 一、web服务1.1 nginx安装1.2 配置文件1.3 Nginx处理Web机制 二、反向代理三、负载均衡3.1 分类3.2 负载相关配置文件3.3 keepalive 提高吞吐量3.4 配置浏览器缓存 附、JMeter性能测试工具 以赛促学内容,大概率感觉会使用nginx做web服务,特对nginx做总结归纳. Nginx是…

echart5.5.1版本,倒三角柱状图

加载方法 initChart1(title, id, tag) {var myChart echarts5.init(this.$refs[id]);const _this this;var option {title:{text: title||"",show: title?true:false,top: 24,left: 24},grid:{left: 54,top: 74,bottom: 44,right: 30,},xAxis: {type: category,d…

【Spring成神之路】老兄,来一杯Spring AOP源码吗?

文章目录 一、引言二、Spring AOP的使用三、Spring AOP的组件3.1 Pointcut源码3.2 Advice源码3.3 Advisor源码3.4 Aspect源码 四、Spring AOP源码刨析4.1 configureAutoProxyCreator源码解析4.2 parsePointcut源码解析4.3 parseAdvisor源码解析4.4 parseAspect源码解析4.5 小总…

电脑缺少dll文件是怎么回事?教你5种有效的解决方法

当您的计算机显示DLL文件已经遗失时&#xff0c;您应如何应对呢&#xff1f;实际上&#xff0c;针对此类DLL文件的处置过程相对来说较为简易。今日&#xff0c;我们在此为大家详细介绍此领域的相关知识&#xff0c;让大家轻松解决电脑中因丢失DLL文件而产生的问题。 一、关于DL…

案例开发-日程管理-第一期

九 案例开发-日程管理-第一期 共7期 9.1 登录页及校验 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>.ht{text-align: center;color: cadetblue;font-family: 幼…

MVC 生成验证码

在mvc 出现之前 生成验证码思路 在一个html页面上&#xff0c;生成一个验证码&#xff0c;在把这个页面嵌入到需要验证码的页面中。 JS生成验证码 <script type"text/javascript">jQuery(function ($) {/**生成一个随机数**/function randomNum(min, max) {…

RedHat Linux8 修改root管理员账户密码命令

RedHat Linux8 修改root管理员账户密码命令&#xff1a; sudo passwd root RedHat重置root管理员密码&#xff1a; 1. 查看Linux系统版本信息 cat /etc/redhat-release2. 重置密码 2.1 进入内核编辑界面 重启Linux系统并出现引导界面&#xff0c;按下键盘上的e键进入内…

Prometheus+Grafana主机运行数据

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

FLinkCDC引起的生产事故(二)

背景&#xff1a; 最近在做实时数据的抽取工作&#xff0c;利用FLinkCDC实时抽取目标库Oracle的数据到Doris中&#xff0c;但是在抽取的过程中&#xff0c;会导致目标库的生产库数据库非常卡顿&#xff0c;为了避免对生产环境的数据库造成影响&#xff0c;对生产环境的数据库利…

qcom 平台efuse机器抓取dump log的方法

引言&#xff1a; qcom 平台机器&#xff0c;一旦efuse后机器将无法抓取dump log qcom 原文&#xff1a; efuse机器抓取dump log的方法如下&#xff1a; 一、修改配置文件&#xff1a; 把kamorta_debugpolicy.xml 在配置了debugpolicy&#xff08;加入串号和打开开关&#x…

怎么检查SSL证书是否有效?

SSL证书的有效性对于保护网站数据安全和用户隐私至关重要。然而&#xff0c;有时可能会出现证书过期、无效或被吊销的情况。为了确保网站的安全性&#xff0c;对SSL证书的有效性进行检查至关重要。本文将介绍几种常用的方法来检查SSL证书的有效性&#xff0c;帮助大家有效评估和…

基于Make的c工程No compilation commands found报错

由于安装gcc时只安装了build-essential&#xff0c;没有将其添加到环境变量中&#xff0c;因此打开Make工程时&#xff0c;CLion会产生如下错误&#xff1a; 要解决这个问题&#xff0c;一个方法是将GCC添加到环境变量中&#xff0c;但是这个方法需要修改至少两个配置文件&…

数据结构——约瑟夫环C语言链表实现

约瑟夫环问题由古罗马史学家约瑟夫&#xff08;Josephus&#xff09;提出&#xff0c;他参加并记录了公元66—70年犹太人反抗罗马的起义。在城市沦陷之后&#xff0c;他和40名死硬的将士在附近的一个洞穴中避难。起义者表示“宁为玉碎不为瓦全”&#xff0c;约瑟夫则想“留得青…

dledger原理源码分析(四)-日志

简介 dledger是openmessaging的一个组件&#xff0c; raft算法实现&#xff0c;用于分布式日志&#xff0c;本系列分析dledger如何实现raft概念&#xff0c;以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的日志&#xff0c;包括写入&#xff0c;复制…

网站SEO百度搜索排名—通过关键字提升网站流量

添加网站关键字 <meta name"keywords" content"系统通过搜索到的关键字XXXXXXXXX"> <meta name"description" content"网站的介绍内容XXXXXXXXXXXXXXXXX"> <title>平台名称XXXXXXX</title> 在 百度站点管理 …

STM32串口通讯(RS232、RS485、TTL)详解

前言 STM32串口&#xff08;Serial Communication Interface&#xff09;是STM32微控制器中用于串行通信的接口&#xff0c;通常指的是USART&#xff08;通用同步异步收发器&#xff09;或UART&#xff08;通用异步收发传输器&#xff09;。这些接口允许STM32微控制器与其他设…

zabbix 学习笔记

文章目录 Zabbix 安装Ubuntu 18.04.1 server 安装Zabbix 4.0Centos7 安装Zabbix3.4Centos7 安装zabbix4.2Centos7.1908安装zabbix 基于ngixDebian11安装zabbix6.0LTS 基于PostgreSQL和NGINXAlmaLinux9.2使用国内清华源在线安装zabbix6.0.18LTS 基于MySQL和NGINXUbunut22.04使用…