vue
关注
分享
扫一扫
文章平均质量分 67
牛长犇
享受写东西的过程，记录技术上的成长
展开
-
vue项目中过滤器filters的使用设计
前言vue项目中过滤器是很常见的功能，我们应该如何合理的设计它的使用方式呢？先看下官方文档： vue过滤器文档项目中对过滤器的使用不是很统一，有局部使用的，全局使用的，或者是直接引用过滤器文件的每个都注册一下，这几种使用方式都不是很友好。我们如何优化一下呢？且向下看。设计思路单独文件夹维护过滤器工具；在main.js中注入为全局过滤器;在具体需要的地方使用;具体代码新建filters文件夹，每一个过滤器为一个单独的文件维护，最后统一收口到index文件中。比如一个很常原创 2021-11-26 17:26:11 · 684 阅读 · 0 评论 -
Vue报错 -- the “scope“ attribute for scoped slots have been deprecated and replaced by “slot-scope“
vue项目中出现如下报错Vue报错 --the “scope” attribute for scoped slots have been deprecated and replaced by “slot-scope”原因 vue自2.5版本以来，作用域槽的“scope”属性已被弃用，并更改为“slot-scope”。解决方案<!-- 将这个 --><template scope="scope"> </template><!--原创 2021-04-09 13:52:44 · 561 阅读 · 0 评论 -
《深入浅出Vue.js》作者谈前端框架的“御剑之道”
欢迎访问我的个人博客：http://www.xiaolongwu.cn编者按：本文作者 Berwin，W3C性能工作组成员，360导航高级前端工程师。《深入浅出Vue.js》（正在出版）作者。你在使剑，是的，但是你的目的是杀人，直追你的目标，忘记手中长剑，才能使出最高的剑法… 而这世上又有多少剑客， 拘泥于手中快剑而落入俗套，终究无法到达登峰造极的境界… ----阿莱克西斯前言剑，...转载 2018-10-10 17:42:14 · 11967 阅读 · 2 评论 -
You are using the runtime-only build of Vue where the template compiler is not available. Either pre
欢迎访问我的个人博客：http://www.xiaolongwu.cn在升级脚手架到vue-cli3.0版本的时候出现了这个报错：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the template...原创 2018-10-19 20:33:40 · 106329 阅读 · 25 评论 -
vue -- Cannot set property 'render' of undefined解决方法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言在用vue-cli3做组件测试时，出现个问题，记录一下报错如下 Cannot set property ‘render’ of undefined解决方案后来发现是因为 组件里写了script标签，没写 export default {}加上这句话之后就好使了我的个人博客地址：http://www.xiaol...原创 2018-11-15 17:27:23 · 35237 阅读 · 5 评论 -
vue -- 父组件通过$refs获取子组件的值和方法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言在vue项目中组件之间的通讯是很常见的问题，同时也是很重要的问题，我们大致可以将其分为三种情况：父传子：在父组件中绑定值，在子组件中用props接收子传父：在父组件中监听一个事件，在子组件中利用$emit触发这个事件并带上数据作为第二个参数，这时父组件中监听事件的回调函数就会被调用，回调函数的参数就是子组件带上来的...原创 2018-11-15 17:29:31 · 33417 阅读 · 1 评论 -
vue -- 非父子组件传值，事件总线（eventbus）的使用方式
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言先说一下什么是事件总线，其实就是订阅发布者模式；比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发；这是一种设计模式，和语言没有关系；如果不太了...原创 2018-11-30 12:00:55 · 6907 阅读 · 19 评论 -
vue -- foreach not a function 或者map not a function的解决办法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言老套路，先说出现这种问题的原因：在做vue项目时，如果我们在组件中需要一个变量，哪怕这个变量最开始是没值的，我们也必须先在data中注册这个变量；只有这样，我们的这个变量才能是响应式的，不然就失去了响应式的功能；问题就在这里，好多人的习惯就是写变量的值等于’’(空)或者null，map和foreach方法只能对数...原创 2018-12-05 16:48:52 · 16394 阅读 · 4 评论 -
vue -- vue-i18n国际化使用简单教程
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言vue-i18n是一个针对于vue的国际化插件，使用非常简单，具体使用方式看我细细道来。实现方式这里我们直接讲在实际开发中如何使用以及注意事项；1. 下载包npm install vue-i18n2. 配置在main.js文件中加入如下配置// 引入插件和语言包import VueI18n from '...原创 2018-12-20 10:08:15 · 10885 阅读 · 4 评论 -
eslint -- Adjacent JSX elements must be wrapped in an enclosing tag
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言关于eslint的问题太多了，我们只能慢慢的一个一个的踩坑。错误信息Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.这样的错误信息提示eslint配置的问题，如下图解决办法修改eslint配置文件// 将"...原创 2018-12-17 14:41:31 · 17426 阅读 · 3 评论 -
vue--为什么data属性必须是一个函数
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言老规矩，我们还是先说为什么。问题描述：为什么在vue组件中，我们的data属性必须是一个函数,new Vue()中的data除外，因为new Vue中只有一个data属性。原因：因为我们能抽离出来的组件，肯定是具有复用性的，它在项目中会存在多个实例。如果data属性值是一个对象时，那么它所有的实例都会共享这些数据，这...原创 2019-02-26 17:25:21 · 1783 阅读 · 0 评论 -
nodejs -- node-sass安装失败的解决方案
欢迎访问我的个人博客：http://www.xiaolongwu.cnnode-sass安装失败的原因是被墙了；解决办法是翻墙或者使用淘宝镜像cnpm下载；cnpm install node-sass -Dcnpm的安装和使用方法链接：cnpm淘宝镜像的安装和使用方法我的github资源地址：nodejs – node-sass安装失败的解决方案我的个人博客地址：h...原创 2018-09-15 18:16:12 · 2909 阅读 · 0 评论 -
nodejs -- Node Sass does not yet support your current environment解决办法
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言在github上clone了一个项目，npm install之后，启动项目时报了如题目的错误导致项目启动失败；产生问题的原因执行npm install命令时，其实是npm按照项目里的package.json文件来下载项目所有的依赖；由于每个人的电脑环境等不同的问题，有些依赖会不支持当前的环境；...原创 2018-09-15 18:12:22 · 10772 阅读 · 3 评论 -
vue -- vue-router的history模式打包后页面空白的解决方案
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言采坑记录，以便后面翻阅首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路劲，具体解决方案看这里：webpack–资源和css中图片引用打包为相对路径的方案问题现象在本地开发环境没有任何问题，路由也正常显示，但是打包并部到服务器之后，访问页面就是空白，看控制台...原创 2018-07-25 19:18:49 · 29128 阅读 · 2 评论 -
vue中如何实现样式之间的切换
欢迎访问我的个人博客 http://xiaolongwu.cn/前言既然我们选择了vue，那么在做东西时就不要想着再jQuery用去操作dom，所有的都交给vue来解决。下面来说一个很简单但是很常用的效果，可能人人都会遇到这样的需求请看下图导航栏的样式切换功能，如果我们使用jquery之类的东西来写，可能要写好多代码，那么我们用vue呢，代码如下ht...原创 2018-02-08 00:52:38 · 34410 阅读 · 6 评论 -
vue中v-if和v-show的区别
欢迎访问我的个人博客 http://xiaolongwu.cn/相同点两者都是在判断DOM节点是否要显示。不同点1、实现方式v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。2、编译过程v-if切换有一个局部编译/卸载的过程，切换过程...原创 2018-02-08 00:52:51 · 16347 阅读 · 1 评论 -
vue.js开发神器devtools的安装方法
欢迎访问我的个人博客 http://xiaolongwu.cn/1、安装去gitHub上clone项目，地址 https://github.com/vuejs/vue-devtools 【传送门】下载好后进入vue-devtools-master工程 执行npm install —–>npm run build.修改manifest.json 中的persistent为...原创 2018-02-08 00:53:05 · 30596 阅读 · 8 评论 -
vue数据绑定数组，改变元素时不更新view问题
欢迎访问我的个人博客：http://xiaolongwu.cn前言关于这个问题，官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @c原创 2018-03-19 20:15:01 · 30925 阅读 · 9 评论 -
我们为什么要用vue，他解决了什么问题，如何使用它？
欢迎访问我的个人博客：http://xiaolongwu.cnVue.js新手入门指南最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的结业项目。在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以...转载 2018-04-16 19:06:01 · 53884 阅读 · 33 评论 -
最新vue-cli 2.9.1和2.8.x版本的区别
最近vue-cli更新，用其构建项目的时候，发现bulid文件下少了两个文件，分别是dev-sever.js和dev-client.js vue-cli 2.8 vue-cli 2.9.1 这是为什么呢 我们查看下package.json vue-cli...转载 2018-04-18 20:05:20 · 4394 阅读 · 0 评论 -
vue-cli的webpack模板项目配置文件分析
2017-09-11更新：更新到webpack 2.6.1所对应的配置，完善部分代码注释。由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发...转载 2018-04-20 17:34:31 · 366 阅读 · 0 评论 -
Vue 使用中的小技巧
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~1. 多图表resize事件去中心化1.1 一般情况有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览...转载 2018-05-10 17:41:34 · 677 阅读 · 0 评论 -
vue -- 如何去掉url默认的锚点#
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言vue项目中持续踩坑做一些记录，以便后面翻阅项目的url中会自带#，看起来很不是舒服，其实是vue-router在搞怪，router跳转有两种实现方式： 1. hash（带#）值模式，vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变...原创 2018-07-23 16:45:08 · 11085 阅读 · 3 评论 -
vue -- 理解Vue.nextTick 的原理和用途
有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。其实如果看一下深入响应式原理 - vue.js中的有关内容，可能会有所理解，不过有些同学可能看到这个标题之后就选择跳过了，因此这里简述如下：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。next...转载 2018-07-05 16:59:54 · 6088 阅读 · 0 评论 -
webpack -- 关于proxyTable的配置在开发环境和生产环境中的原理解析
欢迎访问我的个人博客：http://www.xiaolongwu.cn前言首先，proxyTable是我们在本地开发环境中调试接口用的，目的是为了解决本地跨域的问题，因为本地地址为localhost:xxxx/xxx在线上的生产环境是没用的！！！假设我们用的是vue-cli命令行工具生成的webpack项目模板，我们很容易能在config文件夹下面找到index.js文件。...原创 2018-07-19 16:52:46 · 19377 阅读 · 17 评论 -
--save-dev 与 --save的区别
欢迎访问我的个人博客 http://xiaolongwu.cn/-save-dev是指将包信息添加到devDependencies，表示你开发时依赖的包裹。-save是指将包信息添加到dependencies，表示你发布时依赖的包裹...原创 2018-02-08 00:52:24 · 1335 阅读 · 1 评论