![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue综合基础知识
文章平均质量分 65
以本人之前开发过程遇到的一些不熟悉的知识点的整合发布
别来打扰我
这个作者很懒,什么都没留下…
展开
-
forEach和map返回新数组问题
以前查 forEach 和 map 的区别时, 总能看到这样一句话:forEach() 方法不会返回执行结果, 而是 undefined. 也就是说, forEach() 会修改原来的数组. 而 map() 方法会得到一个新的数组并返回.我的理解就是使用 forEach 遍历一个数组, 修改 item 的值, 就会改变原数组, 但最近发现并不一定会改变, 所以就做了一些测试测试一:可以看到这样是可以修改原数组的值的那试试 map 吧咦? arr 这个原数组的值为什么也改变了呢?在网上搜原创 2021-02-24 11:54:37 · 3647 阅读 · 0 评论 -
el-form的model、prop属性和表单校验等详解
Vue 的 el-form 提供了表单校验功能, :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则。组件封装,让前端校验更方便。具体使用过程中,有几个容易出错的地方,本文来整理一下。每一个坑都是笔者亲自趟过的,写完本文后,以后应该不会再踏入相同的坑。el-form 的 model 属性el-form 的 model 属性是用来指定表单使用的数据的,虽然 el-form 指定了 model 对象,但是,理论上,vue 并没有限制 el-input 绑定的数原创 2021-01-08 15:10:12 · 39179 阅读 · 9 评论 -
vue---:rules 自定义校验方法以及同一表单多种校验规则
<el-form ref="cqhyForm" :model="propertyData" label-width="130px" :rules="cqhyFormRules"><!--这里为表单内容--></el-form> <script>export default { data() { return { rules1: { qlrmc: [{ required: true, message: '请输入',原创 2021-01-08 14:59:07 · 12499 阅读 · 0 评论 -
Vue路由的使用和route-link router-view样式和动画的设置
什么是路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);<!DOCTYPE html><html lang="en"><原创 2020-12-11 17:26:25 · 2434 阅读 · 0 评论 -
vue.prototype.$xxx的使用
每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。import utils from '@/pages/util/utils'Vue.prototype.$util=utils 简而言之,就是说,你在当前项目中,可能会用到很多的工具方法,公共方法,但是你不想去污染全局的一个作用域或者每个组建中重复写同样的方法,那么就可以通过vue.prototype去定义成他的实例对象.比如:export default { dataURLto原创 2020-11-20 15:43:41 · 5783 阅读 · 0 评论 -
VUE父子组件传值(含实例)
vue父子组件1.父传给子(在子组件中改数据)父组件:1.在子组件上绑定数据arrData2.在data()中给出定义(注意数据类型)3.对需要传给子组件的数据进行相应操作子组件:1.在props中给出定义2.watch监听数据变化3.在watch定义的方法里对数据进行操作(与子组件自己的数据进行交互)2.子传给父(不可以在传给父组件之后修改数据)根据情况讨论,这里是因为子组件被父组件在一个界面多次调用,为了区分开组件,设置了一个spantitle作为唯一key,然后把spanti原创 2020-09-10 15:54:05 · 5600 阅读 · 0 评论 -
VUE作用域插槽详解(<slot>、v-slot、slot-scope)
什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制如下代码:在子组件中放一个占位符在父组件中给这个占位符填充内容:展示的效果:现在来看看,如果子组件中没有放插槽,同样的父组件中在子组件中填充内容,会是啥样的:子组件代码无插槽:2. 父组件照常填充内容:3. 展示的效果:总结:如果原创 2020-08-28 14:13:51 · 31840 阅读 · 14 评论 -
vue 侦听器watch 之 深度监听 deep 以及 immediate
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div></template><script> export default { data(){原创 2020-08-17 10:49:50 · 2833 阅读 · 0 评论 -
let { [key]: id = 0, ...rest } = obj-极限解构
最近遇到了一个问题,来自于下面的一段代码:let { [key]: id, ...rest } = obj假如我们有以下数组const users = [ { name: 'Michael', group: 1 }, { name: 'Lukas', group: 1 }, { name: 'Travis', group: 2 },]我们把它按照 group 字段进行分组映射如下:{ '1': [ { name: 'Michael' },原创 2020-08-11 14:27:10 · 395 阅读 · 0 评论 -
axios常见传参方式及基本使用
1:get请求一般发送请求是这么写axios.get('/user?id=12345&name=user').then(function (res) { console.log(res);}).catch(function (err) { console.log(err);});但是为了方便全局统一调用封装的axiosaxios.get('/user', { //params参数必写 , 如果没有参数传{}也可以 params: { id:原创 2020-08-10 11:19:30 · 26418 阅读 · 2 评论 -
VUE关于操作数组的方法
1,锁定数组的长度(只读模式)[ Array.join() ]var a = [1,2,3] //定义一个数组Object.defineProperty(a,"length",{writable:false}) //将a数组的长度属性设为只读a.length = 0 //将a的长度改为0console.log(a.length); //打印a数组的长度,还是32、将数组合并成字符串(返回字符串)[ Array.join() ]var a = [1,2,3];var b = a.joi原创 2020-08-10 09:49:53 · 834 阅读 · 0 评论 -
Object.assign()的使用和注意
基本用法Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。注意,如原创 2020-08-04 17:39:43 · 4179 阅读 · 0 评论 -
Vue子组件调用父组件
Vue子组件调用父组件的方法Vue中子组件调用父组件的方法,这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> // 记得写组件名称 <child></child> </div></template><script> import child from '~/components/dam/chil原创 2020-08-03 18:04:05 · 152 阅读 · 0 评论 -
简单理解Vue中的nextTick
简单理解Vue中的nextTickVue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick。一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">M转载 2020-07-17 10:53:23 · 221 阅读 · 0 评论 -
Vuex的使用(案例解析)
Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:new Vue({ el: '#app' ...})那么 export default {} 又是来干嘛的?这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口原创 2020-07-15 12:57:47 · 1598 阅读 · 1 评论