Vue
关注
分享
扫一扫
文章平均质量分 76
吃不到棒棒糖的小熊
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue (21) — 编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器的两种工作模式
目录一、编程式路由导航1.作用2.具体编码二、缓存路由组件1.作用2.具体编码三、两个新的生命周期钩子 1.作用 2.具体名字四、路由守卫 1.作用 2.分类 3.全局守卫 4.独享守卫 5.组件内守卫五、路由器的两种工作模式 1.对于一个url来说，什么是hash值？ 2. hash值不会包含在 HTTP 请求中 3. hash模式 4.history模式一、编程式路由导航1.作用...原创 2022-01-04 01:24:49 · 893 阅读 · 0 评论 -
Vue (20) — 路由的query参数以及params参数、命名路由、路由的props配置、＜router-link＞的replace属性
目录一、路由的query参数1.传递参数2.接收参数二、命名路由 1.作用 2.如何使用1.给路由命名 2.简化跳转三、路由的params参数 1.配置路由，声明接收params参数 2.传递参数 3.接收参数四、路由的props配置五、<router-link>的replace属性 1.作用 2.浏览器的历史记录有两种写入方式 3.如何开启replace模式一、路由的q...原创 2022-01-03 19:48:03 · 1123 阅读 · 0 评论 -
Vue (19) — 初识vue-router、路由的基本使用、多级路由
目录一、初识vue-router 1.什么是vue-router? 2.对SPA应用的理解 3.对路由的理解 (1).什么是路由？(2).路由分类二、路由的基本使用 1.安装vue-router,命令 2.应用插件 3.编写router配置项 4.实现切换 5.指定展示位置 6.几个注意点三、多级路由（嵌套路由） 1.配置路由规则，使用children配置项 2.跳转一、初识vue-rou...原创 2022-01-02 23:14:41 · 846 阅读 · 1 评论 -
Vue (18) — 模块化+命名空间
目录模块化+命名空间一、目的二、修改store.js三、开启命名空间后，组件中读取state数据四、开启命名空间后，组件中读取getters数据五、开启命名空间后，组件中调用dispatch六、开启命名空间后，组件中调用commit模块化+命名空间一、目的让代码更好维护，让多种数据分类更加明确二、修改store.jsconst countAbout = { namespaced:true,//开启命名空间 state:{x:...原创 2022-01-02 17:23:05 · 275 阅读 · 0 评论 -
Vue (17) — getters的使用、四个map方法的使用(mapState方法、mapGetter方法、mapActions方法、mapMutations方法)
目录一、getters的使用 1.概念 2.在store.js中追加getters配置 3.组件中读取数据二、四个map方法的使用 1.mapState方法 2.mapGetter方法 3.mapActions方法 4.mapMutations方法一、getters的使用 1.概念当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工 2.在store.js中追加getters配置.........原创 2022-01-02 00:44:52 · 1594 阅读 · 0 评论 -
Vue (16) — 初识Vuex、搭建Vuex环境、基本使用
目录一、理解Vuex 1.Vuex是什么 2.什么时候使用Vuex 3.Vuex工作原理图二、搭建vuex环境 1.创建文件：src/store/index.js 2.在main.js中创建vm时传入store配置项三、基本使用 1.初始化数据、配置actions、配置mutations、操作文件store.js 2.组件中读取vuex中的数据 3.组件中修改vuex中的数据一、理解Vuex 1.Vuex是什么概念：专门在Vue中实...原创 2022-01-01 21:08:42 · 1040 阅读 · 2 评论 -
Vue (15) — Vue脚手架配置代理、插槽(默认插槽、具名插槽、作用域插槽)
目录一、vue脚手架配置代理 1.方法一 2.方法二二、插槽 1.作用 2.分类 3.使用方式1.默认插槽2.具名插槽3.作用域插槽一、vue脚手架配置代理 1.方法一 在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000"} 说明： 1.优点：配置简单，请求资源时直接发给前端...原创 2021-12-30 20:02:26 · 687 阅读 · 0 评论 -
Vue (14) — nextTick、Vue封装的过渡与动画
目录一、nextTick 1.语法 2.作用 3.什么时候用二、Vue封装的过渡与动画 1.作用 2.图示 3.写法一、nextTick 1.语法this.$nextTick(回调函数) 2.作用在下一次DOM更新结束后执行其指定的回调 3.什么时候用当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行二、Vue封装的...原创 2021-12-25 18:46:43 · 427 阅读 · 0 评论 -
Vue (13) — 全局事件总线、消息订阅与发布
目录一、全局事件总线（GlobalEventBus） 1.什么是全局事件总线 2.安装全局事件总线 3.使用事件总线(1).接收数据 (2).提供数据 4.解绑事件二、消息订阅与发布（pubsub） 1.什么是pubsub 2.使用步骤一、全局事件总线（GlobalEventBus） 1.什么是全局事件总线 全局事件总线是一种组件间通信的方式，适用于任意组件间通信 2.安装全局事件总线...原创 2021-12-25 13:34:13 · 561 阅读 · 0 评论 -
Vue (12) — 组件的自定义事件
目录一、什么是组件的自定义事件二、使用场景三、绑定自定义事件 1.第一种方式 2.第二种方式 3.备注四、触发自定义事件五、解绑自定义事件六、绑定原生DOM事件七、注意一、什么是组件的自定义事件 组件的自定义事件是一种组件间通信方式，它适用于：子组件 ==> 父组件二、使用场景A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）三、绑定自定义事件 1.第...原创 2021-12-21 20:28:41 · 167 阅读 · 0 评论 -
Vue (11) — mixin混入、插件、scoped样式
一、mixin混入 1.功能可以把多个组件功用的配置提取成一个混入对象 2.使用方式 第一步：定义混合，例如： { data () { ... }, methods : { ... } ... }export const mixin = { methods:{ showName(){ aler...原创 2021-12-19 15:28:04 · 528 阅读 · 0 评论 -
Vue (10) — 初始化脚手架、ref属性、配置项props
一、初始化脚手架 1.说明 (1).Vue 脚手架是Vue 官方提供的标准化开发工具（开发平台）。 (2).最新的版本是 4.x。 (3).文档: https://cli.vuejs.org/zh/ 。 2.具体步骤第一步（仅第一次执行）：全局安装@vue/cli。npm install -g @vue/cli第二步：切换到你要创建项目...原创 2021-12-13 21:09:27 · 890 阅读 · 0 评论 -
Vue (9) — 模块与组件、非单文件组件、单文件组件
目录一、模块与组件1.模块(1).什么是模块(2).为什么使用模块(3).模块的作用 2.组件 (1).什么是组件 (2).为什么要使用组件 (3).组件的作用 (4).传统方式与组件方式编写应用的比较 3.模块化 4.组件化二、非单文件组件 1.定义 2.Vue中使用组件的三大步骤(一)、定义组件（创建组件）...原创 2021-12-12 17:05:28 · 819 阅读 · 1 评论 -
Vue (8) — 自定义指令、生命周期
一、自定义指令 1、定义语法 (1).局部指令： new Vue({ directives:{指令名：配置对象} }) 或者 new Vue({ directives{指令名：回调函数} ...原创 2021-12-09 08:47:53 · 1551 阅读 · 2 评论 -
Vue (7) — 过滤器、内置指令(v-text、v-html、v-cloak、v-once、v-pre)
目录一、过滤器 1.定义 2.语法 1.注册过滤器 2.使用过滤器 3.备注 4.案例二、内置指令 1.v-text 指令 (1).作用(2).与插值语法的区别 (3).案例 2. v-html 指令1.作用2.与插值语法的区别3.严重注意：v-html有安全性问题！！！ 4.案例...原创 2021-12-06 21:19:52 · 530 阅读 · 0 评论 -
Vue (6) — Vue监视数据的原理、收集表单的数据
目录一、Vue监视数据的原理 1.Vue监视数据范围 2.如何监测对象中的数据 3.如何监测数组中的数据 4.在Vue修改数组中的某个元素一定要用如下的方法： 5.案例展示二、收集表单数据一、Vue监视数据的原理 1.Vue监视数据范围Vue会监视data中所有层次的数据data:{ student:{ name:'Tom', ...原创 2021-12-06 16:25:48 · 502 阅读 · 2 评论 -
Vue (5) — 列表过滤(分别用watch和computed实现)、列表排序
目录一、列表过滤 1.用watch实现 2.用computed实现二、列表排序一、列表过滤 实现功能：在输入框内输入关键词，过滤列表中与关键词相关的列。可以用watch或computed来实现。 列表样式： 1.用watch实现<body> <div id="root"> <h2>人员列表</h2> <input type="text...原创 2021-12-01 21:41:20 · 1847 阅读 · 1 评论 -
Vue (4) — 绑定class、style样式，条件渲染（v-if、v-show）、列表渲染（v-for）、key的内部原理
目录一、绑定样式 1.绑定class样式 (1).字符串写法 (2).数组写法 (3).对象写法 2.绑定style样式 (1).对象写法 (2).数组写法二、条件渲染 1.v-if (1).写法(2).适用于(3).特点 2.v-show(1).写法(2).适用于...原创 2021-11-30 00:10:21 · 2245 阅读 · 0 评论 -
Vue (3) — 计算属性、监视属性(侦听属性)、深度监视
目录一、计算属性 1.定义 2.原理 3.get函数什么时候执行？ 4.优势 5.备注 6.案例（使用三种方法实现） 1.使用插值语法实现 2.使用methods实现 3.使用计算属性实现 7.计算属性的简写二、监视属性(即“侦听属性”)三、深度监视 1.深度监视 2.深度监视的简写 (1).写法一 (1).写法二 3.computed和watch之间的区别...原创 2021-11-24 16:58:15 · 1652 阅读 · 0 评论 -
Vue (2) — MVVM模型、数据代理、事件修饰符、键盘事件
一、Vue中的MVVM模型二、数据代理 1.什么是数据代理 2.Vue中的数据代理 3.Vue中数据代理的好处 4.基本原理三、事件处理 1.事件的基本使用 2.Vue中的事件修饰符 3.键盘事件原创 2021-11-23 10:10:06 · 779 阅读 · 0 评论 -
Vue (1) — 初识Vue、模板语法、数据绑定
一、Vue的介绍 1.Vue是什么 Vue是一套用于构建用户界面的渐进式JavaScript框架。Q：什么是渐进式A：渐进式是指Vue可以自底向上逐层的应用。如果你的应用很简单，那么只需要一个轻量小巧的核心库，如果是一个复杂的应用，则可以引入各式各样的Vue插件。 2.Vue的特点 1.采用组件化模式，提高代码复用率、且让代码更好维护 2.声明式编码，让编码人员无需直接操作DOM，提高开发效率 3.使用虚拟DO...原创 2021-11-19 16:00:21 · 760 阅读 · 2 评论