vue
关注
分享
扫一扫
文章平均质量分 90
MiemieWan
这个作者很懒，什么都没留下…
展开
-
vue-cli2添加骨架屏
一、安装配置骨架屏插件1.安装插件page-skeleton-webpack-pluginnpm i --save page-skeleton-webpack-plugin 2.配置插件在webpack.base.conf.js文件中引入文件，进行配置：const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");module.exports = { plugins: [ new SkeletonPlugin({原创 2021-09-02 19:24:19 · 702 阅读 · 0 评论 -
vue SSR(开发)
一、传统服务端渲染、传统服务端渲染：原创 2021-06-02 12:10:36 · 811 阅读 · 1 评论 -
Vue2中MVVM框架
代码仓库地址：https://github.com/141110126/write-vue/tree/main/jvue一、Vue响应式原理利用Object.defineProperty()劫持data数据,里面每个属性都定义了get和set方法 监听属性的变化，依赖收集：每个属性也都有个数组 保存着谁（视图watcher）依赖了它，当获取属性触发get时，收集了依赖，依赖更新：当属性变化触发set函数时，通知依赖，通知视图（watcher），视图（watcher）开始更新。Vue.原创 2021-05-19 16:52:43 · 411 阅读 · 1 评论 -
Vue2.0修饰符
一、修饰符修饰符有五种类型：二、表单修饰符1.trimtrim:去除数据头尾的空格<input type="text" v-model.trim="value">2.lazylazy:光标离开标签的时候，会赋值给变量，也就是在change事件之后再进行信息同步<input type="text" v-model.lazy="name">3.numbernumber：将数据转化成数字类型，当无法被parseFloat解析时返回原值（即字符原创 2020-12-29 20:59:46 · 2558 阅读 · 2 评论 -
Vue3.0理解
一、vue3.0亮点Performance:性能比Vue 2. x快1.2-2倍 Tree shaking support:按需编译,体积比Vue2. x更小 Composition API:组合API (类似React Hooks) Better TypeScript support:更好的Ts支持 Custom Renderer API:暴露了自定义道染API Fragment, Teleport (Protal), Suspense:更先进的组件二、Vue3.0是如何变快的1.原创 2020-11-27 17:14:34 · 1146 阅读 · 0 评论 -
Vue插件（概念、功能、开发）
一、组件和插件1.组件：是对某些功能或某模块的封装2.插件：是对一系列组件的封装二、插件的功能插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种： 添加全局方法或者 property。如：vue-custom-element 添加全局资源：指令/过滤器/过渡等。如vue-touch 通过全局混入来添加一些组件选项。如vue-router 添加 Vue 实例方法，通过把它们添加到Vue.prototype上实现。 ...原创 2020-05-13 18:25:21 · 561 阅读 · 0 评论 -
Vue源码解析
一、源码目录二、dist目录输出格式说明：带有common的文件是为browserify、webpack1准备的，带有vue.esm的文件是为webpack2+准备的，带有common的文件是兼容带有common的文件和AMD的（可在node端和浏览器里用）带有runtime的文件仅包含运行时，无编译器...原创 2020-04-30 17:49:06 · 501 阅读 · 0 评论 -
axios二次封装
背景：基于vue-cli，对axios进行二次封装流程：（1）建立api层，对api进行独立管理；（2）管理axios实例，对请求进行前后拦截；（3）接口api化，方法请求自动绑定，防止重复提交。代码：1、在src文件夹中创建api文件夹，以独立管理api。 创建index.js统一管理所有api，创建需要用到的api:login.js、shop.js...原创 2019-12-26 14:33:49 · 474 阅读 · 0 评论 -
vue路由按需加载(路由懒加载)的3种方式
1.vue异步组件vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件/* vue异步组件技术 */{ path: '/home', name: 'home', component: resolve => require(['@/components/...转载 2019-12-12 17:47:21 · 1101 阅读 · 1 评论 -
vue-cli（2-4）环境模式配置
Vue Cli 项目中有三种模式：development（开发模式）、production（生产模式）、test（测试模式）。每种模式可配置多个环境变量。若有多个开发环境，且每个环境的域名、主页不同，则需要给每个开发环境配置不同的域名等，打包时根据变量来区分不同的环境，引入相应的配置。一、vue-cli3和4环境模式配置文档：https://cli.vuejs.org/zh/...原创 2019-12-11 13:01:29 · 957 阅读 · 1 评论 -
vue-devtools安装
1.在github中下载：https://github.com/vuejs/vue-devtools2.解压后，进入文件夹，安装依赖，打包，生成src文件夹npm inpm run build3.在shells>chrome>mainifest.json中修改persistent为true:4.谷歌浏览器的扩展程序功能，勾选开发者模式，...原创 2019-10-30 11:29:35 · 186 阅读 · 0 评论 -
自动化测试（vue-cli4）
一、安装二、单元测试（jest）1.测试方法在src中新建utils.js：export function add(x, y) { return x + y;}在test/emaple.spec.js中写测试代码：import { add } from '../../src/utils'describe('测试加法函数', () => { it(...原创 2019-10-21 18:06:16 · 1977 阅读 · 0 评论 -
vue.use()原理和Vue插件的开发使用
参考：https://cn.vuejs.org/v2/guide/plugins.htmlhttps://juejin.im/post/5d8464a76fb9a06b3260ad30https://www.cnblogs.com/adouwt/p/9211003.html一、背景为什么在引入Vue-Router、ElementUI的时候需要Vue.use()？而引入axios...原创 2019-10-17 19:31:10 · 1612 阅读 · 0 评论 -
VUE进阶
一、Vue.directive自定义组件1.钩子函数（生命周期）（1）bind:只调用一次，指令第一次绑定到元素时调用。（2）inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。（3）update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。（4）componentUpdated：指令所在组件的 VNo...原创 2019-09-19 14:24:45 · 484 阅读 · 0 评论 -
js长按事件
方法一、touch事件var self = this;var longClick = false;$(".product").on({ touchstart: function(e){ longClick = false;//设置初始为false timeOutEvent = setTimeout(function(){ /...原创 2018-07-21 09:32:58 · 5003 阅读 · 0 评论 -
微信语音（录音，上传，下载，播放，停止）
1.api:微信:JSSDK https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115（1）初始化微信：一般在socket初始化后initWx() { let _this = this; wx.config(_this.wxConfig); ...原创 2018-07-30 10:06:11 · 4166 阅读 · 2 评论 -
Vue 详解filter
vue中的过滤器filter分两种： 1.本地过滤器：在组件中定义和使用2.全局过滤器：在全局定义和使用，但必须在创建Vue实例前定义<!DOCTYPE html><html><head> <title>filter</title> <script src="https://cdn.jsdelivr.net...原创 2018-11-05 11:24:51 · 610 阅读 · 0 评论 -
Vue 计算属性和侦听器(watch和computed)
1.watch：用来侦听data中已存在的数据的变化（只能监视单个变量） ，对于数组和对象的改变 要用深度监听。（因为监听的是对象的地址。修改数组或对象时地址并没有改变改变的是指定地址中的值）<!DOCTYPE html><html><head> <title>计算属性和侦听器(watch和computed)</title...原创 2018-11-05 14:49:41 · 913 阅读 · 0 评论 -
vue项目 手机调试配置
vue开发手机版项目过程中，需要手机调试，网上给的方法有很多，我的设备是win10电脑 + 安卓手机，常用两种手机调试本地项目方法：chrome和微信开发者工具。一、vue-cli2项目中更改配置将config/index.js中的host改为你的局域网地址（局域网地址：在cmd中输入ipconfig，回车返回的 IPv4 地址就是局域网地址） 以下是两种...原创 2018-12-20 17:29:02 · 2951 阅读 · 0 评论 -
VUE项目SEO问题的解决
一.SEO及网站渲染SEO（Search Engine Optimization）：汉译为搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。网站的渲染本质一样，都是字符串拼接，将数据渲染进一些固定格式的html代码中形成最终的html展示在用户页面上。拼接字符串必然引起性能的消耗。1.「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制； 浏览器...原创 2018-12-21 15:28:35 · 10841 阅读 · 1 评论 -
vue中axios 兼容IE浏览器
在项目开发过程中用到了axios来获取数据，但在IE中报错：proimse未定义 ，这是因为axios本质上是封装了ES6语法的promise,而promise在IE上并不兼容。解决办法：安装babel-polyfill具体步骤：1.安装：npm i --save-dev babel-polyfill2.在main.js中 import 'babel-polyfill'3.在buil...原创 2018-12-21 17:49:22 · 3090 阅读 · 0 评论 -
vue项目使用rem（pc和移动通用）
vue项目使用rem（pc和移动通用）new Vue({ el: '#app', router, components: { App }, template: '<App/>', mounted() { setRem(); }})// rem适配function setRem() { var whdef = 100/1920;// 表示...原创 2018-12-21 17:58:42 · 7385 阅读 · 2 评论 -
Nuxt.js(创建vue应用程序的框架)
用prerender-spa-plugin（预渲染） + vue-meta-info（设置页面meta信息）对动态页面SEO 问题很多，当页面数据切换时，meta信息无法及时修改。。所以改用服务器渲染方式。。关于nuxt的详细信息 --->官网: https://zh.nuxtjs.org/guide一、安装npx create-nuxt-app二、目录结构...原创 2018-12-29 16:57:29 · 1327 阅读 · 0 评论 -
项目首页先异步获取全局sessionId，再进行其他异步操作
在项目中，一般会通过接口来确认用户，返回用户sessionId,后面全部接口都需提交sessionId,在vue和小程序中，一般会在全局js（main.js / app.js）中异步获取，但是在未获取到时，index页面可能已经加载并进行了其他异步操作。解决方法：方法一：在index页前加一个启动页，获取成功后，然后再跳转首页；方法二：使用promise，判断进程状态，在index...原创 2019-01-26 17:09:21 · 814 阅读 · 0 评论 -
vue项目添加插件
一、安装postcss-px-to-viewport（将px转化为vw)1.安装cnpm i postcss-px-to-viewport --save2.配置:在build/vue-loader.conf.js中module.exports = { loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled,...原创 2019-05-30 11:57:41 · 709 阅读 · 0 评论 -
vue + 微信分享
1、背景：使用vue框架的公众号网页3、要求：所有页面隐藏除微信浏览器的其他浏览器打开功能，设置好友分享和朋友圈分享4、处理过程：（1）在index.html中载入jssdk：http://res.wx.qq.com/open/js/jweixin-1.4.0.js（2）通过调用后台接口，获取微信配置所需的配置信息注意：所有需要使用JS-SDK的页面必须先注入配置信息，否则将无...原创 2019-06-26 10:26:06 · 1787 阅读 · 0 评论 -
易被忽略的vue知识点
1.v-once指令：只能执行一次性地插值，当数据改变时，插值处的内容不会更新。例：<template> <div> <h1>{{num}}</h1> <!-- 点击后一直在改变 --> <h1 v-once>{{num}}</h1> <!-- 点击后一直在...原创 2019-06-28 17:00:33 · 339 阅读 · 0 评论 -
vue起步
生命周期1.npm安装：(1)安装vue:npm install vue(2)安装vue-cli:npm install -g vue-cli(3)创建基于webpack新项目my-project：vue init webpack my-project(4)进入项目，安装运行：cd my-projectnpm installnpm run dev2.Vue组件包...原创 2018-06-23 17:06:41 · 521 阅读 · 0 评论