![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端Vue基础
文章平均质量分 88
NPFik-
这个作者很懒,什么都没留下…
展开
-
第十章:Vue3.0基础---其他Composition API、Composition API的优势、新的组件、其他
shallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。readonly: 让一个响应式数据变为只读的(深只读)。shallowReadonly:让一个响应式数据变为只读的(浅只读)。应用场景:原创 2022-06-07 18:42:26 · 173 阅读 · 0 评论 -
第九章:Vue3基础---新特性、创建Vue3.0工程、常用的Composition API
Composition API(组合API)setup配置ref与reactivewatch与watchEffectprovide与inject......新的内置组件FragmentTeleportSuspense其他改变新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符......官方文档:创建一个项目 | Vue CLI官方文档:安装 | Vue.jsvite官网:Vite中文网什么是vite?—— 新一代前端构建工具。优势如下:开发环境中,无需打包操作原创 2022-06-07 18:01:37 · 113 阅读 · 0 评论 -
第八章:Vue基础---路由、ElementUI组件库
1. 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。 2. 前端路由:key是路径,value是组件。1. 安装vue-router,命令:```npm i vue-router```2. 应用插件:```Vue.use(VueRouter)```3. 编写router配置项: 4. 实现切换(active-class可配置高亮样式)------vue中配置 5. 指定展示位置------vue中配置 二:几个注意点 1原创 2022-06-07 17:23:34 · 320 阅读 · 0 评论 -
第七章:Vue基础---脚手架配置代理、插槽、Vuex
在vue.config.js中添加如下配置: 说明:1. 优点:配置简单,请求资源时直接发给前端(8080)即可。 2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。 3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)编写vue.config.js配置具体代理规则: 说明:1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。 2. 缺点:配置略微繁琐,请求资源时必须加前缀。1. 作用:让父组件可以向子组件指定位置插入ht原创 2022-06-07 17:01:32 · 182 阅读 · 0 评论 -
第六章:Vue基础---全局事件组件、消息订阅与消息发布(pubsub)、nextTick、过度与动画
一:全局事件组件 1. 一种组件间通信的方式,适用于<span style="color:red">任意组件间通信</span>。 2. 安装全局事件总线: new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ...... }) 3. 使用事件总线: 1. 接收数据:A组件想接收数据,则在原创 2022-05-27 18:48:51 · 148 阅读 · 0 评论 -
第五章:Vue基础---分析脚手架、ref属性、props配置、mixin混入、插件、scoped样式、浏览器本地存储、组件自定义事件
一:分析脚手架 一:脚手架文件结构 ├── node_modules ├── public ├── favicon.ico: 页签图标 └── index.html: 主页面 ├── src ├── assets: 存放静态资源 │ └── logo.png │── component: 存放组件 │ └── HelloWorld.vue │── App.vue: 汇总所有组...原创 2022-05-27 18:22:52 · 82 阅读 · 0 评论 -
第四章:Vue基础---内置指令、自定义指令、生命周期、非单文件组件、单文件组件
一:内置指令 我们目前学过的指令: v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染...原创 2022-05-14 19:47:23 · 244 阅读 · 0 评论 -
第三章:Vue基础---条件渲染、列表渲染、收集表单数据、过滤器
一:条件渲染 条件渲染: 1.v-if 写法: (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。 2.v-show 写法: v-show="表达式" 适用于:切换频率较高的场景。 特点:不展示...原创 2022-05-13 19:07:40 · 401 阅读 · 0 评论 -
第二章:Vue基础---数据代理、事件处理、计算属性、监视属性、绑定样式
一:数据代理 一:数据代理是什么? 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写) 二:Vue中的数据代理 1.Vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写) 2.Vue中数据代理的好处: 更加方便的操作data中的数据 3.基本原理: (1)通过Object.defineProperty()把data对象中所有属性添加到vm上。 (2)为每一...原创 2022-05-10 20:47:07 · 220 阅读 · 0 评论 -
第一章:Vue基础---初识、模板语法、数据绑定、el与data、MVVM模型
一:初识Vue 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例,并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新 注意区分:js表达式 和 .原创 2022-05-06 20:19:32 · 99 阅读 · 0 评论