zhaofeiweb的博客

预览文件

node版本管理

<input type = "file" accept="image/*" multiple class='inputbox' />直接调出上图选择<input type="file" accept="image/png,image/gif,image/jpeg" capture="camera" >可以直接调用相机，安卓手机需要支持，必须修改accept参数...

uploadPhoto(event){ var $file = event.currentTarget; var file = $file.files; let totallen = this.fileList.length+file.length if(totallen>4){ this.$toast('最多上传4张图片！') return false } for (var i = 0; i.

env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：saf

1.首先说明的现象进入详情页返回的时候，红色区块消失，swip组件滑动效果消失刷新页面纠正了，所以就找刷新页面的方法1.localtion.reload() 和this.$router.go(0) 页面会出现闪烁2.新建空白页跳转，然后再重空白页跳转回来 但是又出现问题了从top页返回不到A页面，top和empty页面出现了死循环，你会问为什么不做个判断让他跳转到A页面呢，首先我们这个是模块打包，A和我现在这个不是一个模块，所以返回到A以后等还是有问题3.provide /.

<img:src="item.headUrl||defaultImg"alt="">第一种(在data数组中保存数据的情况）defaultImg:require("@/views/ecrm-wx-top/assets/images/icon.png")第二种importicon from'@/views/ecrm-wx-top/assets/images/icon.png';defaultImg：icon第三种<im...

1.不要用form2.不要仅有一个input，写一个隐藏框<input type="text" style="display:none;" />3.form后面加上onsubmit="return false"因为element-ui 对input做了封装，使用@keyup.enter="fn"触发Enter键事件就不会触发，解决：后面追加.native。@keyup.enter.native="submitForm" 即可解决。...

<el-select v-model="form.cityId" placeholder="请选择" value-key="value"> <el-option v-for="item in citys" :key="item.value" :label="item.lab...

集中式管理和分布式管理git属于分布式，本地就是完整的版本库， 中央服务方便同事之间交互信息SVN和CVS都属于集中式管理 -->有个中央服务器，上传上去，下载修改，一旦中央服务器坏掉，所有人无法工作...

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage/cookie 和vuex中，并跳转路由页面vuex 存不存都无所谓，个人感觉这里只为了store管理好看点而已。...

数组变更检测注意事项：由于 JavaScript 的限制，Vue不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength举个例子：var vm = new Vue({ data: { items: ['a', '...

　vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：　　（1）使用Vue.http或this.$http　　（2）使用Vue.resource或this.$resource引入文件main.js import contant from './services/contant'// 引用常量import fun from ...

1.把请求存入 vue oulacancel里面 request (context, url, params) { return new Promise((resolve) => { let newParams if (params) { newParams = JSON.parse(JSON.stringify(params)) /...

传参: this.$router.push({ name:'xxx', params:{ id:id } }) 接收参数:this.$route.params.id传参: this.$router.push({ path:'/xxx', query:{ ...

checkedAll (index) { // 全选按钮let list = this.list.checkBoxConditions[index].conditionItemsif (this.checked[index] === true) { // 实现全选list.forEach(item => {item.isChecked = false})} else ...

报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei...

　var Event = new Vue();　　　　　　相当于又new了一个vue实例，Event中含有vue的全部方法；　　Event.$emit('msg',this.msg);　　　 发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；　　Event.$on('msg',function(msg){　　接收数据，第一个参数是数据的...

 1、执行命令： 1 npm install vue-jsonp --save 　　 2、src/main.js中添加：import VueJsonp from 'vue-jsonp'Vue.use(VueJsonp) 3、其它组件中基本使用方法：this.$jsonp(rootApi+'/company/Info'', 传...

HTTP 状态响应码：常见：200 ：服务器成功返回页面404 ：请求的网页不存在503：服务器暂时不能用具体：1**：请求收到继续处理100：继续处理101：切换协议2**：操作成功收到，分析，接受200：OK，服务器成功返回页面201：created，请求成功并且服务器创建了新的资源202：accepted，已接受请求，但未处理203...

&lt;el-scrollbar&gt;&lt;/el-scrollbar&gt; &lt;el-scrollbar style='height:100%'&gt; &lt;ul&gt; &lt;li v-for="(item, index) in menu" :key="item.code" v-bind:class="{active: isA

main.js Vue.Cancel = [] //全局定义一个对象router.beforeEach((to, from, next) =&gt; {while (Vue.Cancel.length &gt; 0) { // 存储的对象进行abort()Vue.Cancel.shift().abort()}}请求的地方加上 oneRequest = conte...

export function asyncLoadJs (url) {return new Promise((resolve, reject) =&gt; {// let hasLoaded = document.getElementsByTagName('script[src="' + url + '"]').length &gt; 0let item = document.getE...

安装 npm install mockjs在main.js 引入代码import './serivce/mock.js'在service/mock.jsconst Mock = require('mockjs')const Random = Mock.Randomconst produceNewsData = function () { let articles = [...

 在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。可以通过 $emit向父组件触发一个事件涉及到组件之间的通信的问题。组件之间的通信可以分为以下几种： 父子组件传递，父向子传递采用props，...

登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。在路由管理页面添加meta字段import Vue from 'vue'import Router from 'vue-router' Vue.use(Router) const...

computed 注意data 里面不需要声明fullname&lt;template&gt; &lt;div class="hello"&gt; &lt;h1&gt;{{ fullName}}&lt;/h1&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&gt;export default { props

首先，在mounted钩子中给window添加一个滚动滚动监听事件，mounted () { window.addEventListener('scroll', this.handleScroll)},然后在方法中，添加这个handleScroll方法handleScroll () { var scrollTop = window.pageYOffset || docum...

&lt;div @click="divEven" style="border:1px #188eee solid;"&gt;&lt;a href="www.baidu.com" @click="aEven"&gt;百度链接&lt;/a&gt;&lt;/div&gt;&lt;!--stop的使用：阻止事件冒泡的发生--&gt;&

&lt;ul class="b1"&gt; &lt;li v-for="(item, index) in menu" :key="index" @click="show(index)"&gt; &lt;div&gt;{{item.name}}&lt;/div&gt; &lt;ul :class ='

&lt;template&gt; &lt;div class="sliderBox"&gt; &lt;div class="slider-container theme-green" ref="sliderBar" :style="{width:sliderWidth+'px'}"&gt; &lt;div class="back-bar&

http://blog.youkuaiyun.com/denl0918/article/details/54292262vue教程中有这样一个注意事项：第一种具体情况如下：运行结果：当利用索引改变数组某一项时，页面不会刷新。解决方法如下：运行结果：三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。或者用 vm = JSON.p...

一、状态管理（vuex）简介        vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。 二、状态管理核心状态管理有5个核心，分别是...

&lt;template&gt; &lt;div class="sliderBox"&gt; &lt;div class="slider-container theme-green" ref="sliderBar" :style="{width:sliderWidth+'px'}"&gt; &lt;div class="back-bar&

先张贴一张效果图：说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度 下面介绍使用方法：1、安装vue-happy-scroll推荐使用npm安装，这样可以跟随你的webpack配置去选择怎样打包npm install vue-happy-scroll --save-dev当然，你也可以选择使用script标签的方式引入...

父组件向子组件传值步骤：在这里先定义一下，相对本案例来说：App.vue是父组件，Second-module.vue是子组件。 一、首先，值肯定是定义在父组件中的，供所有子组件共享。所以要在父组件的data中定义值：  二、其次，父组件要和子组件有契合点：就是在父组件中调用、注册、引用子组件：　　调用： 　　注册： 　　引用： 三、接下来...

&lt;ul :style="{'height':toggleMenu[index] ? 0 : `${item.subMenus.length*45}px`}"&gt;&lt;/ul&gt; 【1】当需要过渡的属性初始值为 auto 时，不会进行过渡。

一、qrcode-vue模块       该模块是用来动态生成二维码的vue模块插件，&lt;qrcode-vue&gt;&lt;/qrcode-vue&gt;的底层其实是一个&lt;canvas&gt;&lt;/canvas&gt;标签。要想使用qrcode.vue插件，需要用vue的脚手架安装这个插件安装指令npm install qrcode --save-dev，在这里我举一个例子。...

定义全局变量原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：Global.vue文件：  &lt;script&gt; const serverSrc='www.ba...

首先要知道export，import ，export default是什么ES6模块主要有两个功能：export和importexport用于对外输出本模块（一个文件可以理解为一个模块）变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES...