靡语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的divdata: {//实现Vue的功能msg: "靡语IT!",}})

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


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

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

相关文章

4 编写达梦插件包

1、初始化达梦数据库 具体脚本可以参考: https://github.com/nacos-group/nacos-plugin/blob/develop/nacos-datasource-plugin-ext/nacos-dm-datasource-plugin-ext/src/main/resources/schema/nacos-dm.sql

学生个性化成长平台搭建随笔记

1.Vue的自定义指令 在 Vue.js 中&#xff0c;我们可以通过 Vue.directive() 方法来定义自定义指令。具体来说&#xff0c;我们需要传递两个参数&#xff1a; 指令名称&#xff1a;表示我们要定义的指令名称&#xff0c;可以是一个字符串值&#xff0c;例如&#xff1a;has-rol…

腾讯云宝塔Linux安装Mysql5.7

一、下载官方mysql包 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm二、安装mysql包 rpm -ivh mysql-community-release-el7-5.noarch.rpm三、安装mysql yum install mysql-community-server -y四、启动数据库 systemctl start mysqld.service…

【黑马程序员】C++模版

20240214 文章目录 C泛型编程技术模版的概念 函数模版函数模版语法不使用模版的模版完成两个数交换使用模版的方式完成两个数的交换模版注意事项函数模版案列使用模版实现升序选择排序 模版函数和普通函数区别点调用规则 模版的局限性模版的通用性问题模版重载 类模板类模板语…

C++:fstream用法

本文主要讲了通过fstream实现视频文件的传输过程。 #include <iostream> #include <fstream>using namespace std;int main(void) {ifstream fstrm_read("946709172.avi", ios::binary);ofstream fstrm_write("test.avi", ios::app);char vid…

网络安全笔记总结

IAE引擎 1.深度检测技术--DFI和DPI技术 DFI和DPI都是流量解析技术&#xff0c;对业务的应用、行为及具体信息进行识别&#xff0c;主要应用于流量分析及流量检测。 DPI&#xff1a;深度包检测技术 DPI是一种基于应用层的流量检测和控制技术&#xff0c;对流量进行拆包&#x…

windows下快速安装nginx 并配置开机自启动

1、下载地址&#xff1a;http://nginx.org/en/download.html 2、启动nginx 注意⚠️ 不要直接双击nginx.exe&#xff0c;这样会导致修改配置后重启、停止nginx无效&#xff0c;需要手动关闭任务管理器内的所有nginx进程。 在nginx.exe目录&#xff0c;打开命令行工具&#xf…

JVM——感谢黑马程序员官方文档

JVM——感谢黑马程序员官方文档 一、JVM介绍1.什么是JVM&#xff1f;2.有什么好处3.学习路线 二、内存结构1.程序计数器(Program Counter Registe)1.定义2.作用3.特点4.演示 2.虚拟机栈(Java Virtual Machine Stacks)1.定义2.演示3.问题解析4.栈内存溢出5.线程运行诊断&#xf…

物麒平台自定义事件代码修改流程

是否需要申请加入数字音频系统研究开发交流答疑群(课题组)&#xff1f;可加我微信hezkz17, 本群提供音频技术答疑服务&#xff0c;群赠送蓝牙音频&#xff0c;DSP音频项目核心开发资料, 1 配置工具对应关系 2 事件处理 3 事件定义 4

Kotlin filterIsInstance filterNotNull forEach

Kotlin filterIsInstance filterNotNull forEach fun main(args: Array<String>) {val i1 MyItem(1, 1)val i2: MyItem? nullval i3: Int 3val i4 "4"val i5 nullval i6 MyItem(6, 6)val list mutableListOf<Any?>(i1, i2, i3, i4, i5, i6)lis…

mb和k哪个大?

在计算机和数字化领域&#xff0c;我们经常听到MB&#xff08;兆字节&#xff09;和KB&#xff08;千字节&#xff09;这两个单位。但究竟哪个更大呢&#xff1f;本文将介绍这两个单位的含义&#xff0c;并介绍使用压缩软件将文件由MB缩小为KB的方法。 1. MB和KB的含义 MB&…

VM-UNet: Vision Mamba UNet for Medical Image Segmentation

VM-UNet: 基于纯 Mamba 架构的医学图像分割模型 论文地址&#xff1a;https://arxiv.org/abs/2402.02491 项目地址&#xff1a;https://github.com/JCruan519/VM-UNet Abstract 在医学图像分割领域&#xff0c;基于CNN和基于Transformer的模型都得到了广泛的探索。然而&#…