Vue的笔记

Ly_info

已于 2023-03-14 17:13:09 修改

阅读量97

点赞数 1

文章标签： vue.js webpack javascript

于 2023-01-07 19:03:07 首次发布

本文链接：https://blog.csdn.net/Liuyiaixuexi/article/details/128585499

版权

什么是webpack
webpack是一个专注于打包模块的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin在注入钩子，分析项目结构将其打包为合适的格式以供浏览器使用
webpack的优点是什么

专注于处理模块化的项目，开箱即用，一步到位
通过plugin扩展，完整好用又不失灵活
使用场景不局限web开发
能为大多数场景找到已有的开源扩展
提供了更好的开发体验
webpack热更新原理
基本定义：webpack的热更新又称热替换，缩写为HMR，这个机制可以做到不用刷新浏览器而将新的模块变更替换旧的模块
有哪些常见的loader？
1、file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件
2、url-loader：和file-loader类似，但是能在文件很小的情况下base64的方式把文件注入到代码中去
3、source-map-loader：加载额外的sourceMap文件，以方便断点调试
4、image-loader：加载并且压缩图片文件
5、babel-loader：降级Js语法，把Es6转换成Es5
6、css-loader：加载css 支持模块化，压制、文件导入等特性
7、style-loader：把css代码注入到JS中，通过DOM操作去加载css
8、eslint-loader：通过ESLint检查JS代码

loader和Plugin的不同
1、作用不同：loader直译为”加载器” loader让webpack拥有了加载和解析非JS文件的能力而Plugin直译为插件，plugin可以扩展webpack的功能，让webpack具有更多的灵活性
2、用法不同：loader在module.rules中配置，类型为数组。每一项都是一个Object，里面描述了对于什么类型的文件使用什么加载器和使用的参数；plugin在plugins 单独配置，类型为数组，每一项都是一个plugin 的实例，参数都通过构造函数传入
Vue是什么
渐进式JS框架，有一套自己规则的语法
main.js和App.vue以及index.html作用和关系
1、main.js -项目打包主入口 -vue初始化
2、 App.vue -Vue页面主入口
3、 index.html - 浏览器运行的网页
4、 App.vue=>main.js=>index.html
MVVM架构模式
M：model数据模型（date里定义）
V：view视图（html页面）
VM：ViewModel视图模型（vue.js）
MVVM通过数据双向绑定让数据自动的双向同步，不需要操作DOM
插值表达式作用
把model数据层和view视图层双向绑定在一起
什么是设计模式
设计模式是对代码分层引入一种架构的概念
单vue文件好处
独立作用域，不用担心类名重复
v-bind指令
简写： :
作用：用于属性的动态绑定
加载本地图片的时候需要通过require图片资源的引入
v-on指令
作用：用来事件绑定

v-model指令
作用：实现了双向数据绑定
使用场景：自定义组件，表单
本质：事件绑定和属性绑定的结合 value+input
遇到复选框，v-model的变量值
非数组关联的是布尔值
数组关联的是表单对应的value属性
v-if和v-show指令
都是用来显示和隐藏用的
v-if是移除或插入DOM元素
v-show是频繁切换显示和隐藏
v-for指令
作用：实现数组循环遍历
v-for如何循环列表：
1、谁循环就把v-for写在谁身上
2、v-for=“(值变量，索引变量) in 目标结构” 注意in两边必须有空格
3、可以遍历数组对象固定数字
注意：值变量和索引变量不能用到v-for范围以外
哪些数组方法会导致v-for更新页面？
可以改变原数组的方法
v-for更新时，是如何操作DOM的
循环出新的虚拟DOM结构，和旧的虚拟DOM结构对比，尝试复用标签地更新内容
diff算法
diff算法如何比较新旧虚拟DOM？
同级比较
key的作用
有key，按key比较，无key就地更新
vue修饰符
.stop 阻止事件冒泡
.prevent 阻止默认行为
.once 事件处理函数只执行一次
vue按键修饰符
@keydown.enter 监测回车按键
@keydown.esc 检测返回按键
v-model修饰符
.number
.trim
.lazy
计算属性
作用：给计算属性赋值的时候
应用场景：一个结果的数据依赖于其他数据的改变
set 赋值的情况触发，get 获取值的时候触发
组件
可以复用的vue实例，独立作用域
.vue的文件称之为组件
好处：便于复用
使用：创建文件.vue 引入组件注册组件-全局注册-main.js
父传子：从一个vue组件的值传给另一个vue组件
子传父：
ref跨组件
作用：获取到子组件的实例对象

生命周期

created使用场景
网络请求发起、注册全局事件
destroyed使用场景
全局方法，计时器
** $ refs**作用
获取原生的DOM元素，也可以获取到组件的实例对象
$nextTick
场景点击按钮显示搜索框

动态组件

场景同一个挂载点展示不同的组件
组件缓存
vue内置的语法keep-alive组件吧缓存的组件保存起来
场景频繁创建和销毁组件
具名插槽
场景一个组件需要多个slot占位
插槽作用域
口诀子组件在slot上绑定属性和子组件内的值、使用组件传template和v-slot=’自定义变量名‘；scope变量名自动绑定slot上所有属性和值
场景访问插槽组件中数据变量的情况

自定义指令

inserted(el) el作用 调用这个指令的Dom元素

vue路由

路由是一种映射关系，url地址路径和组件的映射关系
作用：切换业务场景
语法规则
下载包路由引入
注册
Vue.use(VueRouter)
创建路由规则数组
const routes=[{ path:"/find",component:Find}]
创建路由实例对象
const router = new VueRouter({ routes })
vue实例挂载路由
new Vue({ router:router })
挂载router-view
<router-view/>
router===$router(编程式导航使用) 都是路由实例
route=== $route(组件中使用，获取地址栏数据) 路由信息对象
routes 路由规则创建路由的时候使用

声明式导航

<router-link to="/find">xxx</ router-link>
404路由规则匹配

const routes =[{
	path:'*',
	component:NotFound
}]

编程式导航传参
path会忽略掉params的参数推荐使用path+query

声明式导航传参
1.?传参直接在路径后加参数 /路径?id=1&a=10 获取参数使用$route.query.参数名
2./传参/路径/109/200 获取参数使用 $route.params.参数名路由规则必须要挖坑占位

编程式导航传参
$KaTeX parse error: Expected 'EOF', got '&' at position 21: \dotsr.push(/路径?id=1&̲a=10') 获取参数使用$ route.query.参数名获取参数使用$route.params.参数名路由规则必须要挖坑占位 $router.push(/路径/值/值’)

路由守卫

router.beforEach((to,from,next)=>{})
to:去往哪个path
from：从哪个路径跳转过来的
next():放行通过
next(false):原地停留
next(path):强制跳转到指定路径

在调用接口的时候获取到的结果是undefined：在网络中排错

面试题

Vue最大的优势是什么

简单易学，轻量级，整个源码js文件都不大，双向数据绑定，数据驱动视图，组件化，数据和视图分离，，相比传统网页，vue是单页面可以指刷新某一个部分

vue和jQuery区别是什么

jQuery应该算是一个插件，里面封装了各种医用的方法。方便你使用更少的代码操作dom标签
Vue是一套框架，有自己的规则和体系与语法，特别是设计思想MVVM，让数据和视图关联绑定，省略了很多的DOM操作，指令还给标签注入了更多的功能

MVVM和MVC的区别是什么

MVC也是一种设计模式，组织代码的结构是model数据模型，view视图。Controller控制器，在控制器这层里编写JS代码。来控制数据和视图关联
MVVM 即Model-View-ViewMode的简写，即模型-视图-视图模型，VM是这个实际模式的核心连接V和M的桥梁，内部会监听DOM事件。监听数据对象变化来影响对方，我们称之为数据绑定