前端Vue基础
文章平均质量分 88
NPFik-
这个作者很懒,什么都没留下…
展开
-
第十章:Vue3.0基础---其他Composition API、Composition API的优势、新的组件、其他
shallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。readonly: 让一个响应式数据变为只读的(深只读)。shallowReadonly:让一个响应式数据变为只读的(浅只读)。应用场景:原创 2022-06-07 18:42:26 · 162 阅读 · 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 · 112 阅读 · 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 · 300 阅读 · 0 评论 -
第七章:Vue基础---脚手架配置代理、插槽、Vuex
在vue.config.js中添加如下配置:说明:1. 优点:配置简单,请求资源时直接发给前端(8080)即可。2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)编写vue.config.js配置具体代理规则:说明:1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。2. 缺点:配置略微繁琐,请求资源时必须加前缀。1. 作用:让父组件可以向子组件指定位置插入ht原创 2022-06-07 17:01:32 · 180 阅读 · 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 · 147 阅读 · 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 · 79 阅读 · 0 评论 -
第四章:Vue基础---内置指令、自定义指令、生命周期、非单文件组件、单文件组件
一:内置指令我们目前学过的指令: v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染...原创 2022-05-14 19:47:23 · 239 阅读 · 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 · 396 阅读 · 0 评论 -
第二章:Vue基础---数据代理、事件处理、计算属性、监视属性、绑定样式
一:数据代理一:数据代理是什么?数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)二:Vue中的数据代理1.Vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写)2.Vue中数据代理的好处: 更加方便的操作data中的数据3.基本原理: (1)通过Object.defineProperty()把data对象中所有属性添加到vm上。 (2)为每一...原创 2022-05-10 20:47:07 · 218 阅读 · 0 评论 -
第一章:Vue基础---初识、模板语法、数据绑定、el与data、MVVM模型
一:初识Vue1.想让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 · 97 阅读 · 0 评论