vm.$watch用法： vm.$watch( expOrFn, callback, [options] ) ，返回值为 unwatch 是一个函数用来取消观察；下面主要理解 options 中的两个参数 deep 和 immediate 以及 unwatch Vue.prototype.$watch = function (expOrFn, cb, options) {const vm = thisoptions = options || {}const watcher = new Watcher(vm, expOrFn, cb, options) if(options.immediate) {cb.call(vm, watcher,.value)}return function unwatchFn() {watche...
两组件间传值，可能包含多种情况，有父子组件和非父子组件，对于父子组件网上有很详细的方法讲解，但非父子组件传值有用bus总线，还有一些其他方法，其中的使用路由跳转的方法讲解太过简洁，难以理解。因为是公司项目，采用的是公司封装的UI框架，但基本上还是采用vue框架，ts编写。所以一些样式结构可能没有参考价值，但我会讲解清楚每一部分作用，主要是路由跳转部分的代码实现。 首先，需求如下图，树状列表每一项有一个编辑按钮...
用小程序的 animation 属性实现循环动画的开启与暂停，并封装到组件。 实现一个字体图标组件的循环旋转动画开启/暂停用于点击图标，字体颜色变换，开始循环旋转动画，并刷新内容刷新结束，停止动画，并设置字体颜色为原来的主要利用 setInterval 定时器循环执行动画首先，组件写出来添加点击事件，动画属性， style 属性（用来动态修改样式） src/components/refresh.vue<template><div><divclass="iconfont icon-shuaxin":animati...
问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如queryData: {name: ,creator: ,selectedStatus: ,time: [],}, 第一种解决方案：直接对象现在我需要监听这个queryData，我可以这样做： watch: {queryData: {handler: function() {//do something},deep: true} } 第二种解决方案：deep里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方...
fetch的由来和定义 fetch的由来 众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。而Fetch 的出现就是为了解决 XHR 存在的问题。 fetch的定义和使用 MDN中的描述...
以前做这种操作就是简单的display：block，但现在用户的要求也越来越高，需要美观和动画感。 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。 看下效果图：点开效果：其实原理比较简单，就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。 子菜单的样式：.tree-son-menu{background-color: #FFF;.menu-body {z-index: 20;positio...
文字比较难解释，直接看图应该就懂是要做什么了。需求 工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。 思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号...
组件的通信一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。常用的通信手段有两种：1.ref：给元素或组件注册引用信息2.children:访问父级组件和子组件的实例。这两种方式都是直接通过实例的方式获取的方式。示例如下：//comA组件A export default {data () {return {title: 测试通信}},methods: {sayHello () {window.alert(你好);}} } 这里引用组件A<template><comA ref="co...
写在前面vue-cli 3.x 的beta版本已经发布了一段时间，很早就像体验一番一直找不到时间。这些日子刚好有空就想着依照网上的一些例子练下手，刚一上手就踩到坑了。3.x 版本对整个项目的构建都有很大的改动，项目的默认配置整个都转移到CLI service里去了，从而所有的配置文件在初始化的项目中并没有生成。初次生成项目的时候可谓是完全懵的，无论是baidu还是google，对于3.x的介绍几乎就没有，仅有的一些也只是项目的一些生成流程，那...
前言下班前，20分钟，发一篇。。。简单介绍，使用keep-alive的时候，返回前一页，没有保持滚动条位置。事实上，就算不使用keep-alive，位置也没有被记录。但是，在不适用keep-alive的时候，页面内容会刷新，所以就随他去了……就是这么任性…… 思路官方有推荐一个scrollBehavior，链接，但是上面标注，只在history.pushState的浏览器生效，不知道是不是只能开启history.pushState才可以使用，看了下实现，挺不友好的，还是自己搞一...
在项目中遇到了一个性能问题 vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下 2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下的 根据项目需求，这...
本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue动画</title><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/2.0/animate.css" rel="external nofollow" /><style>#box{width:400px;margin: 0 auto;}#div1{width:100px;...
Vue项目中实现用户登录及token验证先说一下我的实现步骤： 使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后， 拿到token，将token存储到sessionStorage中，并跳转到首页前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。注销后，就清除sessionStorage里的token信息并跳转到登录页面使用eas...
浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。 基本知识 浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和JavaScript创建新的扩展程序，如果你曾经写过网页，那么写一个插件是非常轻松的事情。 常见的插件一般就是地址栏后面的一个图标，点击后给你当前网页提供各种功能，或者在你点击网页右...
本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考，具体如下： vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？ 自己定义的指令就是自定义指令。 语法： Vue.directive(id, definition) 这里可以参考vue中的指令 <h1 v-if="yes">Yes</h1> 其中，if就是指令ID，yes是expression Vue.directive()传入接受两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数。 钩子函...