Allen的博客

所以可以从其中获取到commit方法来提交一个mutation，或者通过context.state和context.getters来获取state和getters;Action还有一个context参数。context是一个和store实例均有相同方法和属性的context对象;Action提交的是mutation,而不是直接修改状态，Action可以包含任意异步操作。mutations必须是同步函数，devtool会记录mutation的状态。页面使用（数组，对象两种）

vue2.0有关时间戳 时间的公共方法（YYYY-MM-DD HH:mm:ss，YYYY-MM-DD，HH:mm:ss，转化为 utc 时间，utc转标准时间，相对时间，日/月/年 时:分:秒）

i18n vue 多语言配置，切换刷新（setLocaleMessage，mergeLocaleMessage）

vue2.0 关于 vue.config.js配置项详解

vue中的滚动效果: better-scroll

需求：分为左右两侧部分，左侧为富文本编辑区域，右侧为显示区域。1.点击右侧选中区域时，左侧编辑区域显示对应值，2.左侧编辑时，右侧应该绑定显示。封装组件 （子组件）

TinyMce 中文资源包

vue 2.0使用tinymce-vue富文本

$ router是用来操作路由的，$ route是用来获取路由信息的。他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）常用的跳转连接的方法：//常规方法本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录1.$route.path字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。2.$route.params对象，包含路由中的动态片段和全匹配片段的键值对。3.route.qu

JS运行机制（Event Loop）JS执行是单线程的，它是基于事件循环的Vue异步更新队列（数据驱动视图）由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新， 只要监听数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。 为了确保得到更新后的DOM，所以设

new Vue() 和component组件中使用在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。data为什么是函数, 不是对象?这并非是 Vue 自身如此设计，而是跟 JavaScript 特性相关，我们来回顾下 JavaScript 的原型链从上面可以了解到，vue组件就是一个vue实例。JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的

vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截，axios请求拦截，响应拦截）

在介绍Vue.set()方法之前，我们先了解一下vue响应式的原理。一、vue如何追踪变化当你把一个普通的JS对象传给vue实例的data选项时，vue将遍历此对象的所有属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。Object.defineProperty是ES5中一个无法shim的特性，这也就是为什么vue不支持IE8以及更低版本的浏览器。二、为什么使用Vue.set()因为受现代JS的限制，vue不能检测到对象属性的添加或删除。由

路由动态传参如何拿到id呢在这里插入图片描述第二种传参或通过props路由懒加载hash模式history模式也就是吧mode改成mode:“history”路由守卫全局路由守卫beforeEach afterEach前置路由守卫，需要加next（）放行单个路由守卫beforeEnter组件路由钩子beforeRouteEnter beforeRouteLeavebeforeRouteUpdata总...

v-routerVue中会使用官方提供的第三方插件vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）一级路由第一步安装cnpm install vue-router -S 或 yarn add vue-router之后vue.use（）背后分原理就是调用‘MyPlugin.install(vue)’方法在入口主文件里面引入router实例还需要到App.vue渲染这里直接把films.vue粘贴到App.vue中

vue使用1.先安装脚手架全局安装vue-cli:cnpm install -g @vue/clioryarn global add @vue/cli使用项目 都需要重新安装脚手架，下面选项不用检测安装：vue -V如果中途报错 yarn lint 代码修复修复完之后 yarn serve 启动项目最重要的就是关注src文件 其中main.js是主入口文件对于main.js文件首先，引入vue，然后就是引入App.vue单文件组件（图左）new Vue

单文件组件为什么会解析以.vue为后缀名的单文件文件呢因为内部安装了vue-loader插件全局组件的注册Vue是原生模块，是在node-modules里的，所以不用加路径，HelloWorld是自定义模块，需要加路径局部组件注册data为什么是函数返回对象的形式呢？为了让每一个组件返回一份对象的独立的拷贝scoped父组件子组件加上scoped同样为了组件样式更方便编写引用sassscoped同样具有穿透功能如果是普通的css样式采用<<<

详解vuex1.安装 yarn add vuex2.引入vuex 并且让vue使用vuexsrc/store/index.js（仓库）//引入vueximport Vuex from "vuex"import Vue from "vue"Vue.use(Vuex) //让vue使用Vuex//创建store仓库let store = new Vuex.Store({})export default store; //需要暴露出去3.在main.js入口文件里注册store/

vue中的双向数据绑定原理几种实现双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。实现数据绑定的做法有大致如下几种：发布者-订阅者模式（backbone.js）脏值检查（angular.js）数据劫持（vue.js）发布者-订阅者模式一般通过sub, pu

虚拟DOMDom操作是比较浪费时间和性能的，当数据量很大时，更新DOM是非常耗费性能的操作。当我们使用Javascript来修改我们的页面，浏览器已经做了一些工作，以找到DOM节点进行更改，例如：document.getElementById('myId').appendChild(myNewNode);在现代的应用中，会有成千上万数量个DOM节点。所以在数据更新的时候产生的计算非常昂贵。琐碎且频繁的更新会使页面缓慢，同时这也是不可避免的。虚拟Dom技术就是用于提高页面更新的速度。简单来讲虚拟

路由模式（2种）在vue-router路由对象中，路由有两种模式：hash和history，而默认的是hash模式.hash路由onhashchange事件，可以在windows对象上监听这个事件:windows.onhashchange = function(event){ console.log(event.oldURL,event.newURL);let hash = location.hasg //通过location对象来获取hash地址console.log(hash) //

路由守卫全局守卫：//全局守卫写在main中//router对象调用 //.beforeEach((进入到哪一个路由,从哪一个路由离开,对应的函数)=>{}) router.beforeEach((to,form,next) =>{ //如果进入到的路由是登录页或者注册页面，则正常展示 if(to.path == '/login' || to.path == '/register' ){ next(); }else if( !(loc

一、为什么要使用路由懒加载为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。二、定义懒加载也叫延迟加载，即在需要的时候进行加载，随用随载在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时。三、使用常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import1、未用懒加载，vue中路由代码如下

vue-router实例Vue.js + vue-router 可以很简单的实现单页应用。<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：HTML 代码<script src="https://unpkg.com/vue/dist/vue.js"><

一.计算属性：我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值 ，那我们就在computed属性中去定义计算的方法：eg：我们现在有两个变量：fristname 和 lastname 。我们想要页面输出的是fullname 全名:方法一：用computed计算属性来实现（内置缓存机制）当更改age的时候， fullName 函数不执行；只有当更改 firstname或 lastname fullname才会执行data(){return{ firstname:'hani'

scoped一、简单结构搭建这里将要阐述一个简单的示例，父组件为App，子组件为Child。子组件Child的定义文件Child.vue中代码如下：<template> <div id="child"> <h2>子组件h2</h2> <h3>子组件h3</h3> </div></template><script>export default { name:

<script src="./base/vue.js"></script><body><div id="app"> <my-component></my-component></div><!--定义组件的模板--><template id="my-component"> <div> <h1 id="title">我是h1 -- {

自定义指令v-focus（全局自定义指令钩子）<div id="box"> {{msg}} <p v-text="msg"></p> <p v-html="msg"></p> <input id="input" type="text" v-focus></div><!--引入vue.js--><script src="./base/vue.js"></

ref用法用法1.vue给我们提供一个操作dom的属性，ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:<div ref="test">test</div>console.log(this.$refs.test)看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:let testDom = this.$refs.testtestDom.style.height = '200px'testDom.

slot插槽slot通俗理解：是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；Slot使用1、（匿名插槽）组件中有单个或多个未命名slot标签时，如下：<Child><span style=”color:red;”>hello

节点、树以及虚拟 DOM<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。上述 HTML 对应的 DOM 节点树如下图所示：每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一

Vue核心Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' //在浏览器中通过vm.message=“Hello Vue”发现视图改变了，内部是通过mvvm模式 }})mvvm模式vue中采用mvvm模式m

vue.mixin //在Vue里可以使用mixins来做代码的抽离复用，便于维护 //一个mixin其实就是一个纯粹的对象，上面挂载着抽离出来的配置， //在某一个实例中，通过mixins选项导入后，此实例就拥有导入的mixin的配置 //并且不会与原配置相互覆盖，而是合并到一起fetchfetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpReques

前言Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。----官方文档本文将针对响应式原理做一个详细介绍，并且带你实现一个基础版的响应式系统。什么是响应式我们先来看个例子：<div id="app"> <div>Price :￥{{ price }}</div> <di