心暖未晴

关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法

使用在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。使用非常简单，只需要将其注入到Vue根实例中。mport Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 },getter: { doneTodos: (state, gette

https://segmentfault.com/a/1190000008779053版本号vue-cli 2.8.1 (终端通过vue -V 可查看)vue 2.2.2webpack 2.2.1目录结构├── README.md├── build│   ├── build.js│   ├── check-versions.js│   ├──

周所周知，Vue在2.0版本中去除了broadcast方法以及broadcast方法以及dispatch方法，最近在学习饿了么的Element时重新实现了这两种方法，并以minix的方式引入。看一下源代码function broadcast(componentName, eventName, params) { /*遍历当前节点下的所有子组件*/ this.$children.forEach

什么是Vue组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 Vue组件间通信父组件向子组件通信方法一：props使用props，父组件可以使用props向子组件传递数据。父组件vu

从new一个Vue对象开始let vm = new Vue({ el: '#app', /*some options*/});很多同学好奇，在new一个Vue对象的时候，内部究竟发生了什么？究竟Vue.js是如何将data中的数据渲染到真实的宿主环境环境中的？又是如何通过“响应式”修改数据的？template是如何被编译成真实环境中可用的HTML的？Vue指令又是执行的？带着这些疑

操作DOM在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样：<template> <div> <div ref="test">{{test}}</div> <button @click="handleClick">tet</button> </div></template>export default { data () {

$mount首先看一下mount的代码/*把原本不带编译的$mount方法保存下来，在最后会调用。*/const mount = Vue.prototype.$mount/*挂载组件，带模板编译*/Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean): Component { e

VNode在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。但是这样的JavaScrip

抽象DOM树在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。但是这样的JavaScri

Vue事件API众所周知，Vue.js为我们提供了四个事件API，分别是 $on， $once， $off， $emit。初始化事件初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下：{ eventName: [func1, func2, func3]}存放事件名以及对应执行方法。/*初始化事件*/export function initEven

数据绑定原理前面已经讲过Vue数据绑定的原理了，现在从源码来看一下数据绑定在Vue中是如何实现的。首先看一下Vue.js官网介绍响应式原理的这张图。这张图比较清晰地展示了整个流程，首先通过一次渲染操作触发Data的getter（这里保证只有视图中需要被用到的data才会触发getter）进行依赖收集，这时候其实Watcher与data可以看成一种被绑定的状态（实际上是data的闭包中有一个Deps订

为什么要依赖收集 来自 https://github.com/answershuto/learnVue先看下面这段代码new Vue({ template: `<div> <span>text1:</span> {{text1}} <span>text2:</span> {{text2}} <div>`

Vue组件化开发单文件系统，样式局部作用域基本组成结构：<template/> <script/> <style scoped/>组件注册方式：1）公共组件全局注册 2）其余组件局部注册组件命名规范Vue官方文档给予以下说明： 当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母