vue
vue的基础知识
优惠券已抵扣
余额抵扣
还需支付
¥19.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
小黄呀呀呀
整理的笔记要点主要是记录给自己看的,涉及原创可以私信我修改,谢谢!
展开
-
赋值、浅拷贝、深拷贝的含义、实现方法、总结
基本数据类型:Boolean、String、Number、null、undefined引用数据类型:Object、Array、Function、RegExp、Date等基本数据类型都是按值访问的,可以操作保存变量中的实际值(2)引用数据类型的复制,是按引用传值引用类型如Arrray、Object,不能直接操作对象的堆内存空间,都是直接按引用访问的,即保存在变量对象中的一个地址。(1)只复制指向某个对象的指针,而不复制这个对象本身,新旧对象共享一块内存。(2)基本数据类型直接复制值,引用数据类型(数转载 2022-07-06 14:18:26 · 716 阅读 · 0 评论 -
import qs from ‘qs‘ qs库的使用和 对象和json字符串之间的转换
(1)将url中的参数转为对象 qs.parse()(2)将对象转为url参数形式 qs.stringify()转载 2022-07-06 09:41:07 · 4082 阅读 · 0 评论 -
vue中使用ref绑定元素
原生js获取DOM元素是很麻烦的,需要用如:document.getElementById这么长的API来获取,于是jQuery应运而生,$(“#id”)的使用使我们的操作变得简便起来。但是jQuery仅仅是库(插件),不能够用来搭建框架。于是vue可以帮我们解决这个问题,vue也有自带的获取DOM的方法,那就是ref。它不仅可以获取DOM元素还可以获取组件。1、给dom节点记上ref属性,可以理解为给dom节点起了个名字。2、加上ref之后,在$refs属性中多了这个元素的引用。3、通过vue实例的$re转载 2022-07-05 15:29:00 · 5429 阅读 · 1 评论 -
vue 定义一个全局实例 Vue.prototype
使用场景:你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:则控制台会打印出 My App。就这么简单!$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。...转载 2022-07-05 10:20:07 · 2125 阅读 · 0 评论 -
常用的Typora自定义快捷键设置
"一级标题": "alt+1" "二级标题": "alt+2" "三级标题": "alt+3" "四级标题": "alt+4" "代码块": "alt+q" "有序列表": "alt+w" "无序列表": "alt+e"//最新版使用下面的需要 Update 2021.2.2 "Heading 1": "alt+1", "Heading 2": "alt+2", "Heading 3": "alt+3", "Heading 4": "alt+4", "Cod.转载 2022-05-04 17:01:37 · 900 阅读 · 0 评论 -
uniapp中自定义代码前端进行数据的分页
<template> <view> <goods-list :goods="goods" @receiveSon="goGoodsDetail"></goods-list> <view class="line" v-if="flag==true">---我是有底线的----</view> </view></template><script> import goodsList fro原创 2022-04-16 18:15:39 · 864 阅读 · 0 评论 -
v-for和v-if同时使用的解决办法
在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错。报错代码如下:<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8}" v-for="Oitem in Object.keys(cItem)" :key="Oitem" v-if="Oitem !== 'title'" v-model="cItem[Oitem]"><转载 2022-04-10 21:52:11 · 1340 阅读 · 0 评论 -
字符串中占位符的写法
字符串中占位符的写法原创 2022-04-01 14:35:50 · 309 阅读 · 0 评论 -
ui组件之间的传值,可以使用作用域插槽
ui组件之间的传值,可以使用作用域插槽 <el-table :data="equipmentData" stripe class="system-table" height="calc(100% - 170px)" > <el-table-column width="180" prop="equipName" // 对应数据 label转载 2022-03-31 11:42:22 · 97 阅读 · 0 评论 -
【vue】vue的生命周期,uniapp的组件生命周期
一、 Vue的生命周期beforeCreate创建前初始化但未加载监听拦截created创建后初始化且加载监听拦截beforeMount挂载前dom节点还未加载上树mounted挂载后dom节点已经挂载上树beforeUpdate更新前数据已修改,但还未加载到视图上updated更新后数据已修改,并且视图dom已经更新beforeDestory销毁前数据销毁前destoryed销毁后数据销毁后二、生命周期转载 2022-03-30 15:01:47 · 534 阅读 · 0 评论 -
React和vue中key值的作用?
1、虚拟DOM中key的作用: key时虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生产【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异进行比较,比较规则如下:2、对比规则: (1)旧虚拟DOM中找到了与新虚拟DOM相同的key值: 1)若虚拟DOM中内容没变,直接使用之前的真实DOM 2)若虚拟DOM中内容遍历,则生成新的真实DOM,随后替换掉页面中之前的真实DOM (2)旧虚拟DOM中未找到与虚拟DOM相同的ke原创 2021-11-27 18:24:33 · 215 阅读 · 0 评论 -
如何看待watch监听支持异步,computed不支持异步?
问题:姓名案例中,显示全名时,推迟1s进行显示,分别用2种方法实现。watch实现-正常可以是实现,但是要注意定时器的写法,注意this指向<html> <head> <title>VueJs 在线编辑器</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"> </script&原创 2021-11-24 23:32:12 · 2774 阅读 · 0 评论 -
vue的前端工程化笔记1:模块化相关规范、webpack、Vue 单文件组件、Vue 脚手架、Element-UI 的基本使用
1、模块化相关规范1.1 模块化概述传统开发模式的主要问题①命名冲突②文件依赖通过模块化解决上述问题(1)模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块(2)模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护1.2 浏览器端模块化规范1.3 服务器端模块化规范1.4 大一统的模块化规范 – ES6模块化1. Node.js 中通过 babel 体验 ES6 模块化1.5 ES原创 2020-10-20 15:04:43 · 212 阅读 · 0 评论 -
vue的问题2: 打包css文件没反应,原因是版本太高
打包css文件的步骤问题:没反应解决方法:原创 2020-10-19 14:46:57 · 192 阅读 · 0 评论 -
vue的问题1:Cannot find module ‘webpack/bin/config-yargs‘
问题:Cannot find module ‘webpack/bin/config-yargs’解决方法:将版本改成这样"webpack": "^4.8.3","webpack-cli": "3.3.0","webpack-dev-server": "^3.1.4"原创 2020-10-19 11:35:44 · 174 阅读 · 0 评论 -
vue的重点11:文本输入框的提示颜色、复选框的样式设置、旋转对块级元素或者行内块元素有效,对行内元素无效
1、文本输入框的提示颜色input::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc;}2、复选框的样式设置input[type="checkbox"] { width: 1.64rem; height: 1.64rem; display: inline-block; text-align: center; vertical-align: baseline;原创 2020-10-14 16:24:08 · 541 阅读 · 0 评论 -
vue的项目4:购物车案例(组件、父子组件之间的传值、计算属性、插槽、v-model双向绑定)
1、要求实现一个购物车(1)点击删除时就删除该一行(2)点击加号和减号,都会有相应的变化,如果数量等于0的话,减号应该被禁用(3)每一行数量发生变化的时候,下面的总价会相应的发生变化(4)点击弹窗之后,会显示价格2、效果图先看下效果图3、分析一、自定义4个组件(1)最外面的组件,蓝色的(2)红1组件,放标题(3)红2组件,放列表(4)红3组件,放总价和结算二、最外面的是全局组件,剩下的3个都是局部组件三、数据都放在父组件里,利用父子组件之间的传值进行操作四、对数据进原创 2020-10-14 14:01:59 · 790 阅读 · 0 评论 -
vue的重点11:利用模板字符串将li遍历出来(不进行插槽的操作、匿名插槽 进行遍历、利用作用域插槽[父对子的内容进行操作,可以遍历的时候同时进行选择性的操作、直接在模板字符串里进行判断))
利用模板字符串将li遍历出来方法1:不进行插槽的操作 <template> <lis-test :lis="lis2"> <!-- 子组件传值给父组件,父组件通过slotProps来接受 --> <template slot-scope="slotProps"> </template> </lis-test> </template> V原创 2020-10-14 10:11:12 · 257 阅读 · 0 评论 -
vue的重点3:event.target.innerHTML的使用和过滤器filter、子组件传值给父组件、兄弟组件之间的传值
event.target.innerHTML没有传递参数,上面什么都不写,下面用event接受<div id="app"> <button v-on:click="add">点击</button> {{num}} </div> var vue = new Vue({ el: '#app', data: { msg: 'zhangsan', num: 0 },原创 2020-10-12 15:22:38 · 1781 阅读 · 0 评论 -
vue的重点9:findIndex、find方法
findIndex 根据条件返回这个元素的下标不过只会返回第一个let a=arrs.findIndex(e=>{ return e.id==2})find 根据条件返回这个元素 不过只会返回第一个let a=arrs.find(e=>{ return e.id==2})原创 2020-10-13 15:32:28 · 2245 阅读 · 0 评论 -
vue的重点7:用3种方式实现数组的去重(set数据结构、用indexOf的方法、用findIndex的方法)
方法1:用set数据结构//set数据结构的特点:不存储重复的元素var a = [1, 2, 3, 2, 4, 3]var t = new Set(a)var q = [...t]console.log(q);方法2:用数组的方法//看b数组里有没有这个元素,没有的话,就插入到这个数组里var b = []for (var i = 0; i < a.length; i++) { if (b.indexOf(a[i]) == -1) { b.push(a[i]) }原创 2020-10-13 10:25:51 · 1159 阅读 · 0 评论 -
vue的重点6:数组和字符串之间的相互转换
将数组转为字符串(1)toString()(2)join('连接符'):如果不写的话,默认是逗号将字符串转为数组 split('分隔符')参考:https://blog.csdn.net/qq_42129553/article/details/108641293?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160255221519726892419265%2522%252C%2522scm%2522%253A%25222原创 2020-10-13 09:27:13 · 3548 阅读 · 0 评论 -
vue的重点5:用v-model获取文本框、单选框、复选框、下拉框、文本域的值
用v-model获取文本框、单选框、复选框、下拉框、文本域的值 <div id="app"> <!-- ============================【v-model获取文本框的值】=================================== --> <input type="text" v-model="ipt"> <!-- ============================【v-model获取单选框的值】===原创 2020-10-12 17:29:33 · 814 阅读 · 0 评论 -
vue的重点4:vue下按下回车键触发事件
vue下按下回车键触发事件方法1: <div id="app"> <input type="text" @keyup.enter="touch"> </div>方法2: <div id="app"> <input type="text" @keyup.13="touch"> </div>方法3: <div id="app"> <!-- 自定义按键修饰符 -->原创 2020-10-12 16:06:24 · 3400 阅读 · 0 评论 -
vue的项目3:计划清单(计算属性、组件之间的传值)
1、效果2、思想3、代码分析(1)头部分离 //将头部抽离出形成一个组件 Vue.component('headers', { props: ['content'], data: function () { return { invalue: '', all_flag: false,原创 2020-09-15 17:37:09 · 135 阅读 · 0 评论 -
vue重点2:兄弟组件之间的传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id.原创 2020-09-15 15:47:29 · 119 阅读 · 0 评论 -
vue重点1:disabled=“false“ 在字符串模板中无效的原因
问题:在字符串模板里对按钮设置属性的时候,想要先测试一下的,实现的效果,但是发现失效产生原因:我上面的东西是写在字符串模板里的,所以布尔值在字符串模板里是字符串型的,所以我们需要将其绑定成一个变量设置禁用的一个小技巧...原创 2020-09-14 18:04:40 · 6282 阅读 · 2 评论 -
vue笔记3:组件之间的传值(父传子、子传父、兄弟之间)、插槽(匿名、具名、作用域)
day03组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component>&l原创 2020-09-14 17:58:10 · 517 阅读 · 0 评论 -
vue笔记整理2:表单操作、表单修饰符(number、trim、lazy)、自定义指令、计算属性、侦听、过滤器(日期格式化)、生命周期、数组(变异数组、替换数组、响应式数组、响应式对象)
一、表单操作【将表单里的数据进行双向绑定】输入框: <span>姓名:</span><input type="text" v-model="name">单选框: <span>性别:</span><input type="radio" value="男" v-model="sex">男<input type="radio" value="女" v-原创 2020-09-10 16:49:15 · 163 阅读 · 0 评论 -
vue项目2:图书的增删改(过滤器、自定义指令、计算属性、侦听、生命周期)
1、适用场景2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body原创 2020-09-10 16:29:34 · 125 阅读 · 0 评论 -
vue笔记1:数据绑定、常用指令、v-if、v-show、v-for
Vue 是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上指令本质就是自定义属性Vue中指定都是以 v- 开头v-cloak防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */原创 2020-09-09 16:57:55 · 221 阅读 · 0 评论 -
vue的笔记整理1:数据绑定、常用指令、v-if、v-show、v-for
一、数据绑定 1、插值表达式 {{msg}} 缺点:页面上是先显示{{msg}},再进行替换.速度快的话,就看不出来 但是如果网络缓慢的话,就会将{{msg}}显示出来,出现闪动的问题 2、v-cloak 好处:解决页面闪动的问题,也就是上述插值表达式出现的问题 注意:需要我们先将其display:none,这样等到需要赋值的时候,才会将其显原创 2020-09-09 16:53:09 · 237 阅读 · 0 评论 -
Vue的项目1:切换水果页面、切换显示内容
1、切换水果页面用v-if和v-for的结合使用这里的核心是用到了currentindex ,使得根据点击的名字,显示对应的图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2020-09-09 16:40:50 · 358 阅读 · 0 评论