WebDestiny的博客

ul> <li v-for="(item, index) in data" @click="handleClick(index)"> Click Me </li></ul>然后这样的话，结果就是所有的li元素都绑定了事件。我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。为了更好...

前言：provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。vue官方介绍：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。提示：provide和inject绑定并不是可响应的。这是刻意为之的。然而...

前言：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，但并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发实际需要进行权衡和确定。运用vueX的场景：多个视图依赖于同一状态，此时传参的方法对于多层嵌套的组件将...

vue-router 有 3 种路由模式：hash、history、abstract：switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options...

一、给全选框绑定点击事件HTML：<div class="fixedLef" @click="chooseAllCart"> <input type="checkbox" :checked="chooseAll" name id /> <p>全选</p> </div>JS： chooseAllC...

一、首先让我们看一下vue中的源码中key值的使用因为key值的使用主要是在diff算法中用到, 所以我们可以在vue源码的src\core\vdom\patch.js目录中可以找到相关代码来进行分析。sameVnode函数从代码上可以看到，此处 key 决定了 当前节点是否应该 patch（打补丁），所以 key不相同的话，节点将会被销毁/添加，因此会执行如下事件，执行过程中会完整...

Build Setup 使用步骤# 安装 installnpm install vue-piczoom --save# 使用 use--scriptimport PicZoom from 'vue-piczoom'export default { name: 'App', components: { PicZoom }}--html<pic-z...

对象语法我们可以传给v-bind:class一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }"></div>上面的语法表示active这个 class 存在与否将取决于数据属性isActive的truthiness。你可以在对象中传入更多属性来动态切换多个 class。此外，v...

一、安装vue-i18n插件npm i vue-i18n二、main.js文件的配置import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识 //this.$i18n.locale //...

一、安装npm install qrcodejs2 --save二、引用importQRcode from 'qrcodejs2'三、HTML<div id="qrcode"></div>四、jsmethods: { // 生成二维码 qrcode() { let that = this; ...

安装npm install --save vue-fullpage.js引用import VueFullpage from 'vue-fullpage.js'Vue.use(VueFullpage)使用<template> <div> <full-page :options="options"> ...

html：//绑定点击事件<div class="wlAddBtn " @click="add()"> 新增</div>//要复制的HTML结构 <div class="model" v-for="(val,index) in htmlArr" :key="index"> <p class="modelTitle...

前言：在项目中使用到了ES6的Promise对象，代码在谷歌浏览器中正常运行，而在360浏览器下的兼容模式下，IE内核是不支持Promise的。ES6 promise的支持情况：一、polyfill.js解决<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>/...

1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，location.reload();或者this.$router.go(0);刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject...

有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件，提高用户体验。安装依赖使用npm安装vue-directive-touch组件。npm install vue-directive-touch --save引入组件在main.js中引入vue...

Vue 官网对NextTick的解释：NextTick是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。尤其是和第三方插件进行配合的时候，免不了要进行DOM操作。而nextTick就提供了一个桥梁，它可以确保我们操作的是更新后的DOM。当Dom元素状态发生变化时重新应用该插件，就会用到该方法，这时候就需要在 $nextTick 的回调函数中...

首先我们要先理解qs和axios到底帮我们干了什么：简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。具体的使用通常使用的有两种形式：qs.parse()；作用是将URL解析成对象的形式 。let url = 'a=1&b=2&c=3';Qs.parse(url);//输出结果{ a:'1', b:'2', c...

定义路由地址：const routes = [{path: ‘/’,name: ‘index’,component: index,//此处的meta 中的title 即为 微信的头部标签名meta: {title: " 活动报名"},},{path: ‘/indexApply’,name: ‘indexApply’,component: indexApply,meta:...

原理：通过比较可视区域的高度 innerHeight与该元素近距离可视区域顶部的距离的大小关系来决定是否触发（类名的增加与删除）默认一个页面只能同时存在一个window.onscroll函数.注意：具体的参数计算要根据自己的实际情况进行选取，而且最好将目标元素在控制台打印出来，到其原型链上寻找目标属性，避免出现null或者undefined即目标元素属性为空的情况案例：当目标元素滚动到可视...

<script type="text/javascript">if(/Android|webOS|iPhone|ipod|BalckBerry/i.test(navigator.userAgent)){window.location.href="移动端地址"console.log(/Android|webOS|iPhone|ipod|BalckBerry/i.test(n...

一：首先打开命令窗口输入 ：ipconfig 后，回车会看到本机的IP地址二：打开vue项目文件在本机运行，在项目目录中的config 文件紧接着我们会看到index.js 文件，在文件中找到如下代码行 dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', ...

一：首先，在 .vue文件中设置如下：（用webpack和vue-cli的话不建议使用该方法）<template src="./record.html"></template><script src="./record.js"></script><style src="./record.scss"lang="scss">&...

一、减少HTTP请求上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。二、CSS SpritesCSS Sprites直译过来就是CSS精灵，即页面上有许多重复的图片，可以选择用精灵图的的方式还有压缩图片和更改图片格式，使用CSS Sprites还有可能降低下载量，可能大家会认为合并后的图片会比分离图片的...

一：在安装过脚手架和webpack后（只需要安装一次）先新建一个空白文件夹二：在当前项目下打开命令窗口初始化一个基于webpack 的项目。项目名称为：vuedemo 运行vue init webpack vuedemo（vuedmeo为项目名称）三：init项目时候遇到的坑： 然后会看到提示 ？project name （vuedemo） 一直直接回车即可 直到看...

一：在我们的vue项目中安装好jquery后，一般在脚手架中会自动引入，接着我们在main.js文件中引入即可，接下来就是该我们进行配置的时候了，首先在我们的项目目录汇总打开webpack.base.conf.js文件，开始顶部是这样的紧接着再代码块中加上一句：var path = require('path')var utils = require('./utils')var ...

一：首先根据vue中的ref标记（例如：this.$refs.descriptionInfo.$el.children）获取到富文本元素中的所有标签返回的结果是一个数组：[ 0: img ，1: h1 length: 2 ] 注意：拿到的数组可能是一个伪数组，打印出长度为零：Collection有length属性，但是js调用时length为0的问题，这里获取到的是个伪数组...

1. 安装插件npm install html2canvas --save现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的bug说明。2. 使用<div class="imageWrapper" ref="imageWrapper"> <img class="real_pic" :src="dataU...

//1. 能够触发当前组件标签身上定义的一个事件 //2. 要触发当前组件标签身上的fn这个事件 //3. 所以我们要给当前组件标签注册一个fn事件 //4. 通过@就是v-on的缩写 @fn="" //5. 因为注册了fn事件，所以需要一个事件函数 @fn...

在解决问题之前先让我们了解下vue中的hash模式和history模式：vue中的hash模式：hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:window.onhashchange = function(event){console.log(event.oldURL, event.newURL);let hash = lo...

在vue中我们进行路由跳转的时候，会存在一个路由记录存储在$route对象当中，路由所匹配到的所有路由记录都会暴露为$route对象 (还有在导航守卫中的路由对象) ，而这些记录我们可以通过$route.matched来获取，返回的结果为一个数组对象，里面有to指向路由的相关信息，例如：path，name，meta等等。在此同时，每个router跳转之前都会调用的一个方法即vur-...

vue-cli构建的vue项目打包配置一:在项目中打开config文件夹中的index.js文件，如下图所示：二：在该文件中的的build:{…}中修改，目的是为了定义打包后的文件名，以及保证打包后的图片路径可以被正常显示。相关配置如下图所示。其中的name为自定义的文件名，名字上下要统一，assetsPublicPath: ‘./’, 将路径修改为./ 是为了保证打包之后图片路径能被...