![](https://img-blog.csdnimg.cn/20200707173604401.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue学习知识
独坐空山后
努力成为前端大佬的打工仔
展开
-
vue组件封装 -- 双向绑定 v-model的本质
引言当我们在封装vue组件的时候,经常会想要父组件与子组件有一个双向绑定数据v-model,例如elementUI 的 input但是,子组件和父组件是不能直接使用 v-model的,那么应该怎么做呢?一、v-model的本质所谓 v-model就是一个语法糖,实际上,它是由 v-bind(:)和 @input两个合在一起的一个缩写也就是说:v-model 可以分解为:v-bind@input例如 :<input type="text" v-model="value">原创 2020-06-19 18:55:28 · 1781 阅读 · 3 评论 -
Vuex系列状态管理篇--Vuex(5)之插件、严格模式和表单处理
1、插件插件实际是一个函数Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数:定义 插件export const saveInLocal = store => { // 当 store 初始化后调用 console.log('store初始化了') store...原创 2020-03-22 14:55:09 · 346 阅读 · 0 评论 -
Vuex系列状态管理篇--Vuex(4)之Mutations和Actions
1、Vuex – Mutations对于 State 的 同步操作方法在根Vuex下单个参数 或者没有参数 定义const mutations = { setAppName(state, name) { state.appName = name; }}export default mutations单个参数 或者 没有参数 使用 this.$store....原创 2020-03-22 14:54:02 · 563 阅读 · 0 评论 -
Vuex系列状态管理篇--Vuex(3)之getting
4、Vuex–getters相当于数据仓库的计算属性4.1、在根目录下定义 在文件 getters.js 中直接定义const getters = { appWithVersion: (state) => { return `${state.appName}v2.0` }}export default getters;使用this.$store...原创 2020-03-22 14:53:11 · 487 阅读 · 0 评论 -
Vuex系列状态管理篇--Vuex(2)之State
2、Vuex的项目配置2.1、为什么要分开文件分开Vuex文件有利于项目文件管理2.2、项目文件分解图将Vuex的每个模块分解为以上几个文件总入口 index.js 代码为import Vue from 'vue'import Vuex from 'vuex'import actions from "./actions";import mutations from...原创 2020-03-20 23:32:37 · 192 阅读 · 0 评论 -
Vuex系列状态管理篇--Vuex(1)之数据流图
1、Vuex的数据流图Vue Components 是vue组件State 是状态中心,可以理解为一个 数据仓库Mutations 是 同步操作的方法Actions 是异步操作的方法如果 组件想要修改State,如果是 异步 的,得通过 Actions ----> Mutations —> State如果是 同步 的, 可以直接 Mutations --> ...原创 2020-03-20 23:30:45 · 693 阅读 · 0 评论 -
Vue系列状态管理篇--Bus事件总线篇
Bus – 事件总线原理:创建一个空的Vue实例,来作为交互的中介1、创建事件总线新建一个文件夹bus,在文件夹中新建一个文件 bus.js (也可以不要)在文件 bus.js 建立以下代码import Vue from 'vue'const Bus = new Vue()export default Bus3. 在 main.js 导入 bus.js `...原创 2020-03-20 17:13:00 · 323 阅读 · 0 评论 -
Vue系列路由篇--进阶篇
1、路由间传参1.1、使用动态匹配传参路由配置{ path: '/argu/:name', name: 'argu', component: () => import('@/views/argu.vue'), props: true }props: true 允许路由的 params 作为属性路由传参props: { ...原创 2020-03-20 17:11:58 · 226 阅读 · 0 评论 -
Vux系列路由篇--基础篇
1、一般路由1.1、 一般路由的配置{ path: '/', name: 'Home', component: Home}path : 路由导向的 urlname : 路由的名字,方便下面命名路由使用component : 路由导向的视图文件(一般使用懒加载)懒加载: () => import('@/views/argu.vue')...原创 2020-03-20 17:10:10 · 375 阅读 · 0 评论