随笔分类 - Vue.js
摘要：Vue 在更新 DOM 时是异步执行的。 只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。 异步更新DOM实例 点击 spa
阅读全文
摘要：项目地址 "https://github.com/caochangkui/vue element responsive demo" 主要功能 响应式侧边栏 面包屑导航（结合router.js） 路由动效 阿里巴巴矢量icon引入 stylus 预处理 路由懒加载 路由拦截 Axios请求拦截 Vue
阅读全文
摘要：项目地址： "https://github.com/caochangkui/vue element responsive demo/tree/login register" 通过 vue cli3.0 + Element 构建项目前端，Node.js + Koa2 + MongoDB + Redis
阅读全文
摘要：1. 选择需要的图标，添加到购物车 2. 打开购物车，添加至我的项目 3. 打开项目列表 更多操作 编辑项目 修改FontClass/Symbol前缀，自定义一个名称，例如：v icon custom 4. 点击下载至本地，解压文件后 将里面各个文件(除去demo_index.html和demo.c
阅读全文
摘要：1. axios 常规用法： 2. 使用 asyns/await 将 axios 异步请求同步化： 2.1 当 axios 请求拿到的数据在不同场景下做相同的处理时： 2.2 当 axios 请求拿到的数据在不同场景下做不同的处理时：
阅读全文
摘要："项目地址:https://github.com/caochangkui/demo/tree/koa mongoose" 连接数据库 数据库名字为：koa mongoose 创建数据表 定义 mongoose 数据库操作方法 入口文件app.js
阅读全文
摘要：注册页包含手机验证码登录和密码的二次验证。 效果如下： 实现代码：
阅读全文
摘要：1. 创建 loading 公用组件 loading效果如下： 需要在 login.vue 页面背景图完全加载完成之前显示上面的loading效果 2. login.vue 页面
阅读全文
摘要：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化，例如时间戳格式化。 过滤器可以用在： 双花括号插值 v bind 表达式 (2.1.0+ 开始支持)。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <! 在双花括号中 {{ timestamp | fo
阅读全文
摘要：1. 开发环境跨域配置 在 vue.config.js 文件中： 注意，配置完成后要重启服务 配置 axios 请求的 baseUrl 在 main.js 中： 页面中发送请求： 此时，虽然发送的请求到地址：http://localhost:8080/api/postData/, 但是已经代理到了地
阅读全文
摘要：当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 1. 安装 syntax dynamic import 插件 如果在 vue cli 使用了 babel ，需要添加 插件
阅读全文
摘要：路由拦截 项目中，有些页面需要登录后才能进入，例如，在某页面A，用户在操作前需要先进入登录页（此时需要将上一页的地址（ ）作为query存入login页面的地址中，如: ），登录成功后再进入页面A。 首先，在router.js中创建路由时，给需要登录的路由中的 meta 添加字段：requireLo
阅读全文
摘要：1. 图片放入public文件夹下时 参考 "：https://cli.vuejs.org/zh/guide/html and static assets.html public %E6%96%87%E4%BB%B6%E5%A4%B9" 任何放置在 public 文件夹的静态资源都会被简单的复制，而
阅读全文
摘要：vue 监听页面窗口大小 vue enter 事件
阅读全文
摘要：项目地址： "https://github.com/caochangkui/vue cli3" 项目代码： 城市列表首页： City.vue 城市列表组件： List.vue 字母检索组件： Alphabet.vue 通过vuex管理已选城市：
阅读全文
摘要：Nuxt是基于Vue的一个应用框架，采用服务端渲染（SSR），可以让用户的Vue单页面应用（SPA）也可以有利于SEO。 项目初始化 参考： "https://zh.nuxtjs.org/guide/installation" 安装过程中的配置选项： ? Project name ? Project
阅读全文
摘要：1. nuxt项目初始化 下面是使用 koa 模板方法初始化一个项目，使用该方法需要将 nuxt 的版本降至1.4.2； 官方 "https://zh.nuxtjs.org/guide/installation" 还要提供了脚手架工具，可用使用最新的nuxt2.0版本初始化一个项目。 2. 新建路由
阅读全文
摘要：Vue 允许用户注册自定义指令。可以全局注册一个自定义指令，也可以局部注册。 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但
阅读全文
摘要：在VUE中，数据从父组件流向（传递）给子组件，只能单向绑定，在子组件内部不应该修改父组件传递过来的数据。 如果必须修改子组件中接收的数据，可以： 1. 作为data中局部数据，进行改动 2. 作为子组件中的computed树属性 例如，下面例子中，虽然可以实现count加1，但是会报错。 <!DOC
阅读全文
摘要：简单来说，v if 的初始化较快，但切换代价高；v show 初始化慢，但切换成本低 1.共同点 v if 和 v show 都可以动态地显示DOM元素 2.区别 （1）手段： v if 是动态的向DOM树内添加或者删除DOM元素； v show 是通过设置DOM元素的display样式属性控制显隐
阅读全文
