靡语IT:Vue精讲(一)

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.mfbz.cn/a/405111.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

unity学习(30)——跳转到角色选择界面(跳转新场景)

1.在scene文件夹中&#xff08;[siːn]&#xff09;&#xff0c;右键->create->scene&#xff0c;名字叫SelectMenu&#xff08;选择角色场景&#xff09;。 2.把新建场景拖拽到hierarchy[ˈhaɪərɑːki]中。 3.此时才能在file->build setting中Add open scene&…

图解李白的“朋友圈”

《长安三万里》作为2023年票房第一的国漫电影&#xff0c;以安史之乱为背景&#xff0c;从诗人高适的视角铺设了一幅绚丽的历史长卷&#xff0c;细细讲述“诗仙”李白跌宕起伏的一生&#xff0c;以及大唐盛世一路荣耀幻灭的唏嘘。同时&#xff0c;在这部动画电影中出现了多位大…

【了解机器学习的定义与发展历程】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱 简述概要 了解机器学习的定义与发展历程 知识图谱 机器学习&#xff08;Machine Learning&#xff0c;ML&#xff09;是一门跨学科的学科&#xff0c;它使用计算机模拟或实现人类学习行为&#xff0c;通…

HTML5新婚、年会、各种聚会的现场抽奖活动(附源码)

文章目录 1.抽奖平台设计来源1.1 主界面效果1.2 抽奖效果1.3 中奖效果 2.效果和源码配置2.1 动态效果2.2 人员信息配置2.3 奖品信息配置2.4 抽奖音效配置2.5 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/deta…

UnityWebGL 设置全屏

这是Unity导出Web默认打开的页面尺寸 修改后效果 修改 index.html 文件 1.div元素的id属性值为"unity-container"&#xff0c;宽度和高度都设置为100%&#xff0c;意味着该div元素将占据整个父容器的空间。canvas元素的id属性值为"unity-canvas"&#xff…

liunx docker 安装 nginx:stable-alpine 后报500错误

参考:docker使用nginx部署网站报500错误_docker nginx 500-CSDN博客 重启容器后访问,正常

在面试中,如何回复擅长 Vue 还是 React

目录 一、Vue.JS 二、React 三、Vue和React的区别 四、前端开发框架 一、Vue.JS Vue.js&#xff08;通常简称为Vue&#xff09;是一个用于构建用户界面的开源JavaScript框架。它采用了MVVM&#xff08;Model-View-ViewModel&#xff09;的架构模式&#xff0c;通过数据驱动…

C语言——指针——第1篇——(第19篇)

坚持就是胜利 文章目录 1.指针是什么2.指针和指针类型&#xff08;1&#xff09;指针 - 整数&#xff08;2&#xff09;指针 的 解引用 3.野指针(1)野指针成因1.指针未初始化2.指针越界访问3.指针指向的空间释放 (2)如何规避野指针1.指针初始化2.小心指针越界3.指针指向的空间…

Vue+SpringBoot打造生活废品回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案&#xff0c;旨在鼓…

FreeBSD如何进行系统升级

为什么要升级 原因是当前在使用的版本是12.4&#xff0c;官方已经停止维护了&#xff0c;而且找了几个国内的镜像站也不维护了&#xff0c;导致pkg工具都无法安装&#xff0c;干脆直接进行系统升级。 FreeBSD的系统升级 目前打算升级到13.2-RELEASE版本 获取目前版本需要的…

前端快速网格布局

直接进去CSS Grid Generator 真的好方便&#xff1a;

Python实战:读取MATLAB文件数据(.mat文件)

Python实战&#xff1a;读取MATLAB文件数据(.mat文件) &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 &#x1f448; 希望得到您的订阅…

go RPC编程

1、golang中如何实现RPC golang中实现RPC非常简单&#xff0c;官方提供了封装好的库&#xff0c;还有一些第三方的库 golang官方的net/rpc库使用encoding/gob进行编解码&#xff0c;支持tcp和http数据传输方式&#xff0c;由于其他语言不支持gob编解码方式&#xff0c;所以gol…

【某机构vip教程】Requests(6):Requests模块_超时设置

超时设置 Requests模块可以设置接收数据的超时时间&#xff0c;超出设定的时间还没有数据返回&#xff0c;就抛出异常。超时设 置有两种类型表达&#xff1a;float 、tuple timeout():以秒为单位 如果远端服务器很慢&#xff0c;你可以让 Request 永远等待&#xff0c;传入一…

【LeetCode: 889. 根据前序和后序遍历构造二叉树 + DFS】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

研学活动报名平台系统功能清单

中小学生社会实践活动、研学旅行等素质教育活动报名与管理平台&#xff0c;功能包含&#xff1a;活动分类&#xff0c;活动管理&#xff0c;在线报名缴费&#xff0c;扫码核销&#xff0c;会员特权体系&#xff0c;在线商城&#xff0c;研学互动。系统支持入驻老师自行创建研学…

jenkins配置ssh的时候测试连接出现Algorithm negotiation fail

背景&#xff1a;当jenkins升级后&#xff0c;同时ssh插件也升级&#xff0c;测试ssh连接的时候 出现的问题&#xff1a; com.jcraft.jsch.JSchAlgoNegoFailException: Algorithm negotiation fail: algorithmName"server_host_key" jschProposal"ecdsa-sha2-n…

QSettings使用示例

解决的问题&#xff1a; 平常要存储一些临时数据&#xff0c;或者ini的系统参数数据&#xff0c;以下是源码解析 如何实现&#xff1a; 实现的UI如下 主要功能&#xff1a; 初始化&#xff1a; m_settings new QSettings("DParamSetting.ini", QSettings::IniFo…

springboot+vue项目基础开发(13)vue的注册页面

1创建页面 在view下面创建Login.vue 编写login.vue的代码 <script setup> import {User,Lock} from @element-plus/icons-vue import {ref } from vue&#

【JavaEE】_Servlet程序的编写方法

目录 1. 创建项目 2. 引入依赖 3. 创建目录结构 3.1 在main目录下创建一个webapp目录 3.2 在webapp目录下创建一个WEB-INF目录 3.3 在WEB-INF目录下创建一个web.xml文件 3.4 在web.xml中进行代码编写 4. 编写代码 4.1 在java目录下创建类 4.2 打印"hello world&…
最新文章