qq_27009517的博客

利用vue自定义指令directive实现拖动elementUI的dialog<template> <el-dialog :visible.sync="testDialog" title="测试弹框拖拽" v-dialogDrag="{ x: transformX, y: transformY }" :close-on-click-modal="false" :append-to-body="true" :modal-append-to-body="true">...

$watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值， 第二个是变化后的值。值也可以是函数名：不过这个函数名要用单引号来包裹。值是包括选项的对象：选项包括有三...

Proxy error: Could not proxy request /playerColumn/page from localhost:8080 to http://172.16.10.58:8899.See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).是代理服务器出了问题，可能是当前配置的代理服务器关闭了或者配置错误，在vue.config.

第一章 Vue.js简介Vue简介 第二章 基础特性实例及选项 模板语法1 模板语法2 计算属性和侦听器 class与style的绑定 条件渲染 列表渲染 事件判定与监听 表单用法第三章 组件基础组件基础1 组件基础2 组件基础3第四章 指令一些内置指令 自定义指令第五章 过滤器过滤器注册第六章 过渡 和 动画CSS过渡 CSS 动画第七章 深入了解组件组件注册 Prop 单向数据流 自定义事件==============.

1全局安装yarnnpm i -g yarncmd 管理员打开，webstorm的terminal可能不行。2.安装yarn的淘宝镜像yarn config set registry https://registry.npm.taobao.org3.安装项目依赖yarn install这一步可以在webstorm的terminal了4.开发yarn run dev5.打包yarn run build查看版本yarn -V...

.removeEventListener() 方法要求我们向其传递与传递给 .addEventListener() 的函数 完全相同的监听器函数。完全相同 意味着：具有相同的目标 具有相同的类型 并传递完全相同的监听器定义和用法removeEventListener() 方法用于移除由addEventListener()方法添加的事件句柄。注意：如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。匿名函...

<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", da.

在执行npm run serve时候 遇到这样一个报错首先需要确定的一点是，该报错与最后一行错误（Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\DumpStack.log.tmp'）本身没有任何关系，在网上查阅是由于外部js错误引入导致。结合This dependency was not found: 找到具体所在引入，发现了问题所在对比'@views/system/service'...

回顾一下：在vue2中如何组织代码的，我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API缺点： 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含20多个方法，你往往分不清哪个方法对应着哪个功能vue3中的Composition API就是用来解决这个问题的在vue3 Composition API .

一、关于vue中watch的认识我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候•1、常见的使用场景 1 2 3 4 5 6 7 8 ... watch:{ value(val) { console.log(val); this.visible = val; } } ... •2、如果要一开始就执行...

vue-cli查看版本号：vue -Vvue-cli下载安装：vue-cli2:npm install -g vue-cli@版本号vue-cli3/cli4:npm uninstall -g vue-clinpm install -g @vue/cli@版本号安装完Vue cli3 之后，还想用vue-cli2.x 版本（安装一个桥接工具）：npm install -g @vue/cli-init创建项目：vue-cli2:vue init webpack nam

计算属性computed :1. 支持缓存，只有依赖数据发生改变，才会重新进行计算，监听多个变量的变化，导致的新的结果2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性.

vue提供install可供我们开发新的插件及全局注册组件等install方法第一个参数是vue的构造器，第二个参数是可选的选项对象export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 }}全局注册组件import PageTools from '@/components/PageTools/pageTools.vue'import update fr

问题在使用element-ui时，有时候想要修改组件内的样式，但不成功，例如<div class="test"> <el-button>按钮</el-button></div><style lang="less" scoped>.test{ .el-button span{ background:red; }}</style>以上对.el-button span的样式不生效问题

D:\vue2\bpmn-vue-demo\bpmn-js-examples-master\theming>npm installnpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: theming@0.0.0npm ERR! Found: bpmn-js@8.8.2npm ERR! node_modules/bpmn-jsnp.

isURLSameOrigin.js?3934:57 Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined at isURLSameOrigin (isURLSameOrigin.js?3934:57) at dispatchXhrRequest (xhr.js?b50d:145) at new Promise (<anonymous>) at xhrAdapte...

D:\vue2\vue-element-admin-master>cnpm run dev> vue-element-admin@4.4.0 dev D:\vue2\vue-element-admin-master> vue-cli-service serveinternal/modules/cjs/loader.js:905 throw err; ^Error: Cannot find module '@vue/cli-plugin-babel'Require s..

常见场景 有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？ 两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 DRY 原则。反之，太多的props传值会很快变得混乱不堪，从而迫使维护者（即便这个人是你）在使用组件的时候必须理解一大段的上下文，拖慢写码速度。...

vue中的provide和inject_Cassie's blog-优快云博客_provide和inject浅析provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是...https:...

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的，就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中获得修改dom后的结果，就是修改的同时获得修改后的结果

Module build failed: Error: D:\vue2\gowhere\travel\src\pages\home\components\Header.vue:26:9 22| 23| <style lang='stylus' scope> 24| // css 里的引入要 加 @ ~ 25| 26| @import '@styles/variable.styl'---------------^ 27| 28| .header 2...

vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。例如下面的层级关系<top> <center> <bottom> </bottom> </center>&lt

在Vue-cli中使用lang="less"时报错：Module build failed: TypeError: this.getOptions is not a function at Object.loader (D:\WORK\VueProject\XiaoWei\node_modules\less-loader\dist\index.js:52:26)出现这个问题的原因是less-loader版本过高，降级到5.0.0即可npm install less-loader@5.0.0 -

在编写vue文件中引入模块 1 importmodel from"@/common/model"; 这里路径前面的“@”符号表示什么意思？ 1 2 3 4 5 6 7 8 9 10 11 resolve: { // 自动补全的扩展名 extensions: ['.js','.vue','.json'], ...

在编写vue文件中引入模块import('@/view/single-page/home')这里路径前面的“@”符号表示什么意思？// vue.config.jschainWebpack: config => { config.resolve.alias .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components')) .set('_c', reso

脚手架安装错误：1：https://codechina.youkuaiyun.com/mirrors/vuejs-templates/webpack?utm_source=csdn_github_accelerator下载webpack 解压名字修改为webpack；2：在C:\Users\Administrator里面找到.vue-templates 没有的话shift+右键 md .vue-templates新建个 然后第一个下载的放进去；3：到自己建的项目那里再次s...

组件中的data为什么必须是函数？因为组件可以重复使用，如果data是对象，那么重复使用时，data的地址的一样的，不同组件使用同一份数据，肯定不行。所以，要使用函数返回新的地址，互不影响。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...

v-model的双向数据绑定：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <..

const app = new Vue({ el: "#app", data:{ books:[ { id: 1, name: "算法", date: "2006-9", price: 85.00, count: 1 }, { id: 2, name: "unix", date: "2020-9", pric...

li点哪个，哪个变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

遍历数组：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...

控制内容包括标签以及后代的内容不是使用 display: none;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t.

var let const<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.