Vue速成学习笔记

这两天速成了一下Vue,在这里记录一下相关的笔记,之后有时间详细学Vue的时候再来回顾一下!


一、Vue理解

1、Vue的核心特征:双向绑定。

在网页中,存在视图和数据。在Vue之前,需要使用JavaScript编写复杂的逻辑去操作DOM元素来实现视图和数据的一致性。Vue把这个过程封装了起来,使得我们可以更关心视图和数据之间的关系而不是具体的代码实现,这就是MVVM(Model-View-ViewModel)双向绑定。

View就是用户看到的内容,比如表单,输入框;

Model就是View对应的数据,比如表单展示的内容对应的数据对象,输入框中的内容对应的数据对象;

Vue之前,View展示的数据(用户看到的)和它实际的数据(Model中存储的),这二者的一致性需要程序员使用JavaScript来手动同步。

引入Vue之后,在原来的模式中加入了一个中介——ViewModel。我们只需要告诉ViewModel哪个View和哪个Model对应,当其中一个变化时,另一个就会同步变化,这就是MVVM的核心。

举个例子,页面中有一个表格Table,例如学生的信息表。在Vue之前,如果我们想删除一条记录,需要手动去操作DOM元素让表格呈现的内容发生变化;同理,如果数据库中这个表发生了变化,我们也要去手动修改添加上相关的记录。

使用Vue之后,我们只需要把表格和其对应的数据绑定起来,当用户对视图(表格)进行了修改,变化会自动同步到ViewModel中,之后会自动更新到Model数据库;同理,如果数据库发生了变化,ViewModel也会自动同步相关的逻辑,让用户看到的视图发生变化。

这个过程中对DOM元素的操作对程序员来说就变成透明的了,我们可以更关注怎么去实现好看的视图以及把视图和数据对应地绑定起来,而不必关心怎么对视图和数据进行同步。


2、两个指令和生命周期

①v-bind和v-model是两个重要的指令。

v-bind通常用于单向数据绑定,适用于那些用户不能修改的数据。例如把一个超链接绑定到数据上,那么用户永远只能点这个超链接,而不能去修改它。但是服务器可以通过修改Model来改变这个超链接的URL,从而使得用户打开的页面不同。例如点击某个link时,服务器根据其他的信息来设置这个link具体的URL。

v-model则用于双向绑定,适用于那些用户可以修改内容的视图。例如常见的管理系统,用户可以对表格中的数据进行增删改查,这就要求用户操作完之后,变化要同步到Model中从而使得数据库进行持久化;相应的,如果数据库中的数据发生了变化,这个变化也应该同步到用户所看到的View上。

简单的区别就是:v-bind,View在等Model变化然后自己变化;v-model,View和Model都可以变化并引起对方同步变化。

②Vue的生命周期。

Vue的生命周期共有四段:创建、挂载、更新和销毁。在每一段的前后(before和after)都可以为Vue定义一些行为,称为钩子函数,这样的钩子函数一共有八个。

其中比较重要的是挂载(mounted),当Vue实例被挂载后就会执行这个函数的内容。例如可以设置为展示用户数据的Vue,在挂载好之后即从数据库获取最新的数据并展示。


二、Vue流程

上图是一个新建好的Vue项目框架,这里按照浏览器的访问情况介绍一下Vue的流程。

1、浏览器会首先访问index.html,index.html里面什么也没有,body里只有一个id为app的div。

index.html会默认引入main.js,所以浏览器会在访问index.html执行main.js的相关内容。

2、main.js关键就是:

new Vue({router, // ES6: router: router,属性名和属性名之后的名字一样的时候,可以简写为属性名render: h => h(App)
}).$mount('#app')
// 1. new Vue({...}) 创建一个Vue实例
// 2. $mount('#app') 将该Vue实例挂载到页面中id为app的元素上,即该实例会替换该元素内的内容
// 3. router是一个路由对象,用于管理页面的路由
// 4. render: h => h(App) 是一个渲染函数,用于指定如何渲染页面,这里的App是一个Vue组件
//   4.1 h(App):调用 h 函数(createElement 函数),传入 App 组件作为参数,这意味着 App 组件将作为根组件被渲染。
//   4.2 Vue 会使用这个组件来构建整个应用程序的 VDOM(虚拟 DOM) 树

也就是说,执行完main.js之后,会有一个Vue实例被挂载到index.html的id为app的div上,即会替换掉它,因此我们所看到的实际上是这个Vue实例中的内容,而这个Vue实例在渲染时使用的是App组件,这个App组件就是我们在上面导入的App.vue。

3、App.vue展示网页的实际内容,它被被导入到main.js,并作为组件被渲染到index.html中。

总结:流程就是:index.html->main.js->App.vue。我们看到的实际上是App.vue的内容。

我们之后的前端工程化开发就是在App.vue里面放我们自己写的vue,从而完成前端的视图展示和其与数据的同步。


三、ElementUI

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

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

相关文章

web前端面试题

web前端面试题 1、前端如何实现优化性能 (1)减少网络时间 ①使用DNS缓存技术 ​ ②减少需要传输的文件尺寸 ​ ③加快文件传输速度 (2)减少发送的请求数量 ①利用浏览器缓存 ​ ②使用合并的图片文件 (3)提高浏览器下载的并发度 ①JS文件放在HTML文档最后 ​ ②使用多个域名 (…

音视频及H264/H256编码相关原理

一、音视频封装格式原理: 我们播放的视频文件一般都是用一种封装格式封装起来的,封装格式的作用是什么呢?一般视频文件里不光有视频,还有音频,封装格式的作用就是把视频和音频打包起来。 所以我们先要解封装格式&#…

谷歌上架,个人号比企业号好上?“14+20”封测如何解决,你知道了吗

在Google Play上架应用,对开发者而言,既是挑战也是机遇。随着谷歌政策的不断更新,特别是要求2023年11月13日后注册的个人开发者账号在发布正式版应用前,必须经过20人连续14天的封闭测试。 这一政策的改变使得许多开发者开始考虑使…

什么是物联网通信网关?-天拓四方

在信息化、智能化的时代,物联网技术的广泛应用正在逐渐改变我们的生活方式。物联网通过各种传感器和设备,将现实世界与数字世界紧密相连,从而实现智能化、自动化的生活和工作方式。作为物联网生态系统中的重要组成部分,物联网通信…

【数据结构】堆(Heep)

✨✨✨专栏:数据结构 🧑‍🎓个人主页:SWsunlight 目录 一、堆: 定义: 性质: 大、小根堆: 二、实现堆(完全二叉树): 前言: …

四、Filter

Filter简介 Filter 的基本功能是对Servlet容器调用Servlet的过程进行拦截,从而在Servlet进行响应处理的前后实现一些特殊的功能.在Servlet API 中定义了三个接口类来供开发人员编写Filter 程序:Filter,FilterChain,FilterConfigFilter 程序是一个实现了…

Spring:Spring事务失效的各种场景以及解决方法

一、前言 Spring事务是指Spring框架中提供的事务管理功能,它可以帮助开发者简化事务管理的复杂性,提高代码的可维护性和可扩展性。本文将总结并分析Spring事务失效的各种场景,帮助你全面了解事务失效的原因和解决方案。 二、Spring事务失效的…

51汇编--数码管显示

;将内部RAM30H~32H单元中存储的6位十进制数显示在6个数码管上。 ;要求编写将一个内存单元中的压缩BCD码转换为两个七段显示码的子程序和 ;延时子程序。不允许在程序中给30H、31H和32H单元赋值,要通过存 ;储器窗口赋值。尝试改变点亮数码管的时间&#xf…

Linux软硬链接及动静态库

软硬链接与动静态库 软连接 创建链接的方法: ln -s test1.txt test2.txt 其中ln 是link(链接),-s 是soft(软),后者链接前者。 此时打开test2.txt,发现其中内容与test.txt一致。那么软连接到底建立了什么联系?…

轻松购物,尽在购物网

在忙碌的生活中,想要找到心仪的商品,却总是苦于没有时间和精力去实体店挑选?别担心,购物网为您提供一站式的购物体验。无论是时尚服饰、家居用品,还是美食特产,这里都能满足您的需求。只需轻轻一点&#xf…

监听element-ui表格滚动事件

当element-ui表格高度写死之后,表格内容超出高度就会在右侧显示滚动条,监听滚动事件 首先给表格加ref,ref"refTable" 然后在mounted生命周期里写监听事件 mounted() {this.$refs.refTable.$el.onwheel (e) > {console.log(滚…

深入解析线程上下文切换的原理与优化策略

深入解析线程上下文切换的原理与优化策略 定义触发条件线程上下文切换的过程线程上下文切换的开销减少上下文切换的方法示例代码总结 线程上下文切换(Thread Context Switch)是操作系统调度机制的重要组成部分。它涉及保存当前线程的状态并恢复新线程的状…

vue中使用ant的rangePicker设置禁选时间和时间格式

<a-range-pickerstyle"width: 100%":disabled-date"disabledDate"v-model:value"time"valueFormat"YYYY-MM-DD" />valueFormat设置时间格式YYYY-MM-DD 通过dayjs获取时间&#xff0c;return过滤后的时间 const disabledDate (…

安装apex时遇到的问题

Apex是混合精度库&#xff0c;安装过程中常常出现各种问题&#xff0c;在此记录一下 首先&#xff0c;不能使用pip install apex,这是两个完全不同的库&#xff0c;需要去官网下载 其次&#xff0c;参考官网安装时可能会报错&#xff1a;could not build wheels for apex, whic…

C/C++运行时库和UCRT系统通用运行时库总结及问题实例分享

目录 1、概述 2、不同版本的Visual Studio对应的运行时库说明 3、在Windbg10.0安装目录中获取UCRT通用运行时库 4、微软官网对UCRT通用运行时库的相关说明 5、使用Visual Studio 2017开发软件初期遇到的UCRT通用运行时库问题 6、如何查看软件依赖了哪些C/C运行时库&#…

后端雪花算法主键ID传到前端变了

Mybatis Plus 的主键策略&#xff1a; /*** id*/TableId(type IdType.ASSIGN_ID)private Long id; 这个主键策略会用雪花算法生成一个 19位的ID&#xff0c;比如 1791006670084734978 现象 后端生成的 id 是正常的&#xff0c;通过 swagger 文档此时获取到的 id 也和数据库中…

leetcode-盛水最多的容器-109

题目要求 思路 1.正常用双循环外循环i从0开始&#xff0c;内循环从height.size()-1开始去计算每一个值是可以的&#xff0c;但是因为数据量太大&#xff0c;会超时。 2.考虑到超时&#xff0c;需要优化一些&#xff0c;比如第一个选下标1&#xff0c;第二个选下标3和第一个选下…

Java 面试题日常练习

### 基础知识 1. **什么是 JVM&#xff1f;解释其架构。** - JVM&#xff08;Java Virtual Machine&#xff09;是 Java 程序的运行时环境。其架构包括类加载器子系统、运行时数据区&#xff08;堆、栈、本地方法栈、PC 寄存器、方法区&#xff09;、执行引擎和本地方法接口…

心识宇宙 x TapData:如何加速落地实时数仓,助力 AI 企业智慧决策

使用 TapData&#xff0c;化繁为简&#xff0c;摆脱手动搭建、维护数据管道的诸多烦扰&#xff0c;轻量代替 OGG、DSG 等同步工具&#xff0c;「CDC 流处理 数据集成」组合拳&#xff0c;加速仓内数据流转&#xff0c;帮助企业将真正具有业务价值的数据作用到实处&#xff0c…

基于springboot实现华府便利店信息管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现华府便利店信息管理系统演示 摘要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本华府便利店信息管理系统就是在这样的大环境下诞生&#xff…