重新学习Vue,了解一下Vue的故事和核心特点

news2025/7/16 1:30:18

vue

  • Vue的由来
  • Vue是什么
    • 1.响应的数据绑定
    • 2.可组合视图组件
    • 3.虚拟DOM
    • 4.MVVM模式
    • 5.声明式渲染
  • 总结

Vue的由来

大家应该都知道VUE是尤大大尤雨溪开发出来的,尤大大专业不是计算机,而是室内艺术专业。后来尤大大到帕森斯设计学院进修艺术研究硕士学位,学习的是科技与设计项目。在做项目这个过程中尤大大自学了编程JavaScript,用程序进行创作,还为谷歌浏览器开发了一些互动的场景,真的太厉害了。后来就加入了谷歌。
尤大大是什么时候开始提交vue.js的呢?一开始它的名字是seed.js,在 2013年6月份,尤大大要在npm上发布的时候,发现seed.js被占用了,然后就重新想了一个名字,通过view法语翻译过来的vue,在npm上没有重名,就有了vue.js第一次提交。

vue.js从第一次提交到2015年10月1.0版本发布,这两年的时间尤大大都是在不断的vue.js进行开发,完善,更新文档。

后来尤大大被阿里邀请到阿里巴巴园区分享vue背后的故事,为什么开发它,使用vue的好处有哪些?经过很长一段时间的推广和使用,终于有一些开发者接受了Vue,现在越来越多的公司都在使用Vue框架,面试的时候也会问一些vue相关的知识点。

Vue是什么

那Vue是什么呢?Vue的核心只关注试图层面,它是一套构建用户界面渐进式的前端框架,哪一块需要就用哪一块。vue.js核心特点:

1.响应的数据绑定

传统的js操作界面,在操作某个html元素的数据就要使用js代码获取元素在处理业务逻辑。响应式绑定数据的的方式可以通过以下示例实现:

<template>
  <div id="app">
    {{ message }}
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      message: 'Welcome to Your Vue.js '
    }
  }
}
</script>
<style>
</style>

2.可组合视图组件

组件可以引入其他组件,可嵌套引入。如果js,css,html在一个文件夹里面是一个单文件组件。

3.虚拟DOM

虚拟DOM就是在内存中生成与真实DOM对应的数据结构

4.MVVM模式

MVVM是什么呢?M是指model模型,V是指view视图模板,vm是指view-model视图模型。MVVM实例是双向数据绑定的,当input数据框输入数据的时候,相对于的绑定数据也会发生改变。
MVVM有以下几个个方面的优点:

1.低耦合
2.可重用性
3.独立开发
4.可测试

主要核心就是视图模型这一块。
在这里插入图片描述

5.声明式渲染

vue中声明式渲染就是根据你需要的声明一下,不注重代码实现。

总结

了解到了vue的背后的故事,vue目前IT行业非常的流行,是每个工程师必须掌握的技能,Vue现在的Star数近20w+,可能使用者越来越多了,尤大大曾经说过这样的一段话““我很自豪当初迈出了那一步,离开了早9晚5的工作,并开始投身于我真正热爱的事业上去,有时候我会看着那些星星,我们有了那么多用户,那么多的下载,但是什么给了我最大的成就感和满足感呢,是每次我看到这些人们,这就是我开发Vue.js的原因,我创造了这个东西,我把他分享给人们,希望它能让人们的生活变得更轻松,人们向我走过来,感谢我做出了这个东西,这也算完成这个循环了"。感谢尤大大开发出来Vue,接下来就抓紧时间开始学习了Vue之旅了。

这一篇还知道了Vue有哪些特点,五大特点分别是响应式绑定,虚拟DOM,声明式渲染,MVVM,可组合视图组件等等。

在我们接触和学习掌握的这门技术的时候,你会发现你多了一门技能,可以用这个工具来创造你想要实现的东西。是一件非常有意义的事情,不管你处在哪个阶段,都赶紧行动起来吧,只有做了才知道自己合不合适。

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

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

相关文章

猿创征文|【HTML】标签学习之路

&#x1f496;目录 一、HTML语法规范 1.基本语法概述 2.标签关系 二、HTML基本结构标签 1.第一个HTML页面 2.HTML基本结构标签总结 一、HTML语法规范 1.基本语法概述 html是由尖括号包围的关键词&#xff0c;列如&#xff1a;<html>。html标签通常是成对出现的&a…

前端微信小程序开发基础

文章参考&#xff08;黑马小程序教学视频&#xff09;仅供参考与学习 简介 小程序和普通页面开发的区别 运行环境不同 网页运行在浏览器中&#xff0c;小程序运行在微信环境中 API不同 由于运行环境不同&#xff0c;所以小程序中&#xff0c;无法调用DOM和BOM的API. 但是…

如何使用 CSS 使表格居中(快速指南)

在网页设计中使用表格有一段有趣的历史。在采用 CSS 之前&#xff0c;表格不仅仅用于以传统方式显示表格数据练习列表&#xff0c;而是更常用于控制完整的页面布局。 那时&#xff0c;HTML 表格用于定义网页的结构和视觉外观&#xff0c;其中表格的位置可以直接在 HTML 中指定…

input详解之文件上传

input 全部类型 常用的并且能为大多数浏览器所识别的类型大概有&#xff1a;text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 1、一般类型 <!-- text类型 文本框 默认…

Vue2 Element DatePicker组件设置默认日期、控制日期范围

文章目录前言一、设置默认日期1.不要用placeholder2.设置动态的默认日期二、限制日期选取1.方案2.举例总结前言 以前都是做练习, 上周拿到这个任务直接被卡住… 一、设置默认日期 1.不要用placeholder 依然不使用placeholder属性, 在v-model初始就绑定了时间的情况下, 组件可…

vue导入处理Excel表格详解

目录1. 前言2.vue导入Excel表格2.1 使用ElementUI中的upload组件2.2 使用input文件上传3. 总体代码与效果4. 总结1. 前言 最近遇到前端导入并处理excel表格的情况&#xff0c;趁此机会刚好研究一下vue导入并处理excel数据&#xff1b;当然自己手撸一个工具没有那么多时间&#…

vue3 使用tinymce编辑器实现单/多图片上传,附件上传,视频上传

安装: 我用的是tinymce最新版本v6 npm install tinymce -S npm install tinymce/tinymce-vue -S 2.安装语言包:Language Packages | Trusted Rich Text Editor | TinyMCE 3.在项目public文件夹下--新建tinymce文件夹,安装包解压在该文件夹下 封装组件TEditor.vue <templa…

微信小程序实现上拉加载下拉刷新(即粘即用)

前言 去年有出过一篇关于 vue 实现上拉加载下拉刷新的功能&#xff0c;最近微信小程序中也用到了这个功能&#xff0c;下面一起来看看微信小程序中是怎么实现这个小功能的吧。 实现效果如下&#xff1a; 实现思路&#xff1a; 1. 首先需要在使用到的 json 文件下配置 "ena…

vue项目遇见事件冒泡如何处理

开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图&#xff0c;当我们点击页面某个元素时&#xff0c;会产生点击事件&#xff0c;事件由外到内&#xff0c;逐层递进&#xff08;事件捕获阶段&#xff0c;途中的1->2->3->4&#xff09…

DVWA靶场搭建

1.靶场是什么&#xff0c;靶场的搭建 在学习web安全的过程中&#xff0c;靶场是必不可少的&#xff0c;毕竟在计算机界&#xff0c;任何理论知识都不如实操 靶场就是人为提供的带有安全漏洞的服务&#xff0c;每一个学习者都可以在本地快速搭建来实操&#xff0c;回溯漏洞的发…

超好玩的js页面效果---实现数值的动态变化

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

JS实战——轮播图

目录 一、轮播图介绍 二、原理 三、轮播图基本htm布局 四、轮播图CSS布局 五、轮播图JS布局 六、轮播图效果 一、轮播图介绍 现在我们在很多网站上都能看到轮播图&#xff0c;像某东、某宝、某猫等等大小型网站上都有应用。下面就是某宝上的轮播图样式。 二、原理 将一些图…

【chatgpt谈前端三大主流框架】React、Vue和Angular的优缺点及如何选择

文章目录React优点缺点Vue优点缺点Angular优点缺点总结chatgpt号称无所不能&#xff0c;今天我们就来考考他&#xff0c;让他来对比下React、Vue和Angular。下面是chatgpt全部回答&#xff0c;大家觉得他分析得对吗&#xff1f;React、Vue和Angular都是目前最流行的前端框架&am…

【vue2】使用elementUI进行表单验证实操(附源码)

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue使用elementUI进行表单验证实操&#xff08;附源码&#xff09; 【前言】我们在构建一…

VUE 使用 vue create 命令 创建 vue2.0 项目

为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题&#xff0c;我们使用 管理员身份 打开命令行 第一步&#xff0c;打开命令行后&#xff0c;首先进入我们想要创建项目的目录下 g: 表示切换进入G盘 cd git 表示打开 当前盘下的 git 文件夹 大家可以根据以上…

如何解决 npm 安装依赖报错 ERESOLVE unable to resolve dependency tree

现代前端项目开发中依赖管理已经是不可或缺的一环&#xff0c;然后由于各种问题&#xff0c;如历史原因、项目缺少维护等&#xff0c;前端项目在依赖管理中会遇到非常多的问题。本篇文章讨论其中一种&#xff0c;当 npm install 时遇到报错 ERESOLVE unable to resolve depende…

百度文心一言对标 ChatGPT,你怎么看?

文心一言 VS ChatGPT接受不完美 期待进步里程碑意义文心一言初体验✔ 文学创作✔ 商业文案创作✔ 数理逻辑推算✔ 中文理解✔ 多模态生成写在最后何为文心&#xff1f;“文”就是我们中华语言文字中的文&#xff0c;“心”是希望该语言模型可以用心的去理解语言&#xff0c;用心…

手把手教你基于HTML、CSS搭建我的相册(上)

The sand accumulates to form a pagoda写在前面HTML是什么&#xff1f;CSS是什么&#xff1f;demo搭建写在最后写在前面 其实有过一些粉丝咨询前端该从什么开始学&#xff0c;那当然是我们的前端基础三件套开始学起&#xff0c;HTML、CSS、javaScript&#xff0c;前端的大部分…

pnpm学习

1、pnpm是什么&#xff1f; 现代的包管理工具 pnpm&#xff08; performant npm &#xff09;&#xff0c;意思是高性能的 npm 它由 npm/yarn 衍生而来&#xff0c;但却解决了 npm/yarn 内部潜在的 bug&#xff0c;并且极大了地优化了性能 2、特性概览 &#xff08;1&#x…

前端小技巧

1.html 1.1 网站自动刷新 应用场景&#xff1a; 网页定期自动刷新&#xff08;现在基本淘汰了&#xff0c;采用ajax&#xff09;&#xff1b;自动跳转到指定页面&#xff0c;这个自动跳转的好处就是不需要JS调用&#xff0c;属于纯html网页自动跳转 v7-网站自动刷新 你可以…