vue

router.beforeEach((to, from, next) => { // 设置全局店铺ID shopid const shopid = from.query.shopid // 如果没有shopid 先跳转到总店 shopid为1 if (!shopid && !to.query.shopid) { router.replace({ path: '/', query: { 'shopid': 1 } }) return false } // 此处通过修改push给query增加shopid的方式, 会重置跳转数据. // 这会影响到replace跳转, 导致变成正常push跳转. // 如果原跳转是replace方式, 需要在query里主动添加shopid. 避免被重置数据. if (shopid && (shopid !== to.query.shopid)) { // 如果传递了shopid 走正常路由 // 否则先手动添加shopid参数 if (!to.query.shopid) { to.query.shopid = shopid router.push({ path: to.path, query: to.query }) return false } } // 设置页面标题 const title = to.meta && to.meta.title

步骤： 第一步：assets目录下添加cookie.js文件 export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() //console.log(document.cookie) } export function getCookie(c_name){ if (document.cookie.length>0){ let c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1){ c_start=c_start + c_name.length+1 let c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" } export function

原文地址 在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 根据官方文档定义： 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 。 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。 看以下实例： <template> <div> <p @click="addd(obj)">{{obj.d}}</p> <p @click="adde(obj)"> {{obj.e}}</p> </div> </template> <script> export default { data(){ return { obj:{} } }, mounted() { this.obj = {d: 0}; this.obj.e = 0; console.log('after--', this.obj); }, methods: { addd(item) { item.d = item.d + 1; console.log('item-

1.实现目标：目标是输入一个数组，生成一个列表；通过拖拽排序，拖拽结束后输出一个经过排序的数组。 2.实现思路： 2.1是使用HTML5的drag功能来实现，每次拖拽时直接操作Dom节点排序，拖拽结束后再根据实际的dom节点遍历得出新的数组。 2.2使用mousedown,mouseover等鼠标事件来实现，每次监听事件时，仅改动列表项的样式transform，而不操作实际的dom顺序。拖拽结束时，根据transform计算数组项顺序，得出新数组用vue数据驱动的方式重绘列表，重置所有样式。 总的来说就是可以通过不同的监听事件（drag、mouseover），按不同的顺序操作Dom（1.先操作实际dom，再添加动画，在输出数组；2。不操作实际dom，仅改变transfrom，得出新数组，用新数组生成新列表来更新节点）。 3.实际代码 3.1第一种实现 html部分。（被拖拽的元素需要设置draggable=true,否则不会有效果） <div id="app"> <ul @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd" ref="parentNode"> <li v-for="(item,index) in data" :key="index" class="item" draggable=

vue中的传值是个很烦的问题，记录一下自己完成的这个需求。 首先，被引用的称之为子组件，当前页面为父组件，这个不能搞错。 子组件传值，要用到this.$emit。 子组件页面，需要在一个函数中使用this.$emit的方法来传。 saves () { localStorage.setItem('note', this.note); this.h1 = localStorage.getItem('note'); console.log(this.h1) // this.conShow = true // this.show = false // this.showBtn = true // 向父传 this.$emit('hello', this.h1) 第一个参数是自定义的方法，第二个是要传的参数 }, 接下来是父组件 在父组件中，找到引用的这个组件，然后注册(v-on/@)刚刚在子组件定义的方法，这个很重要，在别的地方引用是拿不到的 <editor @hello='getHello'></editor> editor是我引用的这个子组件。 =====hello是之前子组件中定义的那个方法，进行@，然后后面的getHello则是我们定义的方法。 在methods中： 这里的getHello就是我们自己在上面定义的事件了 // 接子组件的参数， getHello (data) {

导入Vue项目后，#npm run dev 报错： error in ./src/pages/hello.vue Module build failed: Error: Node Sass does not yet support your current environment....... 大致就是编译某个vue文件失败，因为构造Module失败，node sass 不支持当前环境【主要是 node 】。 先看一下node版本： #node --version 升级了node版本/ node版本太高会造成node-sass不兼容的问题，那么就再install node-sass一下就行了。 　 #npm i node-sass -D 　【<==>#npm install node-sass -save-dev】 资料： 1、 nodejs 升级后， vue+webpack 项目 node-sass 报错的解决方法 来源： https://www.cnblogs.com/vae860514/p/8296512.html

（使用到了elementUI框架） <template> <el-button type="primary" size="mini" @click="exportExcel">导出</el-button> </template> <script> import API from '../api/api_dispatch' export default { data() { return { myCompanyId: '' } }, created() { let userInfo = JSON.parse(window.sessionStorage.getItem('access-user')); this.myCompanyId = userInfo.companyId; }, methods: { exportExcel() { // 按需要可加上无数据不导出的判断（略） if (this.myCompanyId !== '') { API.exportExcel({ companyId: this.myCompanyId }).then(res => { var blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'}) var downloadElement = document

## 前言 最近在研究 `npm` 组件发布，碰到一些相关问题，算是整理一下。 ### 涉及内容 - package.json 文件介绍 - .npmrc 的作用及配置 - 公网 npm 组件发布 ## package.json ### 概述 package.json 定义了当前项目中 `npm包` 之间的依赖关系和项目的一些配置信息（项目名称，版本，描述，开发人，许可证 等等）。 当说到包管理器，就会遇到 `yarn` 和 `npm` 的选择性问题。我是喜欢用 `yarn` 的，看看 `github` 上的开源项目，比如 `vue` 项目下就有 `yarn.lock` 文件，由此我猜测 `yarn` 可能更受欢迎一些，日常使用中我也是 `yarn` 用的比较多。 当我们 `npm install` 或 `yarn install` 会根据项目下的 `package.json` 解析依赖包之间的依赖关系然后从配置的 `npm registry` （ `.npmrc` 可以配置对应的 `registry`）地址中搜索并下载包。 我们可以在 `yarn.lock` 或 `package-lock.json` 看到包从哪里下载和依赖关系。 提交代码的时候排除 `node_modules` 目录，但是要提交 `yarn.lock` 或 `package-lock.json`

数据绑定 数据绑定 一旦更新了data中的某个属性数据，所有界面上直接（this.xxx='aaa'）或间接（计算属性或方法）使用了此属性的节点都会更新 数据劫持 数据劫持是vue中用来实现数据绑定的一种技术 基本思想：通过defineProperty()来监视data中所有属性（任意层次）数据的变化，一旦变更就去更新界面 Dep与Watcher的关系 Dep何时创建？—— 初始化时给data的属性进行数据劫持时创建的 有几个？—— 与data中的属性一一对应 结构是什么？—— id：标识，subs：[]相关的n个watcher容器 Watcher何时创建？—— 初始化时解析大括号表达式/一般指令时创建 有几个？—— 与模板表达式（不包含事件指令）一一对应 结构是什么？ this.cb = cb // 用于更新界面的回调 this.vm = vm // vm this.exp = exp // 对应的表达式 this.depIds = {} // 相关的n个dep容器对象 this.value = this.get() // 当前表达式对应的value 当执行vm.name='abc'表达式时，data中的name属性值变化会触发set方法，set中通知dep，dep通知所有watcher更新 Dep与Watcher之间是多对多的关系 一个data属性对应一个Dep

vue移动端再页面底部添加一个固定的按钮，按钮再安卓上面一直固定在底部，但是再ios上面就会跟着页面滚动向上，然后再滑落到底部，解决办法，就是把页面的高度设为100%，头部占百分之几，尾部占百分之几，剩下的就是中间的页面内容的高度，然后滚动的部分就只有这么高，问题就解决了 来源： CSDN 作者： ljt-xiaokeai 链接： https://blog.csdn.net/qq_41985464/article/details/104698541