前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里，所以请认真看完，要不然直接复制的话，容易出错的。资源Vue.jsElement UI优化一：图片加载动画只有当图片加载完成后才可以显示图片，加载动画结束。我们使用Element UI中的loading组件来用作加载的动画。假设一个...
Vue2.x响应式原理怎么实现的?Vue 最独特的特性之一，是其非侵入性的响应式系统。那么什么是响应式原理？数据模型仅仅是普通的JavaScript对象，而当我
，本博文主要讲述【】，文字通...
components.jsimport { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBox11, decoration1 } from '@jiaminghi/data-view'const
现在Vue几乎公司里都用，所以掌握Vue至关重要，这里我总结了几点，希望对大家有用1、Vue项目中为什么要在列表组件中写key，作用是什么？我们在业务组件中，会经常使用循环列表，当时用v-for命令时，会在后面写上:key，那么为什么建议写呢？key的作用是更新组件时判断两个节点是否相同。相同则复用，不相同就删除旧的创建新的。正是因为带唯一key时每次更新都不能找到可复用的节点，不但要销...
首先呢，我们来看看一般项目路由是怎么划分的。
// 获取验证码let endMsRes = new Date().getTime() + 45000;localStorage.setItem("myEndTime", JSON.stringify(endMsRes));this.codeCountDown(endMsRes);// 存储验证码时隔 codeCountDown(endMsRes) { this.BtnStatus = false; this.countDownTime = Math.ceil((e
在写Vuex之前，我们先用一个简单的例子来实现一个小demo大家都知道Vue的父传子用在很多场景，比如像这样：父组件： <template> <div id="app"> <product-list-one :msg='msg'></product-list-one> </div> </templa...
卸载：1、卸载cnpmnpm uninstall cnpm -g2、卸载vue-clinpm uninstall @vue/cli -g3、卸载nodejs和删除文件C:\Program Files (x86)\nodejsC:\Program Files\nodejsC:\Users\Administrator\AppData\Roaming\npmC:\Users\Ad...
yarn add default-passive-eventsmain.jsimport 'default-passive-events';
marquee组件<template> <div class="marquee-wrap"> <div class="scroll"> <p class="marquee">{{text}}</p> <p class="copy"></p> </div> ...
Vue版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style> html, body { display: flex; ...
前言主要知识点：路由原理Hash与History实现路由一、一个vue路由的工作原理前端路由与后端路由的区别：后端路由：输入url>请求发送到服务器>服务器解析请求的路径>拿取对应的页面>返回回去前端路由：输入url>js解析地址>找到对应的地址的页面>执行页面生成的js>看到页面vue-router工作流程二、Hash...
一、各个模块的作用：state 用来数据共享数据存储mutation 用来注册改变数据状态（同步）getters 用来对共享数据进行过滤并计数操作action 解决异步改变共享数据（异步）二、 创建文件：actions.jsgetters.jsindex.jsmutations.jsmutation-types.jsstate.js三、编辑文件...
效果图：tab栏可以滑动，切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时，它会有一个默认的高度，你必须动态的获取数据列表的高度覆盖原来的默认高度。下面是代码html<template> <view> <scroll-view class="scroll1" scroll-x="true"> <vi...
el-select示例：代码： <el-select v-model="doc.zhic" placeholder="请选择"> <el-option v-for="(item,index) in zhicdata" :key="index" :l...
首先我们来了解一下MVC、MVP、MVMM这三大架构模式在前端角度上的理解。MVC分别是 Model（模型）、View（视图）、Controller（控制器）三个模块。View（视图层）最主要完成前端的数据展示，Controller（控制层）是对数据的接收和触发事件的接收和传递，Model（模型层）则是对数据的储存和处理，再传递给视图层相应或者展示。如下图所示，整个过程是单链条的传递，在前端开发...
大家为了节省空间，常常进行按需引入来节省空间，这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。针对前面element 按需引入的一些配置这里就不再详细介绍了。那么这里讲的是在main.js写入以下代码。import { InfiniteScroll } from 'element-ui';Vue.use(InfiniteScroll) 好，这样引入、注册了，那么我...
前言持续更新一、UI框架推荐 Elemnet ui二、图表vue-schartnpm install vue-schart -S<template> <div id="app"> <schart :canvasId="canvasId" :type="type" :width="w...
前言排名不分先后，按自己习惯来的。一、provide、inject 高级组件总述：provide在父组件中定义，inject 在子孙组件中定义。provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。inject ：通常是一个字符串数组。作用：provide、inject实现父子（孙）传值。示例：父组件：<template> ...
众所周知，Vue的两大重要概念：数据驱动组件系统接下来我们浅析数据双向绑定的原理一、vue21、认识definePropertyvue2中的双向绑定是基于defineProperty的get操作与set操作，那么我们简单认识下defineProperty，作用： 就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。那么我们先来看下Object.getOwnPrope...
1、在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域的url changeOrigin: true, pathRewrite: { '^/api': '/' } ...
1、命令行安装npm install vuetify --save2、在src目录中创建一个名为的文件夹plugins在里面，添加一个vuetify.js文件。代码如下import Vue from 'vue'import Vuetify from 'vuetify'import 'vuetify/dist/vuetify.min.css'Vue.use(Vuetify)expor...
一、安装1、npm安装npm i muse-ui -S或者CDN安装<link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css"><script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>2...
安装npm install --save js-md51、按需引入（在你需要的项目中引入）引入：import md5 from 'js-md5'使用：md5('加密信息')2、全局引入（main.js修改）引入：import md5 from 'js-md5';Vue.prototype.$md5 = md5;使用：this.$md5('加密信息') ...
1.事先安装好cnpm(淘宝镜像)npm install -g cnpm --registry=https://registry.npm.taobao.org这是网址，可以自己用命令行工具输入命令下载。2.cnpm install -g vue-cli全局安装vue脚手架工具。3.vue init webpack your_project_name创建一个脚手架项目eg:这时在命...
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible/flexible.js'在index.html加上 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <met...
app.vue<template> <div id="app"> <transition :name="transitionName"> <keep-alive > <router-view v-if="$route.meta.keepAlive" class="Router"></rout...
installnpm install vue-cookies --savemain.jsimport VueCookies from 'vue-cookies'Vue.use(VueCookies)API:设置this.$cookies.set(keyName, time)获取this.$cookies.get(keyName) 删除this.$cookies....
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
