路由一对一的映射关系
vue中的路由: 路径与组件之间的映射关系
SPASingle Page Application,单页面应用(SPA): 所有功能在 一个html页面 上实现
开发分类
实现方式
页面性能
开发效率
用户体验
学习成本
首屏加载
SEO
单页
一个html页面
按需更新,性能高
高
非常好
高
慢
差
多页
多个html页面
整页更新,性能低
中等
一般
中等
快
优
优点:按需更新性能高,开发效率高,用户体验好
缺点:学习成本,首屏加载慢,不利于SEO
应用场景:系统类网站 / 内部网站 / 文档类网站 /移动端站点
vue中的路由插件vuerouter
作用:修改访问地址栏路径时,切换显示匹配的组件
VueRouter的基本使用步骤:1.下载
2.引入
3.安装注册
4.创建路由对象
5.注入,将路由对象注入到new Vue实例中,建立关联
两个核心步骤
创建需要的组件(views)目录,配置路由规则
封装抽离路由模块,好处:拆分模块:利于维护
123456789101112131415161718 ...
工程化开发什么是前端工程化?前端工程化开发是一种通过使用各种工具、技术和最佳实践来提高前端开发效率、质量和可维护性的方法。它旨在将前端开发从简单的代码编写转变为一个更系统化、自动化的过程,以便团队能够更高效地协作、管理代码库、处理依赖关系,并确保最终交付的前端应用具有稳定性和性能优势。
前端工程化的核心概念和实践包括:
模块化开发: 将前端代码拆分为小模块,每个模块专注于特定的功能。这有助于代码的可维护性、复用性和团队协作。
包管理器: 使用工具如npm或Yarn来管理项目所需的外部依赖库。这可以确保项目依赖的版本一致性,并简化依赖的安装过程。
构建工具: 使用工具如Webpack、Parcel或Rollup来自动化构建过程,包括合并、压缩、转换代码以及处理资源文件,从而减少手动操作,优化性能并生成生产就绪的代码。
代码分割和懒加载: 通过将代码拆分成更小的块,并在需要时按需加载,从而减少初始加载时间,提高页面性能。
自动化测试: 实施单元测试、集成测试和端到端测试,以确保代码在不同层面上的质量和稳定性。
版本控制: 使用工具如Git来管理代码版本,使团队能够协同开发、解决冲突,并轻 ...
初识Vuevue是什么?
在vue官网的简介是:用于 构建用户界面1 的 渐进式2 框架3
构建用户界面:基于数据动态渲染出用户看到的页面
渐进式:循序渐进逐步学习,使用
框架:一套完整的项目解决方案,可以极大地提高开发的效率
既然那么好用,让我们来盘一盘这个vue
vue中的MVVM
M指的是model(模型),对应data中的数据。
V指的是view(视图),一个展示用户界面的模板,可以简单的理解为HTML标签页面。
MV指的是ViewModel(视图模层),它是Vue的实例对象,一个连接view和model的桥梁,负责把model对象封装成可以显示和接受输入的界面对象。
vue的基本使用核心步骤(4步):
准备容器
引包(官网) — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项,渲染数据
el:指定挂载点
data提供数据
创建vue实例,初始化渲染
来到vue2的官网看看该如何使用
vue2
依照上面的顺序
1234567891011121314//准备容器 (Vue所管理的范围) <div id=&quo ...
目录
基础认知
web标准
HTML概念
HTML注释
HTML标题、段落
水平线标签
图片标签
基础认知网页有哪些组成部分?
文字、图片、视频、音频、超链接
我们看到的网页背后的本质是什么?
前端程序员写的代码
程序员写的代码是通过什么软件转换成网页的?
浏览器
五大浏览器和渲染引擎
常见的五大浏览器
浏览器:是网页运行、显示的平台,是前端开发的必备利器
渲染引擎
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
浏览器
内核
IE
Triden
IE、猎豹安全、360极速浏览器、百度浏览器
FireFox
Gecko
火狐浏览器内核
Safari
webkit
苹果浏览器内核
Chrome/Opera
Blink
Weblink分支
注意点:渲染引擎不同,导致解析相同的代码时的速度、性能、效果也不相同
web标准Web标准是一组由W3C(World Wide Web Consortium)制定的技术规范和指南,用于确保网页在不同浏览器和设备上的一致性和互操作性。Web标准的目标是推动Web技术的发展和进步,使开发者能够创建具 ...