前端框架vue基础

最新推荐文章于 2024-06-06 10:11:10 发布
最新推荐文章于 2024-06-06 10:11:10 发布
阅读量1.7k 收藏 14
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyyibaobao/article/details/118051603
版权
typora-copy-images-to: E:\md文件\图片前端三要素HTML（结构）：超文本标记语言（Hyper Text Markup Language）决定网页的结构和内容CSS（表现）：层叠样式表（Cascading Style Sheets ）设定网页表现样式JavaScript（行为）：是一种弱类型脚本语言，启源代码不需要编译，而是由浏览器解析运行，用于控制行为结构层（HTML）表现层（CSS）css层叠样式表是一门标记语言，并不是编程语言，因此不可以定义变量，可以引用.
摘要由CSDN通过智能技术生成

typora-copy-images-to: E:\md文件\图片

前端三要素

  • HTML（结构）：超文本标记语言（Hyper Text Markup Language）决定网页的结构和内容
  • CSS（表现）：层叠样式表（Cascading Style Sheets ）设定网页表现样式
  • JavaScript（行为）：是一种弱类型脚本语言，启源代码不需要编译，而是由浏览器解析运行，用于控制行为

结构层（HTML）

表现层（CSS）

css层叠样式表是一门标记语言，并不是编程语言，因此不可以定义变量，可以引用，换句话说就是不具有任何语法支持，他主要缺陷如下：

  1. ​ 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多的重复选择器
  2. 没有变量和合理的样式重复机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护

导致无端添加了许多工作量，解决问题，前端开发人员会使用一中称为**【CSS预处理器】**的工具，提供缺失的样式层复用机制，减少冗余代码，提高代码的可维护性，提高开发效率

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者只要使用这种语言，进行css编码工作，用一种专门的编程语言，进行Web页面样式设计，在通过编译器转化为正常的CSS文件，以供项目使用

常见的CSS预处理器：
  • SASS：基于Ruby，通过服务器端处理，功能强大，解析效率高，需要学习Ruby语言，上手难度高于LESS
  • LESS：基于NodeJS，通过客户端处理，使用点单，功能SASS简单，解析效率低于SASS，实际开发中足够用，后端人员建议学习LESS

行为层（JavaScript）

javaScript 一门弱类型的脚本语言，启源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器有浏览器解析运行

Notive 原生JS开发

原生JS开发，也就是按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持

  • ES3
  • ES4(内部，未正式发布)
  • ES5（全浏览器都支持）
  • ES6（常用，主流版本：webpack打包成为ES5支持！）
  • ES7
  • ES8
  • ES9（草案阶段）

JavaScript 框架

  • jQuery：简化了DOM操作，缺点：Dom操作太频繁，影响前端性能，在前段眼里使用它仅仅为了兼容IE6、7、8
  • Angular：Google收购的前端框架，有一群java程序员开发，特点是将后台的MVC模式搬到了前端并增加了模块化开发概念，与微软合作，采用TypeScript语法开发，对后台程序员友好，对前端程序眼不友好
  • React：FaceBook出品，一款高性能的JS前端框架，特点提出了心的概念，**【虚拟DOM】用于减少真是的DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率，缺点是使用复杂，需要而外学习一门【JSX】**语言
  • Vue和Axios

image-20210117131635852

UI框架：

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • ElementUI i：iview、ice：饿了么出品，基于Vue的UI框架
  • Bootstrap：Twitter推出的一个用于前端开发的开源工具包
  • AmezeUI：“妹子UI”，一款HTML5跨屏前端框架

JavaScript 构建工具

  • Babel：JS编译工具，主要用于浏览器不支持ES新特性
  • WebPack：模块打包器，主要作用是打包、压缩、合并以及按序加载

三端统一

混合开发

​ 主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）能够调用设备底层赢件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

  • 云打包：Hbuild ——>HBuildX,DCloud吹牛；API Cloud
  • 本地打包：Cordova（前身是 PhoneGap）

微信小程序

UI开发的框架：WeUI

后端技术

image-20210117135130392

前端发展史

后端为主的MVC时代

为了降低开发复杂度，以后端为出发点，比如：Struts、SpringMVC等框架的使用，就是后端的MVC时代

image-20210117140554710

  • 发起请求到前端控制器（DispatcherServlet）
  • 前端控制器请求HandlerMapping查找Hander，可以根据xml配置、注解进行查找
  • 处理器映射器HnandlerMapping向前端控制器返回Handler
  • 前端控制器调用处理器适配器去执行Handler
  • Handler执行完成给适配器返回ModelAndView
  • 处理器适配器向前端控制器返回ModelAndView，ModelAndView是SpringMVC框架的一个底层对象，包括Model和View
  • 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图JSP
  • 视图解析器向前端控制器返回View
  • 前端控制器进行视图渲染，视图渲染将模型数据（在ModelAndView对象中）填充到request域
  • 前端控制器向用户响应结果
优点：

image-20210117142059055

缺点：

image-20210117142155382

基于AJAX带来的SPA时代

image-20210117142639669

image-20210117142700206

优点：

image-20210117142819573
image-20210117142832253

缺点：

image-20210117142937246

前端为主的MV* 时代

此处MV*模式下：

  • MVC（同步通向为主）：Model、View、Controller
  • MVP（异步通信为主）：Model、View、Presenter
  • MVVM（异步通信位置）：Model、View、ViewModel

为了降低复杂度，涌现出大量的前端框架，比如：AngularJS（提现了前端的mvc模式）、React（虚拟DOM）、Vue.js（把前两者结合起来了）、EmberJS等，这些框架的原则是按类型分层，比如Templates、Controller、Models，然后再从内层做切分

image-20210117144010689

优点：

image-20210117144132761

缺点：

image-20210117144252190

ModeJS带来的全栈时代

前端为主MV* 模式解决了很多问题，但是还存在不足的地方，随着NodeJS的兴起，JavaScript开始有能力运行服务端，意味着可以有一种新的开发模式：
image-20210117144836405

这种研发模式下，前后端的职责很清晰，对前端来说，两个UI层各司其职：

  • Front-end UI layer处理浏览器蹭的展现逻辑，通过css渲染样式，通过JavaScript添加交互功能，HTML的生成也可以放在这层，具体看应用场景
  • Back-end UI layer 处理器路由、模板、数据获取、Cookie等通过路由，前端终于可以自主把控URL Design，这样无论是单页应用还是多页应用，前端都可以自由调控，后端终于可以摆脱展现的强关注，转而可以专心与业务逻辑层的开发

​ 通过NodeJS，Web Server 层也是JavaScript代码，这意味着部分代码前后可以复用，需要SEO的场景可以再服务端同步渲染，由于一步请求太多导致的性能问题也可以通过服务端来缓解，前一种模式的不足，可以通过这种模式几乎能够完美解决

​ 与JSP模式相比，全栈模式是一种会，也的却是一种原始开发模式回归，不过是一种螺旋上升式的回归

基于NodeJS的全栈模式，依旧勉励很多挑战：

image-20210117145819950

Vue ：前端体系、前后端分离

​ 是一套用于构建用户的渐进式框架，发布于2014.2与其他的大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的和辛苦只关注视图层，不紧易于上手，还便于第三方库（vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合

Vue.js的API是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js

开发商：优雨溪

Soc （Separation of concerns）原则关注点分离 ：

HTML + CSS +JS : 视图：给用户看,刷新后台的数据
网络通信：axios

什么是MVVM

MVVM （Model-View -ViewModel） 是一种软件架构设计模式，有微软WPF（用于替代WinForm，以前就是这个技术开发桌面应用程序的）和Silverligth（类似与Java Applet，简单点就是浏览器上运行的WPF）的架构师Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式 由 John Gossman （同样也是WPF 和 Silverlight的架构师）于2005年在博客上发表

image-20210503175952681

Data Bindings 数据绑定 ViewModel把这些数据绑定在Vue（DOM）里面 ，ViewModel通过解析Model更新到View页面上 直接就是把Model里面定义的数据给他绑定到真实的DOM里面 ViewModel会监听View界面上的响应，然后回调到我们Model里面的定义的函数，然后就可以在这个Model的函数里面做更多的操作了

image-20210503181843226

MVVM源自于经典MVC（Model-View-Contrller）模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

image-20210117155337150

MVVM已经相当成熟，主要运用不仅仅在网络应用陈程序中开发中，当下流行的MVVM框架有Vue.js、Angular.js等

为什么使用MVVM

image-20210117155842348

MVVM 的组成部分

image-20210117145954655

View

image-20210117160143376

Model

image-20210117160158674

ViewModel

image-20210117160329091

MVVM 模式的实现者

  • Model：模型层，在这里表示javaScript对象
  • View：视图层，在这里表示DOM（HTML的操作元素）
  • ViewModel：连接视图和数据的中间件，Vue.js就是MVVM 中的ViewModel层实现者

在MVVM架构中，是不允许 数据 和 视图 直接通信的，只能通过ViewModel来通信，二ViewModel就是定义了一个Observer观察者

  • ViewModel能够观察导数据的变化，并对视图对应的内容进行更新
  • ViewModel能够监听到视图变化，并能能够通知数据发生改变

至此，我们就明白了，Vue.js就是一个MVVM的实现着，他的核心就是实现Dom监听与数据绑定

为什么使用Vue.js

image-20210117150702471

IDEA插件

Cdn引入Vue.js

第一种方式，下面引入的是2.5.16版本，开发环境的cdn版本(开发环境版本，包含了有帮助的命令行警告，这里可以查阅2.6.10版本：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

下面引入生产环境的cdn版本(生产环境版本，优化了尺寸和速度，这里可以查阅2.6.10版本：https://cdn.jsdelivr.net/npm/vue

Vue基本语法

v-bind

​ v-bind等被称为指令，指令带有前缀v-，以表示它们是提供的特殊特性，他们会在渲染DOM上应用特殊的响应式行为，在这里表示：“将这个元素节点的title特性和Vue实例的message属性保持一致”

当你打开浏览器的JavaScript控制台，输入app.message=“新消息”，就会再一次看到这个绑定了title特性的HTML已经进行了更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
最低0.47元/天 解锁文章
lyyibaobao
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
等风来
08-31 2万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
前端框架Vue（概述，特点，安装，helloWorld，模板语法，指令，组件）
qq_53677566的博客
12-28 1万+
这里写目录标题Vue什么是Vue.js?Vue.js优点Vue安装第一个Vue demo模板语法Vue指令Vue生命周期**Vue组件** Vue 什么是Vue.js? Vue(读音 /vjuː/，类似于 view())是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库之关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。 ​ Vue.js是前端的主流框架之一，和Angular.js，React.js,并成为前端三大主流框架 Vue.js优点
Vue（前端框架）
qq_42925518的博客
07-28 1万+
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3HiAnlx-1658970670003)(\java\8.框架\VUE\vue\Vue的介绍.PNG)]H
Vue 前端开发
weixin_41299062的博客
03-14 3676
Vue前端开发基础
web前端三大主流框架
数字人生
06-06 2929
它采用MVVM（Model-View-ViewModel）模式，通过数据绑定和依赖注入，将界面的状态和数据进行统一管理，提供了丰富的功能和特性，如路由管理、表单验证、模块化等。随着前端技术的发展，新的工具和框架也可能会逐渐崛起，成为开发者的新选择。这三个框架都具有自己独特的特性和优势，选择合适的框架取决于项目的需求、团队的技术栈和个人的偏好。总结来说，Angular、React和Vue.js是目前web前端开发领域的三大主流框架，它们各有特点，适用于不同的开发场景和需求。
Vue前端+快速入门【详解】
qq_1424674116的博客
03-04 2315
1.MVVM思想原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来View: 视图，用于展示数据的各种html标签ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色。
前端框架vue面试题.pdf
07-16
前段VUE面试题
前端vue框架基础知识
最新发布
06-11
vue是一套构建用户界面的渐进式（用到哪一块就用哪一块，不需要全部用上）前端框架，Vue 的核心库只关注视图层；Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性，但它支持...
前端框架vue react面试资料
03-01
在当前的IT行业中，前端开发领域占据着举足轻重...总之，这份“前端框架Vue React面试资料”涵盖了从基础到高级的多个方面，将助你在面试中展现出对这两个框架的深入理解和实践能力，为你的职场和发展打下坚实的基础。
前端开发框架vue.js
04-02
Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
一个Vue前端框架使用简单实例
01-07
Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。下文是Vue的简单使用并使用nginx进行...
前端Vue框架
热门推荐
Mr_Jin的博客
11-15 1万+
封装了HTML，CSS ，JS的代码 按需搭建 特点：是一个轻量级的前端框架，双向绑定，数据动态更新 是一个渐进式的框架，其核心是数据驱动，组件化前端开发 Vue关注的，操作的是数据， 第一步：需要将vue.js文件导入到你的工程中 并把文件引入到html中 第二步：准备解析vue的数据，渲染区 展示的形式必须是 {{xxx}} 第三步：给第二步准备数据,需要写在script中，因为vue是基....................................
Vue 前端代码风格指南
Mr.小灰狼_随笔
08-17 4707
Vue 前端代码风格指南 代码规范是一个非常重要的事情 ，很多企业都有自己的代码规范体系 ，而在不同阶段体系 HTML 、CSS、JS 也有代码规范 ! 那么到了后期框架和库阶段规范你知道吗 ? 今天为大家分享一组热门框架 VUE 的代码风格规范指南 ， 希望后续在写 Vue 方面代码有所帮助 ! 目录 一、命名规范 1.1、项目文件命名 1.2、Vue 组件命名 1.3、代码参数命名 二、代码规范 2.1、Vue 2.2、HTML 2.3、CSS 2.4、JavaScript 三、注释规范 四、其它...
Vue基础用法-指令(一)
qq_46199553的博客
08-24 414
vue 简介 1. 什么是 vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 2. vue 的特性 vue 框架的特性，主要体现在如下两方面： ①
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3361
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
VUE 常用指令
qq_55624813的博客
11-04 1469
目录 Vue概念 同类产品 官网 特点 渐进式框架 入门案例.html 改造入门案例.html MVVM框架 基础语法 运算符 operator 方法 methods Vue解析数据 三种data值的写法 高级用法：v-命令 指令集 双向绑定 v-model 闪现 v-cloak 判断 v-if v-else-if 循环 v-for 事件 v-on 绑定 v-bind v-html v-text 小结 Vue组件 概述 使用 测试 Vue的Aj
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
前端框架vue3教程
05-21
Vue.js是一个流行的前端框架，Vue 3是它的最新版本。相比于Vue 2，Vue 3增加了很多新特性，比如更好的性能、更好的TypeScript支持等等。如果您想学习Vue 3，可以按照以下步骤进行： 1. 学习Vue.js基础知识。如果您...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值