VUE 前端框架学习总结


Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
视图层即页面展示(给用户看的部分),刷新后台给的数据:HTML + CSS + JS


Vue 只负责视图层,其他前端部分有以下技术解决
网络通信 : axios
页面跳转 : vue-router
状态管理:vuex
Vue-UI : ICE , Element UI


文章目录

  • 一、前端核心分析
    • 1 Vue 框架简介
    • 2 前端三要素
    • 3 前端三大 JavaScript 框架 ( Angular、React、Vue)
  • 二、前端设计模式(MVVM 模式)
  • 三、编写第一个 Vue 程序


一、前端核心分析


1 Vue 框架简介


        Vue 框架简介:Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router: 跳转,vue-resource: 通信,vuex:管理)或既有项目整合



2 前端三要素

  • HTML (结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容

  • CSS (表现) :层叠样式表(Cascading Style sheets) ,设定网页的表现样式

  • JavaScript (行为) :是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为



3 前端三大 JavaScript 框架 ( Angular、React、Vue)


  • Angular 框架 :

    • Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)

  • React 框架 :

    • Facebook出品,一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作,在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门[JSX] 语言;

  • Vue 框架:

    • 一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;

      • Axios 框架:
        • 前端通信框架;因为Vue 的边界很明确,就是为了处理DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;



二、前端设计模式(MVVM 模式)




三、编写第一个 Vue 程序



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

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

相关文章

探索WPF控件内容模型的四大支柱

WPF 内容模型 WPF控件内容模型主要指派生于System.Windows.Controls.Control类的各种控件,有四个可包含任意内容的类。 下表列出了继承自 Control 的类。 ContentControl:用于包含一段任意类型的内容。但是只能包含一个子元素作为其“内容”。它可以包…

arm服务器和麒麟v10安装nacos

在arm飞腾服务器和麒麟V10SP3上安装nacos 服务器和系统版本 ############## Kylin Linux Version ################# Release: Kylin Linux Advanced Server release V10 (Lance)Kernel: 4.19.90-52.22.v2207.ky10.aarch64Build: Kylin Linux Advanced Server release V10 (S…

图像分割deeplab系列

DeepLab系列是谷歌团队提出的一系列语义分割算法。DeepLab v1于2014年推出,并在PASCAL VOC2012数据集上取得了分割任务第二名的成绩,随后2017到2018年又相继推出了DeepLab v2,DeepLab v3以及DeepLab v3。DeepLab v1的两个创新点是空洞卷积&am…

【Python】新鲜出炉的海洋捕食者算法Python版本

2020年发表的海洋捕食者算法《Marine Predators Algorithm: A nature-inspired metaheuristic》。 作者只在原论文中给出了MATLAB代码,网上也没有Python版本,我自己用Python重写了MATLAB代码。 """2020海洋捕食者算法 """…

spaceship

通过数字平台启动您的网站、想法和未来,该平台旨在提供和连接您所需的域、托管、电子邮件和 Web 工具,并让您完全掌控 如果需要购买可以开5347的卡,点击获取

python 多线程 简介

python多线程简介 多线程的概念是相对单线程而言的。所谓单线程是指CPU在处理完成一项任务之前是不会开始处理第二件任务的。简单来说,单线程在执行任务时是有一定的顺序的。而随着科技的进步,CPU等计算机组件的升级换代日新月异,CPU处理速度…

小学信息科技Python课程第2课:坐标与画笔

一、turtle画布与坐标系 在同一平面互相垂直且有公共原点的两条数轴构成平面直角坐标系。在坐标系中,水平方向的轴都称为x轴,垂直方向的轴都称为y轴 它们相交于O点,在这一个点里,x轴的值为0,y轴的值也为0,所…

掌握 Vue 响应式系统,让数据驱动视图(下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

SpringBoot全局配置Long转String丢失精度的问题解决

第一种方式 简单粗暴,将所有的Long类型,改为String,数据库改成varchar类型; 第二种方式 自己建个配置类 extends WebMvcConfigurerAdapter 已经被弃用,直接实现WebMvcConfigurer该接口就行了 EnableWebMvc Config…

什么是网络数据抓取?有什么好用的数据抓取工具?

一、什么是网络数据抓取 网络数据抓取(Web Scraping)是指采用技术手段从大量网页中提取结构化和非结构化信息,按照一定规则和筛选标准进行数据处理,并保存到结构化数据库中的过程。目前网络数据抓取采用的技术主要是对垂直搜索引…

DNS解析和它的三个实验

一、DNS介绍 DNS:domain name server 7层协议 名称解析协议 tcp /53 主从之间的同步 udp/53 名字解析 DNS作用:将域名转换成IP地址的协议 1.1DNS的两种实现方式 1.通过hosts文件(优先级最高) 分散的管理 linux /etc/hos…

深度生成模型(Deep Generative Models)

什么是机器学习 深度生成模型(Deep Generative Models)是一类利用深度学习方法生成新样本的模型。这些模型通常被用于生成与训练数据集相似的新数据,例如图像、文本或音频。深度生成模型的两个主要类型是生成对抗网络(GANs&#…

QA面试题

1、质量保证(QA)是什么? QA代表质量保证。QA 是一组活动,旨在确保开发的软件满足 SRS 文档中提到的所有规范或要求。QA 遵循 PDCA 循环: 计划/Plan - 计划是质量保证的一个阶段,组织在此阶段确定构建高质量软件产品所需的过程。做…

日志审计系统Agent项目创建——读取日志文件(Linux版本)

紧接着上一篇的分享,继续做日志文件的读取,点击连接即可日志文件初始化https://blog.csdn.net/wjl990316fddwjl/article/details/135553238 1、将指针移动到文件末尾 //文件移动到结尾fseek(fp, 0, SEEK_END); 2、定义当前指针的位置 lastPosition ft…

搭建算法日志自检小系统

&#x1f952; 前言 目前演示的是一个工具&#xff0c;但如此&#xff0c;未来完成有潜力可以演变为一整套系统。 &#x1f451;现场人员自检失败表计点位教程V2.0 NOTE: 如果没有“logfiles-meter-tool“目录的请联系我们进行提供&#xff01; &#x1f447; 进入<dist>…

WEB 3D技术 three.js 阴影属性

上文 WEB 3D技术 three.js 光照与阴影 我们说了阴影 那么 我们继续将阴影的属性 目前 我们的代码 import ./style.css import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";//创建相机 cons…

【Git】的工作流程简介

目录 Git的工作区域Git的基本流程 1.将工作区的代码添加到暂存区2.将暂存区的文件提交到本地仓库3.将暂存区的文件提交到远程仓库 Git的工作区域 Git的基本流程 图形化方式操作 命令行模式&#xff08;Linux系统常用&#xff09;操作 1.将工作区的代码添加到暂存区 查看文件状…

蓝桥杯基础知识4 swap()、reverse()

蓝桥杯基础知识4 swap()、reverse() #include <bits/stdc.h> using namespace std;int main(){int a 10,b 20;cout << a << << b <<\n; //10 20swap(a,b);cout << a << << b <<\n; //20 10return 0; } C 在线工具 |…

CES 2024上的AI亮点

以下是CES 2024前两天AI方面亮点&#xff1a; 一个AI助手&#xff0c;取代你的智能手机应用程序的rabbit.tech人工智能驱动的捆绑式鞋子被称为“Moonwalkers”&#xff0c;可以让你走得更快 FitXR Slam的VR和健身创新WeHead的人工智能能给ChatGPT一张脸世界上第一个高清触觉游…

OpenCV-19图像的仿射变换

放射变换是图像旋转&#xff0c;缩放&#xff0c;平移的总称&#xff0c;具体的做法是通过一个矩阵和原图片坐标进行计算&#xff0c;得到新的坐标&#xff0c;完成变换&#xff0c;所以关键就是这个矩阵。 一、仿射变换之图像平移 使用API------warpAffine&#xff08;src &…