靡语IT:Vue精讲(一)

news2024/11/25 9:56:19

Vue简介

发端于2013年的个人项目,已然成为全世界三大前端框架之一,在中国大陆更是前端首选。

它的设计思想、编码技巧也被众多的框架借鉴、模仿。

纪略

Ø 2013年,在Google工作的尤雨溪,受到Angular的启发,从中提取自己所喜欢的部分,开发出了一款轻量框架,最初命名为Seed。

[尤雨溪]  

Ø 同年12月,这粒种子发芽了,更名为Vue,版本号是0.6.0。

Ø 2014.01.24,Vue正式对外发布,版本号是0.8.0。

Ø 发布于2014.02.25的0.9.0,有了自己的代号:Animatrix,这个名字来自动画版的《骇客帝国》,此后,重要的版本都会有自己的代号。

[Animatrix电影海报]  

Ø 0.12.0发布于2015.06.13,代号Dragon Ball,这一年,Vue迎来了大爆发,Laravel 社区(一款流行的 PHP 框架的社区)首次使用 Vue(我也是在这个论坛上认识Vue的),Vue在JS社区也打响了知名度。

[Dragon Ball]  

Ø 1.0.0 Evangelion(新世纪福音战士)是Vue历史上的第一个里程碑。同年,vue-router(2015-08-18)、vuex(2015-11-28)、vue-cli(2015-12-27)相继发布,标志着 Vue从一个视图层库发展为一个渐进式框架。很多前端同学也是从这个版本开始成为Vue的用户。

[Evangelion]  

Ø 2.0.0 Ghost in the Shell(攻壳机动队)是第二个重要的里程碑,它吸收了React的Virtual Dom方案,还支持服务端渲染。

[Ghost in the Shell]  

Ø 就在不久前,Vue发布了2.6.0 Macross(超时空要塞),这是一个承前启后的版本,因为在它之后,3.0.0也呼之欲出了。

[Macross]  

注:咱们学习的3.0版本可以猜一猜这个老二次元动漫迷会起什么名字

Vue是什么?

Vue概念

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面渐进式 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

用户界面

基于数据渲染出用户看到的页面。说白了就是用Vue往HTML页面中填充数据。

[构建用户界面]  

渐进式

渐进式是一种设计理念,即在不失去当前功能的前提下,逐步添加新的功能和特性。

声明式渲染:需要声明在哪里要做什么,不需要关心具体实现。

框架

框架就是整个或部分系统可重用的设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架。

可以说,一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方法,它为构件复

用提供了上下文(Context)关系。因此构件库的大规模重用也需要框架。

应用框架的概念也很简单。它并不是包含构件应用程序的 小片程序,而是实现了某应用领域通用完备功能(除去特殊应用的部分)的底层服务。使用这种框架的编程人员可以在一个通用功能已经实现的基础上开始具体的系 统开发。框架提供了所有应用期望的默认行为的类集合。具体的应用通过重写子类(该子类属于框架的默认行为)或组装对象来支持应用专用的行为。

简单来说 原生:自己盖房子

框架:毛坯房,自己装修。

[Vue中文官网]  https://cn.vuejs.org/ 


Vue快速上手

接下来我们要一起创建第一个属于自己的Vue页面咯!!!

[Vue实例过程]  

<div id="app">
    {{msg}}
</div>
<script src="Vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "靡语IT!",
        }
    })
</script>

输出结果:靡语IT!

代码注释
<div id="app">//准备要被Vue操作的容器,一个div
    {{msg}}
</div>
<script src="Vue.js"></script>//引包,引入官网下载的Vue文件
<script>
    new Vue({//创建vue实例来操作容器
        el: '#app',//el挂在要操作的容器,也就是id是app的div
        data: {//实现Vue的功能
            msg: "靡语IT!",
        }
    })

注:现在你已经写出了第一个Vue页面了,快去用Vue写一个淘宝吧!!!


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

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

相关文章

如何在Shopee平台上进行杯子选品:策略指南

在当今电商平台激烈竞争的环境下&#xff0c;卖家在Shopee平台上进行杯子选品需要经过深思熟虑的策略。通过市场趋势分析、竞品研究、产品差异化、供应链稳定性、利润分析、季节性和节日考量、客户反馈、营销策略、数据驱动选品以及持续优化&#xff0c;卖家可以提高杯子产品在…

基于全卷积网络的彩色显微图像光照不均匀校正

参考&#xff1a;论文英文题目&#xff1a;Correction of uneven illumination in color microscopic image based on fully convolutional network 参考论文链接&#xff1a;https://opg.optica.org/oe/fulltext.cfm?urioe-29-18-28503&id457387 在做显微图像相关任务是…

离散化学习笔记(超详细)

离散化学习笔记 什么是离散化 对于“什么是离散化”&#xff0c;搜索帖子你会发现有各种说法&#xff0c;比如“排序后处理”、“对坐标的近似处理”等等。哪个是对的呢&#xff1f;哪个都对。关键在于&#xff0c;这需要一些例子和不少的讲解才能完全解释清楚。 离散化是程序…

微服务篇之分布式系统理论

一、CAP定理 1.什么是CAP 1998年&#xff0c;加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式系统有三个指标&#xff1a; 1. Consistency&#xff08;一致性&#xff09;。 2. Availability&#xff08;可用性&#xff09;。 3. Partition tolerance &#xff0…

APEX开发过程的一个细节

开发过程中发现有一些特殊代码命名有要求 比如 代码&#xff1a; select "project_id",null LINK_CLASS,apex_page.get_url(p_items > P201_PROJECT_ID, p_values > "project_id") LINK,null ICON_CLASS,null LINK_ATTR,null ICON_COLOR_CLASS,cas…

Sora----打破虚实之间的最后一根枷锁----这扇门的背后是人类文明的晟阳还是最后的余晖

目录 一.Sora出道即巅峰 二.为何说Sora是该领域的巨头 三.Sora无敌的背后究竟有怎样先进的处理技术 1.Spacetime Latent Patches 潜变量时空碎片&#xff0c;建构视觉语言系统 2.扩散模型与Diffusion Transformer&#xff0c;组合成强大的信息提取器 3.DiT应用于潜变量时…

【python 的各种模块】(10) 在python3使用turtle 模块画图

目录 1 在anaconda里用python3安装turtle 1.1 因为turtle 本来是适应python2的&#xff0c;所以直接安装报错 1.2 准备好手动下载&#xff0c;官网下载安装包 1.2.1 去官方手册看了下&#xff0c;其实是支持python3的 1.2.2 官网下载&#xff0c;手动安装 1.3 解决办法&…

【Spring】IoC容器 控制反转 与 DI依赖注入 配置类实现版本 第四期

文章目录 基于 配置类 方式管理 Bean一、 配置类和扫描注解二、Bean定义组件三、高级特性&#xff1a;Bean注解细节四、高级特性&#xff1a;Import扩展五、基于注解配置类方式整合三层架构组件总结 基于 配置类 方式管理 Bean Spring 完全注解配置&#xff08;Fully Annotatio…

MATLAB环境下基于短时傅里叶变换和Rényi熵的脑电信号和语音信号分析

傅里叶变换是不能很好的反映信号在时域的某一个局部范围的频谱特点的&#xff0c;这一点很可惜。因为在许多实际工程中&#xff0c;人们对信号在局部区域的特征是比较关心的&#xff0c;这些特征包含着十分有用的信息。这类信号因为在时域(或者是空间域)上具有突变的非稳定性和…

切比雪夫(最小区域法)圆拟合算法

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 本期话题&#xff1a;切比雪夫&#xff08;最小区域法&#xff09;直线拟合算法 相关背景和理论 点击前往 主要介绍了应用背景和如何转化成线性规划问题 圆拟合输入和…

WordPress使用

WordPress功能菜单 仪表盘 可以查看网站基本信息和内容。 文章 用来管理文章内容&#xff0c;分类以及标签。编辑文章以及设置分类标签&#xff0c;分类和标签可以被添加到 外观-菜单 中。 分类名称自定义&#xff1b;别名为网页url链接中的一部分&#xff0c;最好别设置为中文…

Uniapp + VUE3.0 实现双向滑块视频裁剪效果

效果图 <template><view v-if"info" class"all"><video:src"info.videoUrl"class"video" id"video" :controls"true" object-fit"fill" :show-fullscreen-btn"false"play-btn…

极电电子WMS项目顺利验收,盘古信息助推新能源车企数字化转型

近年来&#xff0c;中国新能源汽车产销持续保持着较高增速&#xff0c;产销总量连续9年位居全球第一。 在产销高涨的背后&#xff0c;新能源汽车行业“内卷”现象也日益加剧&#xff0c;“配置战”、“价格战”等愈发激烈&#xff0c;驱动车企提高自身竞争力&#xff0c;以抢占…

基于AdaBoost算法的情感分析研究-微博情感分析-文本分类

基于AdaBoost算法的情感分析研究 摘 要 随着互联网的快速发展&#xff0c;各类社交媒体平台如微信、QQ等也与日俱增&#xff0c;而微博更是集成了传统网站、论坛、博客等的优点&#xff0c;并加上了人与人之间的互动性、关系亲密程度等多种智能算法&#xff0c;并以简练的形式…

华清远见嵌入式学习——驱动开发——day9

目录 作业要求&#xff1a; 作业答案&#xff1a; 代码效果&#xff1a; ​编辑 Platform总线驱动代码&#xff1a; 应用程序代码&#xff1a; 设备树配置&#xff1a; 作业要求&#xff1a; 通过platform总线驱动框架编写LED灯的驱动&#xff0c;编写应用程序测试&…

Docker容器故障排查与解决方案

Docker是一种相对使用较简单的容器&#xff0c;我们可以通过以下几种方式获取信息&#xff1a; 1、通过docker run执行命令&#xff0c;或许返回信息 2、通过docker logs 去获取日志&#xff0c;做有针对性的筛选 3、通过systemctl status docker查看docker服务状态 4、通过…

React学习——快速上手

文章目录 初步模块思维 初步 https://php.cn/faq/400956.html 1、可以手动使用npm来安装各种插件&#xff0c;来从头到尾自己搭建环境。 如&#xff1a; npm install react react-dom --save npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-rea…

一休哥助手网页版如何使用

一休哥助手网页版可以使用GPT4提问了&#xff0c;具体操作流程如下&#xff1a; 1.登录网页版一休哥助手&#xff08;首次打开页面时&#xff0c;初始化久一点&#xff0c;请耐心等一下&#xff09; https://www.fudai.fun 2.登录后就可以使用GPT4了 3.你还可以自定义系统角色…

备战蓝桥杯---基础算法刷题1

最近在忙学校官网上的题&#xff0c;就借此记录分享一下有价值的题&#xff1a; 1.注意枚举角度 如果我们就对于不同的k常规的枚举&#xff0c;复杂度直接炸了。 于是我们考虑换一个角度&#xff0c;我们不妨从1开始枚举因子&#xff0c;我们记录下他的倍数的个数sum个&#…

c++笔记理解

1.封装 &#xff08;1&#xff09;构造函数不是必须在的 可以通过行为修改属性 &#xff08;2&#xff09;private和protected区别在于继承那里要学 &#xff08;3&#xff09;类默认是私有&#xff0c;struct是共有 私有的好处&#xff1a;控制数据的有效性&#xff0c;意…