前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配合着看: 对应的源码版本是 3.5.3,也就是 Vue.js 2.x 对应的 Vue Router 最新版本: Vue Router 是标准写法,为了简单,下面会简称 router. 本文将用以下问题为线索展开讲 router 的原理: $router 和 $route 哪来的 router 怎样知…

# 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目 4). 与其它框架的关联: * 借鉴angular的模板和数据绑定技术 * 借鉴react的组件化和虚拟DOM技术 5). vue包含一系列的扩展插件(库): * vue-cli: vue脚手架 * vue…

# 1. vuex是什么 github站点: https://github.com/vuejs/vuex 在线文档: https://vuex.vuejs.org/zh-cn/ 简单来说: 对应用中组件的状态进行集中式的管理(读/写) # 2. 状态自管理应用 state: 驱动应用的数据源 view: 以声明方式将state映射到视图 actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法) ![单向数据流](https://vuex.vuejs.org/zh-cn…

05.Vue组件的核心概念(1):属性 代码地址: https://github.com/tangjinzhou/geektime-vue-1/blob/master/%E6%BC%94%E7%A4%BADEMO%E6%BA%90%E7%A0%81/src/views/1.1/Props.vue 三个核心概念 1分44秒 第一种属性的写法,平时开发的时候不推荐这么做,对系统后期的维护是不利的 推荐使用的方式: 这是自定义的校验 list是一个数组,默认是一个空的数组 isVisible默认是fa…

06.Vue组件的核心概念(2):事件 通过emit传递给父组件 我们点击了重置失败,上层的div的click=handleDivClick是接收不到.重置失败的点击的行为的 通常情况下,你不用.stop也可以到达到一个冒泡的效果 课后习题 this.$emit的返回值是什么?…

07.Vue组件的核心概念(3):插槽 严格来的说在2.0之后已经不分区这两种插槽的概念了. 因为它底层的实现已经趋向于相同了. 2.6为了兼容2.5的版本,现在依然可以用这两种写法 作用域插槽就是多了 slot-scopt 作用域插槽,通过v-bind把值传递过去 浏览器的效果 都是父组件传递给子组件的内容,然后子组件根据传递的内容来执行他们的行为 大属性的Dmeo 全部通过属性声明的形式进行挂载 父组件内,完全通过属性的形式传递 通过方法的形式传递给子组件 解析通过属性传递的插槽内容 通过函…

一.组件基础和注册 组件概念 组件系统是 Vue 的另一个重要概念,他的核心就是封装和复用. 细节 组件的name必须是全局唯一. 二.属性.事件和插槽 组件的三大核心概念:属性.事件和插槽. 属性,事件,插槽好文 1.属性 1.1导言 vue组件 = vue实例 = new Vue(options) 不同的组件只不过是options的不同,90%的工作都是围绕配置options来进行 1.2分类 2.事件 事件冒泡 阻止事件冒泡 3.插槽 分类: 默认插槽 具名插槽 作用域插槽 本质: 作用域…

摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳github博客,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1. 自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通…

1. Vuex核心概念主要如下 state : 存储共享数据 mutation: 变更store中的数据,方法,不能异步操作 action: 异步操作,通过触发mutation变更数据 getter: 对Store中数据重新加工,但是不改变原来的数据 2. State 1. 概念 提供唯一公共数据源的地方,所有共享数据都要统一放到Store中的state中进行存储 2. step 1. 创建3个组件 新增Add.vue, 减法Sub.vue, 主要组件Main.vue Add.vue <temp…

Vuex的核心概念 Vuex有5个核心概念,分别是State,Getters,mutations,Actions,Modules. State   Vuex使用单一状态树,也就是说,用一个对象包含了所有应用层级的状态,作为唯一数据源而存在.没一个Vuex应用的核心就是store,store可理解为保存应用程序状态的容器.store与普通的全局对象的区别有以下两点:   (1)Vuex的状态存储是响应式的.当Vue组件从store中检索状态的时候,如果store中的状态发生变化,那么组件也会相应地…