随笔分类 - Vue
摘要：什么是虚拟dom 用一个对象来描述dom结构，这个对象就是虚拟dom。 为什么要用虚拟dom 因为操作dom 需要耗费性能。计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面可以减少dom操作，提高性能。 怎么比对？ + 如果type、key不一样:
阅读全文
摘要：简介 Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架应运而生。 Nuxt.js 框架是如何运作的？ Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用： + Vue 2 + Vue Router + Vuex (当配置了 Vuex 状态树配置项 时才会引入) +
阅读全文
摘要：为什么要分模块： 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter(模块
阅读全文
摘要：用Object.defineProperty添加属性的方法，给属性加get set方法。当我们操作属性的时候其实底层是在操作dom。
阅读全文
摘要：项目中使用vue-router的时候，会进行以下操作（可能具体不是这么写的，但是原理一样）： 接下来看我们写一个极简版的router源码。 class VueRouter { constructor(Vue, options) { this.$options = options this.route
阅读全文
摘要：用vue做一个简单的登录鉴权功能。 项目目录结构如下： Login 组件 登录成功后做本地存储和store存储，并进行跳转。 Login.vue关键代码： store 在Login组件里登录时token做了数据持久化处理，防止页面刷新丢失token。给store里的token赋初值的时候要取 sto
阅读全文
摘要：极简版vuex代码 <!--?xml version="1.0" encoding="UTF-8"?--> 我们做提交改数据又是什么行为呢？commit有3个参数type payload _options,我们从mutations里取出type对应的函数，对它进行具体的操作（传入参数执行函数） <!
阅读全文
摘要：一、默认配置 以下是package.json文件中关于的eslint默认配置 二、关闭eslint 直接注释掉package.json文件中eslint的配置就可以了。 三、修改eslint 格式： 规则值： eslint 规则配置参数
阅读全文
摘要：一般情况下，在代码开头引入组件： 打开控制台检查一下： 我们想访问首页的时候只加载首页的代码，加载详情页的时候再加载详情页的代码，需要按需加载： 打开控制台检查一下：
阅读全文
摘要：一、打包生成dist目录 运行npm run build 进行打包，控制台显示“Build complete”表示打包完成了。 二、dist目录放到后端跟目录 打包后生成一个dist文件夹，文件夹下有index.html和static文件夹。这些就是最终要上线的代码。 找到后台服务器的跟路径，把打包
阅读全文
摘要：一、查看ip地址 在控制台输入 ifconfig 查看ip地址 二、修改webpack-dev-server配置项 webpack-dev-server 默认不支持ip地址访问，需要修改配置项 三、测试 当pc和手机处于一个局域网时，手机访问ip地址，就能进行真机测试了。
阅读全文
摘要：每次从city页切换回home页面的时候mounted这个钩子都会执行，ajax都会被重新获取，性能需要优化。 用keep-alive,keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 app.vue keep-alive生命周期钩子函数：activ
阅读全文
摘要：Document 插槽header 插槽footer 组件的时候，我们可以选择为text定义一个不一样的 作为替代方案， 并且可以通过 slot-scope 特性从子组件获取数据： --> 第1个child2组件text是h1 {...
阅读全文
摘要：1.把Vue.prototype上挂载一个bus属性，这个属性指向1个vue实例，以后创建组件的时候，每个组件上都会有bus这个属性，都指向同一个实例 2.发布在methods里使用 this.bus.$emit 发布广播 3.订阅在mounted里使用this.bus.$on 订阅事件 全部代码：
阅读全文
摘要：一、用is指定组件为特定的原生HTML元素。 html: js: 浏览器中检查元素： 为什么会出现这种bug呢？ 像 <ul>、<ol>、<table>、<select> 里只允许包含指定的元素，像 <option> 这样的元素只能出现在某些特定元素的内部；当模板标签使用在这些有限制性的元素中时，载
阅读全文
摘要：Document {{fullName}} {{age}}
阅读全文
摘要：分别用方法、计算属性和侦听器实现当fristName和lastName改变时，fullName跟着改变。 一、方法： html: js: 当age发生改变时，fullName()执行了一次。 计算属性: html: js: 当age发生改变时，由于firstName,lastName没有发生改变，所
阅读全文
摘要：Vue是近两年来比较火的一个前端框架（渐进式框架吧）。 Vue两大核心思想：组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用；数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组
阅读全文
摘要：JSON-Server主要的作用是搭建一台JSON服务器，测试一些业务逻辑（我之前都是采用读取文件的方式尴尬）。一、安装 前提是已经安装好了node环境，并且初始化好了项目。二、提供json数据文件。 在项目根目录下，新建一个 JSON 文件db.json。三、配置json-server 在buil
阅读全文
