上回说到Vue组件间通讯，最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法，这节来说说Vuex(store仓库)。 首先Vuex需要安装，安装的方式有很多，在这里就不一一细说了。我是通过npm方式安装的： npm install vuex --save安装好之后需要再main.js里全局引入： import Vue from vue import Vuex from vuex Vue.use(Vuex)new Vue({el:#app,store,components: { App },template: <App/>})这样就完成了Vuex的安装。接下来就是Vuex的...
演示 演示1演示2演示3 一、功能描述1、预设过渡 支持区分enter、leave支持预设过渡的组合特别强调:支持元素展开、闭合的过渡。name==slide或[slide[,]]，即可实现，无需外部传height支持外部传类来过渡或动画/* 预留过渡 */ /** *1、fade *2、移动:up,right,down,left四个方向 *3、scale缩放：默认是从0->1，还预设了一个从1->1.2的 *4、rotate旋转。顺时针旋转。角度用以上方向来指示。如果逆时针中间加上reserve。 如rotate-ri...
做成之后就是这个样子 接下来上代码创建一个组件。显示验证码图片 <template><div class="s-canvas"><canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas></div> </template> <script> export default{name: SIdentify,props: {identifyCode: { // 默认注册码type: String,default: 1234},fontSizeMin: { // 字体最小值type: Number,default: 25},fontSizeMax: { // 字体最大值type: Number,default: 3...
关于vuex的基础部分学习于https://www.gxlcms.com/article/163008.htm 使用Vuex的时候，通常会实例化Store类，然后传入一个对象，包括我们定义好的actions、getters、mutations、state等。store的构造函数： export class Store {constructor (options = {}) {// 若window内不存在vue，则重新定义Vueif (!Vue && typeof window !== undefined && window.Vue) {install(window.Vue)}if (process.env.NODE_ENV !== production) {// 断...
一、官方文档 1、第一步 const myPlugin = store => {// 当 store 初始化后调用store.subscribe((mutation, state) => {// 每次 mutation 之后调用// mutation 的格式为 { type, payload }}); };2、第二步 const store = new Vuex.Store({// ...plugins: [myPlugin] });二、编写一个打印日志的插件 1、函数的书写 import _ from lodash; function logger() {return function(store) {let prevState = store.state;store.subscribe(...
最近在项目中遇到一个需求，有一个列表需要滚动加载，类似于微博的无限滚动。当时第一反应时监听滚动事件，在判断滚动到达底部时加载下一页，同时心里也清楚，监听滚动事件需要做好截流。顺手搜索了下发现有一个现成的插件vue-infinite-scroll ,用法也很简单，于是乎就用了起来。 需求上线后，对它的实现挺好奇的，于是研究了一番源码，这篇文章就是源码解析笔记。 插件使用方法 这是一个 vue 的指令，按照 github 仓库上的介绍，用...
Vue 的用法没有变化: <template lang="pug">transition(name="sider")div.helloh3 {{msg}}p(:style="{color:#000}", :htmlData="msg") p labelbutton(@click="clickMe") clickTest </template>要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析 vue-cli 2+ 配置: 下载包: npm i -D pug pug-html-loader在build/webpack.base.conf.js 的 module 中添加规则: module: {rules: [{te...
在正文开始之前，先了解vue基于源码构建的两个版本，一个是 runtime only ，另一个是 runtime加compiler 的版本，两个版本的主要区别在于后者的源码包括了一个编译器。 什么是编译器，百度百科上面的解释是 简单讲，编译器就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。一个现代编译器的主要工作流程：源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (...
?“ 本文主要梳理一下vue代码的目录，以及vue代码构建流程，旨在对vue源码整体有一个认知，有助于后续对源码的阅读。” 一、目录结构上图是对vue的代码的所有目录进行的梳理，其中源码位于src目录下，下面对src下的目录进行介绍。 compiler 该目录是编译相关的代码，即将 template 模板转化成 render 函数的代码。 vue 提供了 render 函数，render 函数作用是用来创建 VNode，但在平时开发中，绝大多数情况下使用 template 来创建 ...
接下来重点来看Vue的数据响应系统。我看很多文章在讲数据响应的时候先用一个简单的例子介绍了数据双向绑定的思路，然后再看源码。这里也借鉴了这种方式，感觉这样的确更有利于理解。数据双向绑定的思路1. 对象先来看元素是对象的情况。假设我们有一个对象和一个监测方法：const data = {a: 1 }; /** * exp[String, Function]: 被观测的字段 * fn[Function]: 被观测对象改变后执行的方法 */ function watch (exp, fn) {}我们可以调用...
Vue的响应式系统Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身，而不用手动处理数据到视图的渲染，避免了繁琐的 DOM 操作，提高了开发效率。 vue 的响应式系统依赖于三个重要的类：Dep 类、Watcher 类、Observer 类，然后使用发布订阅模式的思想将他们揉合在一起（不了解发布订阅模式的可以看我之...
最近在学Vue，感觉很难理解，学不懂。昨天晚上开始第一个页面的搭建，脑子感觉通了一点，大概知道该怎么做了。 在放置轮播图时，要调用很多图片，图片路径在data的一个数组里，用v-for循环（因为还不会做轮播图，从网上找的代码）图片路径是对的，但是不显示，就用普通img标签放了个图片看了一下，这样网页上却变成了这样于是我把每个图片都放了一次，把每个解析后的地址都粘贴在数组里，成了但是这种方法也太蠢了，以后不能也这样...
大家都知道vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看vuex下面的工作流程图通过官方文档提供的流程图我们知道，vuex的工作流程， 1、数据从state中渲染到页面； 2、在页面通过dispatch来触发action； 3、action通过调用commit,来触发mutation； 4、mutation来更改数据，数据变更之后会触发dep对象的notify，通知所有Watcher对象去修改对应视...
什么是AST 在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。 Virtual Dom Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点) 本文通过对源...
力有不逮的对象众所周知，在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。 这是什么原因？ 原因在于： Vue 的响应式系统是基于Object.defineProperty这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是，该方法有一个很大的缺点，新增属性或者删除属性不会触发监听，举个栗子： var vm =...