前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue是Angular和React的结合,既有Angular的模板语法也有React的组件化体系,以至于促使其发展飞快.下面来就来讲讲Vue脚手架(vue-cli)的安装吧. Vue CLI 3 中文文档 安装vue(使用npm 推荐) # 全局安装 vue-cli $ npm install --glo

第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 然后就可以在组件中使用该插件 <template> <div> <swiper :options="swiperOption"  ref="mySwiper"> &

一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上

多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多选框的数据类似只能在页面上渲染一次.先看一下我项目中遇到的情况:   页面渲染出来的效果是这样的,根据后台数据循环生成的   后台返回的数据:     一开始我是先把后台的值赋值给页面需要渲染的数据,在遍历数据增加一个ischeck值来控制多选框的选择     HTML代码     但是这样渲染出来

Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理.在Vue中事件修饰符主要有: .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡 .prevent:等同于JavaScript中的even

在前端写一个弹窗可能很简单,那如果同时有多个弹窗呢 这样的话就要考虑弹窗的展示问题,肯定是不能叠加在一起的,这时候就要通过队列(先进先出)来展示 思路就是根据队列来实现,至于具体的实现方式,可以在项目中灵活运用 在vue中可以通过vuex存储队列,用watch方法来监听队列的变化 举个

作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue开发者,虽然在项目中频繁使用过computed和watch,但从来没有系统的学习过,总觉得对这两个知识点有些一知半解. 如果你也和我一样,就一起来回顾和总结一下这两个知识点吧. 本篇非源码分析,只是从两者各自的用法.特性等做一些总结. 2. Vue中的computed Vue中的computed又叫

在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中添加下面两行代码 import echarts from 'echarts' Vue.prototype.$echarts = echarts 注:import echarts from 'echarts' 引入echarts后,不能全局使用echarts,所以通过Vue.prototype将ech

项目中有用到右键菜单,故用了@contextmenu,由于本人是用的PC电脑,所以一切正常, 但是有同事用mac测试了一下,问题随之而来,MAC上右键按下就触发了, PC上面是鼠标抬起才会触发,所以这样就导致了问题的出现,因为我在方法里面再给document上注册了一个鼠标抬起隐藏右键菜单. 所以在PC上一切正常,但是MAC上面右键菜单只要抬起鼠标就隐藏了. 问题找到了 那么怎么解决呢? 目前也没有很好的思路 就先判断是否是MAC电脑,如果是,就把mouseup事件换成click,click的体

显示mac电脑中隐藏的文件和文件夹的办法:打开电脑,cd到相应的文件夹,输入以下命令,为显示隐藏的文件和文件夹 defaults write com.apple.finder AppleShowAllFiles -bool true; KillAll Finder将true改为false为隐藏隐藏的文件和文件夹

简单介绍: ToolWiz Mac Boost是一款适用于Mac电脑清理加速最好的终极应用, 使您的Mac电脑干净有条理, 执行飞速且稳定.始终保持最佳状态! ToolWiz Mac Boost 运用最简单有效的加速方法.界面简洁易懂,将您Mac电脑的安全和速度提升到更高的层次水平. ToolWiz Mac Boost is the ultimate and best used app for keeping your Mac clean, fast, and running cool all

本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /** * 参考文档 * [eslint英文文档]https://eslint.org/docs/user-guide/configuring * [eslint中文文档]http://eslint.cn/docs/rules/ */ /** * eslint有三种使用方式 * [1]js代码中通过注释

由于在日常开发中,部分node版本不支持,因此,我们需要对已安装的node进行卸载重装,步骤如下: 一.在终端依次输入以下命令   sudo npm uninstall npm -g   sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*   sudo rm -rf /usr/local/include/node /Users/$USER/.npm   sudo rm 

为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式,应为jq请求使用最为频繁. 1.jq方式 1.1 首先在vue中引入全局 jq  常见引入jq的方法有:直接在根目录的index.html中引入jq 这样引入jq存在一个问题,有时候没有被加载,就会造成jq不能使用: 引入全局jq的较优方案:更改build下的配置文件,详情链接. 1.2  在组件

做一个简单的vuex如何使用的介绍: 先安装: npm i vuex --save-dev 新建一个store文件夹, 在store文件夹中建一个index.js文件,在该文件中:         import Vue from 'vue'         import vuex from 'vuex'         Vue.use(vuex)         var state={  //state中的属性就是需要在vuex中存放的数据             name:"电脑",

vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是key的作用主要是为了高效的更新虚拟DOM ref的特性 React的ref有3种用法: 字符串(已废弃) 回调函数 React.createRef() (React16.3提供) 1. 字符串 最早的ref用法. 1.dom节点上使用,通过this.refs[refName]来引用真实的dom节点

Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两个兄弟组建 C2.vue <template> <view> <h1>c2</h1> </view> </template> <script> // 引入Bus import Bus from '@/util/Bus'; ex

Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件并不能通过修改props传过来的数据修改父组件的相应状态,所有的prop都使得其父子prop之间形成了一个单向下行绑定,父级prop的更新会向下流动到子组件中,但是反过来则不行,这样会防止从子组件意外改变父级组件的状

在一个和微信相关的业务管理系统,我们有时候需要和用户的微信账号信息进行绑定,如对公众号.企业微信等账号绑定特定的系统用户,可以进行扫码登录.微信信息发送等操作,用户的绑定主要就是记录公众号用户的openid或者企业微信的userid,那样可以通过微信API接口,发送系统消息或业务消息. 1.系统用户界面的绑定处理 1)公众号和系统用户绑定 我们绑定用户,可以在系统用户管理界面中绑定相关的信息,也可以在查看当前用户界面中提供入口绑定. 在用户管理界面中的列表界面中绑定,界面如下所示. 上面的绑定操

环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的2个接口实现用户登录功能,首先显示登录页面,调用../user/getCode.do获取验证码,然后用户界面输入用户名.密码和验证码,点击登录之后调用../user/doLogin.do接口实现登录.结果../user/doLogin.do后端总是找不到验证码,因为浏览器没有把cookie中的JSE

        Linux 中如何卸载已安装的软件. Linux软件的安装和卸载一直是困扰许多新用户的难题.在Windows中,我们可以使用软件自带的安装卸载程序或在控制面板中的“添加/删除程序”来实现.与其相类似,在Linux下有一个功能强大的软件安装卸载工具,名为RPM.它可以用来建立.安装.查询.更新.卸载软件.该工具是在命令行下使用的.在Shell的提示符后输入rpm,就可获得该命令的帮助信息. 软件的安装 Linux下软件的安装主要有两种不同的形式.第一种安装文件名为xxx.tar.g