vue
文章平均质量分 95
前端岚枫
技术翻译,技术人生,前端知识,生活感悟
展开
-
Vue3核心概念、新特性及与Vue2的区别
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了《VUE系列-Vue中组件的应用(三)》,今天主要跟大家分享我整理的vue3的相关核心概念及其新特性,与Vue3的区别,主要包括Vue3性能提升、新的特性、生命周期、如何创建项目等等。1.Vue3简介2020年9月18日,Vue.js发布3.0版本耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/.原创 2021-09-30 16:40:58 · 1423 阅读 · 0 评论 -
VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了《VUE系列-Vue核心应用(二)》,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明、组件种类、组件间的几种数据通信方式及一些常用的面试题,vue面试题相关的答案我后期会专门整理分享。Vue中的组件是开发中非常重要的一部分,组件化的好处:方便维护、方便复用 、 减少不必要的渲染一.组件的声明1.1 全局组件<my-button></my-button> Vue.component('my-bu.原创 2021-09-28 20:51:34 · 835 阅读 · 0 评论 -
VUE系列-Vue核心应用(二)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了《Vue核心概念及特性 (一)》,今天主要跟大家分享我整理的vue的一些常用的核心应用,主要包括一些表单组件、自定义指令、修饰符、watch、computed、动画、vue的生命周期及可能涉及到一些常用的面试题,vue面试题相关的答案我后期会专门整理分享。一.v-model的使用1.1 select<select v-model="select"> <option v-for="fruit in.原创 2021-09-27 18:29:08 · 396 阅读 · 0 评论 -
vue系列:Vue核心概念及特性 (一)
大家好,我是前端岚枫,一枚二线城市的程序媛,下半年对于我们来说是比较特殊的几个月,7月底,郑州出现好多年不遇的水灾,没法出行,在家休息,8月出现了疫情,在家办公一个月,9月疫情过去,终于能来公司上班了。博客也荒废了一段时间,接下来,我会陆续更新一些vue相关的文章,跟一家一起努力进步Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。特点: 易用,灵活,高效 渐进式框架可以随意组合需要用到的模块 vue + components + vue-router ..原创 2021-09-18 17:13:54 · 2314 阅读 · 7 评论 -
教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码,实现代码美化效果。不过这两年做项目都是用vue了,需要用到代码编辑器,于是我又找到了代码编辑器vue-codemirror,感觉组件再变,其原理、底层还是没多大变化,用vu e-codemirror,codemirror的方法,配置参数都是通用的,今天我就来分享一下我今天研究的vue-codemirror用法及一些.原创 2020-05-14 18:16:29 · 20180 阅读 · 26 评论 -
vue中v-for的用法
当需要将一个数组遍历或枚举一个对象循环显示时候,我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用,如下<div id="app"> <ul> <li v-for="(person, index) in persons"> {{ person.name }} </li> </ul></原创 2019-03-05 12:19:19 · 126689 阅读 · 4 评论 -
vue computed 中操作DOM和给对象添加属性遇到的问题
这两天使用vue做东西遇到一些问题,今天总结记录一下:在computed中没法操作dom元素,比如computed: { w() { return this.$refs.box.offsetWidth}}运行中报undefined错误,后来改成在mounted中获取this.$refs.box.offsetWidth,后来发现,在computed中,DOM元素未加载下来,保险...原创 2019-03-05 11:10:31 · 4349 阅读 · 0 评论 -
用elemet-ui组件实现弹窗里的树形结构和拖拽功能
这个弹窗功能,主要是导出字段的设置,左边是树形字段结构,右边是选中的设置字段,字段可以拖动调顺序。我实现这个功能主要用的element-ui里的tree和dialog组件,及vuedraggable组件,如果没有拖拽功能差不多半个小时就搞定这个功能,就因为实现这个拖拽功能,浪费了很多时间,从昨天晚上八点多开始,一直折腾到十一点多,大致效果如图刚开始没考虑到拖拽会引起这么多问题,只是用store,...原创 2019-02-28 11:31:06 · 3305 阅读 · 1 评论 -
关于vue中sync修饰符的用法
.sync是在vue2.3.1+版本开始使用,在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。在这里用update: myPropName的模式触发事件取而代之,方法如下:子组件触发this.$emit('update:title', newTitle)这样父组件可以...原创 2019-02-21 15:32:38 · 1955 阅读 · 0 评论 -
浅谈vue中provide和inject 用法
provide:Object | () => Objectinject:Array | { [key: string]: string | Symbol | Object }provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,...原创 2019-03-25 10:29:35 · 17214 阅读 · 3 评论 -
axios的用法详解
axios: 是一个类库,基于Promise管理的Ajax库,支持浏览器和nodejs的http库,常用于Ajax请求。特点从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF安装方法使用 npm:$ npm instal...原创 2019-03-26 09:52:14 · 885 阅读 · 0 评论 -
实现非父子之间通信,兄弟组件之间的数据传递--eventBus
vue中,组件传值的方法常见的也就那几种,1.父组件向子组件传值,用props 属性,2.子组件主要通过事件传递数据给父组件子向父传数据可以用emit触发传,但是这种方法无法实现兄弟组件直接传数据3.利用provide/inject,可以实现由祖先元素向子孙组件传递数据,方法,不需要知道祖先组件的其他作用组件,直接传递所需要的4.利用vuex实现数据共享,把数据统一存入state,只允许通过A...原创 2019-03-26 11:46:52 · 1125 阅读 · 0 评论 -
Vue中computed、methods和watch之间的区别
对于那些开始学习Vue的人来说,对于方法、计算属性和观察者之间的区别有点混淆。尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的。在这个快速提示中,我们将了解Vue应用程序的这三个重要方面及其用例。我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点。Methods在一个方法中,或多或少是您所期望的——一个对象属性的函数。您可以使用...翻译 2019-04-09 11:21:01 · 5155 阅读 · 4 评论 -
antd vue中,如何给表单动态添加input,解决遇到一些坑
最近做项目用的组件库Ant Design Vue,这个组件看起来文档很详细,但也会遇到一些意想不到的问题,最后看文档没办法解决,只能去看源码,折腾了好久,终于把问题给解决了,遇到的问题主要是当添加input的时候验证不能友好的使用,当一个input添加,然后删除,提交表单的时候会提示填写删除的input,还有个问题就是当把填写好的内容,删除提交的时候,已删除的内容还是能提交到后台,用方法处理fo...原创 2019-05-13 18:01:45 · 16632 阅读 · 1 评论 -
用vue实现按字母排序的多选列表功能类似通讯录
这两天做项目,pc端本来是一个简单的select多选功能,做到客户端的时候,产品要求做成按字母排序功能,类似手机通讯录功能,由于我们客户端用的滴滴的cube-ui 组件,我选择了cube-ui IndexList,在它的基础上进行扩展。大致效果如果下图其实难点在于如何处理数据,研发返回的数据,返回的格式如:{ "error": 0, "payload": { "count": "16",...原创 2019-07-12 16:04:31 · 8084 阅读 · 1 评论 -
vue实现判断页面是否编辑及编辑页面未保存离开弹窗提示
最近做一个表单页面,所有的交互效果都是到最后表单保存提交才实现的数据交互,因此出现用户可能不保存页面,而离开此页面,造成数据损失,为了避免这样的情况,特意做一个弹窗提示功能,用watch监听数据,如果数据发生变化,用户点击了其他地方链接要离开页面,则根据beforeRouteLeave离开该页面时出发的卫士,从而出现弹窗提示,让用户选择是否离开次页面,如果watch监听数据没发生变化,则不必提示。...原创 2019-07-19 17:30:31 · 14122 阅读 · 5 评论 -
vue watch的监听
以前一直不知道watch如何应用到具体场景中,这几天经过项目,终于理清来它的具体用法。当祖先组件触发执行方法,引起数据变化时候都可以让子组件监控到接收到的数据的变化component3 如何触发component1执行方法呢?&lt;component1 @click="changeVal"&gt;&lt;component2 :val="val" /&gt;&原创 2018-11-25 10:12:32 · 1523 阅读 · 0 评论 -
vue子组件触发祖先元素的执行的方法
这周刚开始跟研发对接接口,在写交互的过程中遇到各种各样的问题,由于第一次对接这样的项目,最常见问题就是来回传值和触发,今天趁着周末来写个例子记录一下。component3是component2的自组件,component2是component1的子组件,component3 如何触发component1执行方法呢?&amp;amp;lt;component2 @clickHandler1=“clic...原创 2018-11-25 09:48:42 · 7667 阅读 · 2 评论 -
vue路由参数改变,组件数据没重新更新问题
最近一段时间在用vue做项目,遇到一个很纠结的问题,本来是两个页面样式结构相似,就是数据不同,所以在router里面配置了一个id参数,发现vue路由参数改变,组件数据没重新更新,查了一下官方文档,发现复用组件时,想对路由参数的变化作出响应的话,可以简单地 watch (监测变化) $route 对象:watch: { '$route' (to, from) { // ...原创 2018-07-26 16:03:27 · 7296 阅读 · 0 评论 -
vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做个记录,也希望可以为同行的童鞋提供点小小的解决思路。dropdown组件的下拉菜单子选项click事件触发没反应问题,代码如下 给@click加上native 如@click.native...原创 2018-07-30 22:38:06 · 2950 阅读 · 0 评论 -
添加standardjs和eslint配置检测代码规范步骤
首先检测nodejs是不是最新版本,如果不是首先更新到最新版本使用本规范最便捷的方式是全局安装,运行:$ npm install standard --global或者非全局的方式,针对某个项目进行安装:$ npm install standard --save-dev安装eslintnpm install --save-dev eslint安装eslint-plu...原创 2018-08-09 10:23:02 · 6350 阅读 · 0 评论 -
Vue.Draggable拖拽功能的配置和使用方法
使用cmd命令在项目根目录下下载安装Vue.Draggablenpm install vuedraggable在组件中需要使用的引入import draggable from 'vuedraggable'注册组件components:{ draggable }vue的template代码如 &amp;amp;lt;draggable ...原创 2018-08-02 10:16:05 · 57329 阅读 · 18 评论 -
eslint规则统计
&quot;comma-dangle&quot;: [&quot;error&quot;, &quot;never&quot;], &quot;no-cond-assign&quot;: 2, &quot;no-console&quot;: 2, &quot;no-constant-conditi原创 2018-08-07 09:24:45 · 856 阅读 · 0 评论 -
vue开发规范
组件命名规范组件名应该始终是多个单词的,根组件 App 除外 命名可遵循以下规则: 1. 有意义的名词、简短、具有可读性 2. 以小写开头,采用短横线分割命名,或者以单词大写开头(PascalCase) 命名,组件名应该以高级别的单词开头,以描述性的修饰词结尾。 3. 公共组件命名以公司名称简拼为命名空间(app-xx.vue) 4. 文件夹命名主要以功能模块代表命名...原创 2018-08-13 11:08:38 · 1617 阅读 · 0 评论 -
vscode编辑器 装JavaScript Standard Style 遇到不检测代码问题
最近用webstorm编辑器做了一个小型的vue项目,但是webstorm没检测代码规范标准,换成了vscode编辑器,装上standard插件检测代码,发现不兼容,不能提示报错,最新版本的vue-cli3本来带检测的eslint的,刚开始不知道为啥不检测,后来经过领导帮忙折腾了好久,发现是nodejs不是最新的v10.8.0,当更新到最新版本的时候发现npm不是对对应的6.2.0d的最新版本,想...原创 2018-08-08 17:35:02 · 2434 阅读 · 0 评论 -
vue 绑定class的几种方式
对象语法 给v-bind:class 设置一个对象,可以动态地切换class,如下<div id="app"> <div :class="{'active':isActive}"></div></div><script>var app = new Vue({ el:'#app', dat原创 2018-08-21 17:22:59 · 47298 阅读 · 3 评论 -
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下:<template><div> <div id="cart" v-cloak> <template v-if="itemlis.length"> <table> <t原创 2018-08-24 17:34:32 · 7278 阅读 · 0 评论 -
配置webpack.config.js遇到的一些问题
配置vue-loader时候,npm run build 遇到这样问题,如下提示:webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin解决方案是:const path = require('path')//引入这个const Vu...原创 2018-08-25 20:58:45 · 4604 阅读 · 0 评论 -
一个简易的数字输入框组件
入口&amp;lt;template&amp;gt; &amp;lt;input-number v-model=&quot;value&quot; :max=&quot;10&quot; :min=&quot;0&quot;&amp;gt;&amp;lt;/input-number&amp;gt;&a原创 2018-09-04 15:00:40 · 2536 阅读 · 0 评论 -
vue实现的tabs标签组件
入口文件&lt;template&gt; &lt;div v-cloak&gt; &lt;tabs v-model="value"&gt; &lt;pane label="标签一" name="1"&gt; 标签一内容 &原创 2018-09-05 14:56:05 · 23772 阅读 · 2 评论 -
stylelint rules
Colorcolor-hex-case: 指定大写或小写十六进制的颜色。color-hex-length: 指定十六进制颜色长或短的符号。color-named: 需要(如果可能)或不允许命名的颜色。color-no-hex: 不允许十六进制的颜色。color-no-invalid-hex: 禁止无效的十六进制颜色。font-familyfont-family-name-quotes...原创 2018-09-20 14:45:50 · 6242 阅读 · 0 评论 -
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下,今天把table列表编辑按钮功能实现也分享一下。主要用把展示的箭头隐藏,把那列代码宽度设置为0,然后把编辑按钮加上事件,控制expands数组里的id,当触发点击时候把当列的id添加到数组中,同时移...原创 2018-11-15 22:17:24 · 13401 阅读 · 1 评论 -
vue新vue-cli3环境配置和模拟json数据
最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同:安装步骤以前是npm install vue-cli -g现在是:npm install -g @vue/cli2.vue-cli2 新建项目 vue init webpack Vue-Projectvue...原创 2018-07-15 19:04:43 · 18828 阅读 · 8 评论