vue
黑面狐 sa~
今年只变强,不变秃!
展开
-
vue子组件直接修改props传值警告
在vue中子组件是不允许直接修改父组件传过来的数据,因为如果父组件传过来的数据如果是数组或者是对象的数据的话,在子组件中直接修改传过来数据的话,会影响到其他组件的数据,所以要在子组件data数据里定义一个变量来保存父组件传过来的可以这么改:父组件<child-com @close=close></child-com>methods: { close() {}}子组件<div @click='closeThisDialog'>关闭</div>.原创 2021-07-20 17:23:48 · 832 阅读 · 0 评论 -
vue ssr报错:Error while initializing app DOMException: Failed to execute ‘appendChild‘ on ‘Node‘: This
Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.We [as appendChild]起因是:1、封装了一个自定义loading组件,在组件内部使用v-show="show"来控制显示隐藏2、通过props传入show来控制3、使用vue-server-rendere原创 2021-05-25 18:09:26 · 1159 阅读 · 0 评论 -
记一次vm.$watch的巧妙使用
1、产品的需求是要在发货页面,每个商品下面添加扫码输入框,扫码发货之后验证IMEI是否能发货。如图红框为扫码匡(光标在输入框中,用扫码枪扫码即可填充数据进去)。此处如果扫的是箱标码的话,会出现多个换行的数据,如下图:2、那么问题来了,数据有多少个是不确定的,怎么判断是扫码输入,还是手动输入呢?(因为扫码框扫码是扫码完成自动去请求数据,而不是点击按钮)。3、我的实现是:监听扫码框里的数据变化的时间,如果小于100ms就是扫码枪扫入,如果大于100ms就是手动输入(因为扫的箱规码数据有点多,所以加大原创 2021-03-17 10:31:03 · 374 阅读 · 0 评论 -
Nuxt.js配置PM2实践
一、方法一:文件启动1、Nuxt.js项目,文件根目录添加 ecosystem.config.js ,配置如下:module.exports = { apps: [{ name: 'anchor', script: './node_modules/nuxt/bin/nuxt.js', append_env_to_name: false, cwd: './', exec_mode: "cluster",原创 2021-01-29 10:45:34 · 1031 阅读 · 0 评论 -
你了解哪些Vue性能优化方法?
1、路由懒加载2、keep-alive缓存页面3、使用v-show复用DOM4、v-for遍历避免同事使用v-if// 使用computed属性过滤需要显示的数据项5、长列表性能优化(1)如果列表是纯粹的数据展示,不会有任何改变,就不需要做相应话, 使用object.freeze(data)(2)如果是大数据长列表,可采用虚拟滚动,只渲染少部分区域的内容,参考vue-virtual-scroller、vue-virtual-scroll-list6、事件的销毁vue组件销毁时,会自动解绑它原创 2020-10-03 15:52:00 · 2482 阅读 · 0 评论 -
vue设计理念的理解
谈一谈对vue设计原则的理解?vue官网定义和特点:渐进式JavaScript框架易用、灵活和高效渐进式JavaScript框架:与其它大型框架不同的是,vue被设计为可以自底向上组成应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,vue也完全能够为复杂的单页应用提供驱动易用性vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可,只要会写js、htm原创 2020-10-03 14:45:13 · 866 阅读 · 0 评论 -
vue组件化的理解
总结:1、组件是独立和可复用的代码组织单元。组件系统是vue核心特性之一,它使开发者使用小型、独立和通常可复用的组件构建大型应用2、组件花开发能大幅提高应用的开发效率、测试性、复用性等3、组件使用按分类有:页面组件、业务组件、通用组件4、vue的组件是基于配置的,我们通常编写的组件是组件配置而非组件,框架后续会生炒其构造函数,它们基于VueComponent,扩展于Vue5、vue中常见组件化技术有: 属性prop,自定义事件,插槽等,它们主要用于组件通信、扩展等6、合理的划分组件,有助于提升应原创 2020-10-03 14:27:33 · 574 阅读 · 0 评论 -
解决ElementUI框架的el-select嵌套el-tree导致下拉框定位不准
问题: el-select 内嵌 el-tree, 在下拉框往上的情况下,折叠el-tree导致定位不会自动适应分析:el-select的下拉框有个 x-placement=“top-start” 属性,指示下拉框是往上展示,还是往下展示,并且定位方式是absolute,用top定位,现在懂了为啥折叠tree之后位置没变了吧?解决:在el-tree折叠node-collapse事件的时候,重新计算下拉框的top位置;兼容下拉框朝下: 判断 x-placement 属性,做对应计算下拉框to原创 2020-08-06 17:59:01 · 4143 阅读 · 0 评论 -
vue ui命令没反应
今天输入vue ui命令没反应:1、输入vue -h查看commands,发现没有ui [oprions]的选项2、安装最新的脚手架cnpm i -g @vue/cli发现已经有ui [oprions]的选项了vue ui命令可以正常使用~...原创 2020-04-04 13:47:38 · 17833 阅读 · 4 评论 -
vue v-cloak 解决页面加载时闪烁出现vue标签或者指令的问题
前沿在项目在开发中,经常会遇到当数据加载时vue的一些标签就会闪现,然后等数据加载完后消失,这时候就需要用到官网中提到的v-cloak来解决。首先说一下经常遇到的情况。step1,加载时遇到{{value.name}}闪烁,是因为你在渲染时是这么写的{{value.name}}step2,加载时遇到一个空的盒子里边什么也没有,是因为你在渲染时是这么写的解决办法那么,v-cloak要放在...转载 2019-07-19 18:12:17 · 308 阅读 · 0 评论 -
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)
vue打包时报错报错解决是引入swiper4的原因,解决方式一:降低swiper的版本,可以用3.4.2但是swiper和swiper4之间的区别挺大,这样子改又要去看swiper3的api,重新调整代码,诸多不便。解决方式二:在webpack.base.conf.js中,resolve: { extensions: ['.js', '.vue', '.json'], ...转载 2019-03-19 01:20:35 · 379 阅读 · 0 评论 -
Vue.js开发常见问题
Vue.js由于其语法简单,文档友好,而且是一个渐进式框架,因而得到了许多前端开发者的青睐.尤其对初学者而言,入门Vue.js比目前前端三大框架中的另外两个都容易的多.但是同时,简单并不意味着低级,把Vue.js弄会还是需要掌握不少东西的,尤其对于没有接触过webpack构建工具的初学者. 这里列举一些Vue.js常见的开发问题.1.Vue项目如何部署 Vue.js 的脚手架已经为我们配...转载 2018-10-24 16:22:56 · 205 阅读 · 0 评论 -
浅谈Vue.js
http://www.cnblogs.com/luozhihao/p/5329440.html作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的兴趣。注:本文介绍的是Vue1.×,目前Vue已经升级至2.×,功能和语法上有一定升级和修改,想了解2.×的转载 2017-10-30 10:52:21 · 278 阅读 · 0 评论 -
vue click.stop阻止点击事件继续传播
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app",原创 2017-11-14 18:36:18 · 48994 阅读 · 4 评论 -
新手向:Vue 2.0 的建议学习顺序
注:2.0 已经有中文文档 。如果对自己英文有信心,也可以直接阅读英文文档。此指南仅供参考,请根据自身实际情况灵活调整。欢迎转载,请注明出处。起步扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建转载 2017-11-20 10:16:46 · 847 阅读 · 0 评论 -
VueJs2.0建议学习路线
最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。既然大家会看这篇文章,那么肯定是vue的学习者了,或是遇到的瓶颈,或者刚刚开始学,不知道如何快速起步,本篇文章将带领大家在最短的时间内构件一个学习Vue的学习路线Vuejs的作者尤雨溪尤大也写过一篇关于新手学习vue路径的文章新手转载 2017-11-20 10:45:47 · 595 阅读 · 0 评论 -
基于vue-cli快速构建
Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立,我不是职业前端,做过Vue,了解了一下React,听说过Angluar。我只能这么说,我来晚了,没经历所有。闲话少说进入正题。 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释转载 2017-11-29 15:13:01 · 232 阅读 · 0 评论 -
vue-cli中使用uiv
为了避开即使用vue,又使用jquery的尴尬,找了uiv这个基于vue和bootstrap写的组件UI。 https://uiv.wxsm.space/getting-started/首先把遇到的坑说下: uiv用的是bootstrap3,然而使用cnpm install bootstrap –save下载下来的是bootstrap4版本,所以显示出来的ui是乱的。 如果已经安装了bo...原创 2018-09-17 17:13:44 · 1611 阅读 · 0 评论 -
Vue学习笔记进阶篇——vue-resource安装及使用
简介vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。本文是基于之前的文章(Vue学习笔记进阶篇——vue-cli安装及介绍)vue-cli脚手架工具的。基本语法引入vue-resource后,可以基...转载 2018-09-26 11:39:40 · 6558 阅读 · 0 评论 -
浅谈 Vue 中 computed 实现原理
虽然目前的技术栈已由 Vue 转到了 React,但从之前使用 Vue 开发的多个项目实际经历来看还是非常愉悦的,Vue 文档清晰规范,api 设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用 Vue 比React 开发效率更高,之前也有断断续续研读过 Vue 的源码,但一直没有梳理总结,所以在此做一些技术归纳同时也加深自己对 Vue 的理解,那么今天要写的便是 Vue 中最常...转载 2018-10-10 19:05:26 · 11641 阅读 · 2 评论 -
webstorm添加*.vue文件代码提醒支持webstorm支持es6vue里支持es6写法
本文转自:http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/webstorm是前端开发神器,但我一直都不喜欢webstorm,就因为那很挫的配色和那大光标。 上阵子开始玩 Vuejs,在 Vue 中,可以 .vue 文件实现组件化,但各种编辑器都支持不好,转载 2017-10-27 17:36:42 · 422 阅读 · 0 评论