![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE学习笔记
文章平均质量分 64
vue学习
前端学习007
学习、工作记录、技术交流
展开
-
sass-loader、node-sass安装失败问题解决
To install it, you can run: npm install --save !!vue-style-loader!css-loader?{“sourceMap”:true}!../…/…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:"data-v-在网上搜索解决方案的时候,大部分解决方式都是如下:npm install stylus stylus-loader style-loader --sav原创 2021-06-03 22:01:16 · 4475 阅读 · 1 评论 -
Vue中的computed属性
computed属性1.computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;2.computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化.举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计原创 2021-03-30 10:48:55 · 302 阅读 · 0 评论 -
npm ERR! missing script: dev 的解决方案
打开项目的配置文件:package.js里,找到"scripts": {},如图我们发现根本没dev的属性。我们应该执行npm run serve转载 2021-03-30 10:47:12 · 10345 阅读 · 1 评论 -
this.$nextTick()怎么使用?
应用场景:this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中,vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时,dom还没有渲染,如果此时在该钩子函数中进行dom赋值数据(或者其它dom操作)时无异于徒劳,所以,created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,而与created()对应的是mounted()的钩子原创 2021-03-25 09:54:40 · 1175 阅读 · 0 评论 -
vue父组件传递props异步数据到子组件遇到的问题
状况1: 父组件parent.vue// asyncData为异步获取的数据,想传递给子组件使用<template> <div> 父组件 <child :child-data="asyncData"></child> </div></template> <script> import child from '../demo/children.vue' export default { data原创 2021-03-09 17:07:44 · 997 阅读 · 0 评论 -
Vue的watch实现原理图
原创 2021-03-06 10:32:36 · 519 阅读 · 0 评论 -
Vue源码解析:虚拟dom详解
一句话:vue的虚拟dom是将多次dom操作保存在一个js对象(虚拟dom对象)中,然后用这个js对象一次性的去更新dom操作,这样就避免了很多无效的计算一、DOM和其解析流程?创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。第二步,用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表。第三步,将DOM树和样式表,关联起来,构建转载 2021-03-02 18:44:43 · 340 阅读 · 0 评论 -
Vue源码解析:数据双向绑定(响应式)原理
vue的双向数据绑定(响应式)原理到底是什么呢?这还是得从vue的源码说起:我们知道vue的一大特点是数据驱动视图,如何理解数据驱动视图这六个字呢?数据:可以理解为state;驱动:这里应该是一个动词,就是操作的意思,就是render函数;视图:就是页面的UI;这样说来,其实我们可以得到这样一个公式:UI = render(state),这样一来,state的变化就会直接导致UI的变化,而始终不变的是这个render,vue就是扮演了人render的角色。那么vue是如何知道state变化的呢?这翻译 2021-03-01 17:46:07 · 510 阅读 · 0 评论 -
Vue 核心之数据劫持
Vue 核心之数据劫持Angular、Regular、Vue、React等等可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现的原理也基本上是脏检查或数据劫持。 本文就以Vue框架出发,学习Object.defineProperty来实现数据劫持。Object.defineProperty(obj,prop,descriptor) 用法介绍:参数obj:目标对象prop:需要定义的属性或方法的名称descriptor:目标属性所拥有的特性可供定义的特性列表value:属性的值翻译 2021-03-01 09:19:34 · 224 阅读 · 0 评论 -
vue的双向绑定原理及实现
本文主要介绍两大内容:vue数据双向绑定的原理。实现简单版vue的过程,主要实现{{}}、v-model和事件指令的功能。1. vue数据双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。var vm = new Vue({ data: { obj: { test: 'hello vue' } }, cr转载 2021-02-27 15:48:22 · 1063 阅读 · 1 评论 -
vue中v-model使用
v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作: 1. v-bind绑定一个value属性 2. v-on指令给当前元素绑定input事件自定义组件使用v-model,应该有以下操作:接收一个value prop触发input事件,并传入新值在原生表单元素中:<input v-model="inputValue">相当于<input v-bind:value="inputValue" v-on:input="inputValu原创 2021-02-27 13:09:50 · 836 阅读 · 1 评论 -
用 async/await 来处理异步
用async/ await来发送异步请求,从服务端获取数据。先说一下async的用法,它作为一个关键字放到函数前面,只有一个作用, 它的调用会返回一个promise 对象。调用一下,看看就知道了,怎么调用?async 函数也是函数,所以它的调用和普通函数的调用没有什么区别,直接加括号调用就可以了,为了看结果,console.log 一下。async函数(timeout)的调用,确实返回promise 对象,并且Promise 还有status和value,如果async 函数中有返回值 ,当调用该函原创 2021-02-19 11:22:08 · 587 阅读 · 0 评论 -
vue 框架学习(6) 插槽及使用
文章目录什么是插槽一、初次使用插槽`第一步:在子组件的模板里定义个< slot />``第二步:在实例里把子组件component3注册上``第三步:使用组件`提示:示例 :二、具名插槽2.1 在slot元素上使用attribute(属性):name2.2 怎么把内容放在制定的插槽位置?2.3 使用具名插槽示例:三、编译作用域和作用域插槽3.1 编译作用域1)Vue规则2)举例说明展示效果3.2 作用域插槽1)什么是作用域插槽2)举例说明使用示例:四、动态插槽名示例:五、具名插槽缩写什么是插槽翻译 2021-02-09 11:42:21 · 253 阅读 · 0 评论 -
vue 框架学习(5) 组件化开发 和 父子组件传值
第六节:Vue组件化开发(1)-什么是组件一、什么是组件1.1 单个理解最简单的理解,组件也相当于一个小型的Vue实例,组件也可以有实例的各种属性。组件是一个完整的单位个体,可以有js可以有css和html。(现在写的是没有包含css和js)。1.2 整体理解开发过html的人都知道,其实我们界面是由一个个div的布局来显示出来,每一个div里都有对应的展示内容,如果我们把这一个个div想象成一个整体,整体中又可以嵌套一个整体,最后我们界面就会变成一个个小模块组成。Vue组件开发就是这个模式翻译 2021-02-09 09:27:48 · 153 阅读 · 0 评论 -
vue 框架学习(4) 指令 和 计算属性computed
第三节:Vue模板语法(插值、指令、缩写)一、插值1.1 文本数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,使用方式就是直接用{{vue.data.变量}}1.2 展示HTML使用 v-html指令<h1 v-html="urlStr"></h1>1.3 Attribute属性v-bind 指令对于布尔 attribute (它们只要存在就意味着值为 true),v-bind 工作起来略有不同如果 disabledVal 的值是原创 2021-02-08 15:02:32 · 309 阅读 · 0 评论 -
vue 框架学习(3)-生命周期
一、什么是MVVMMVVM是Model-View-ViewModel的简写,体现在框架上的样子如下:(图片是在网上找的)体现在代码上编写位置如下:MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑,而MVVM主要目的是分离视图(View)和模型(Model),然后减低耦合,提高可重用性,让开发把关注点放在业务处理上,界面的展示转载 2021-02-07 12:02:23 · 170 阅读 · 0 评论 -
vue 框架学习(2)- 框架介绍
一、 Vue.js 是什么?官网的描述:Vue 是一套用于构建用户界面的`渐进式框架` 。与其它大型框架不同的是,Vue 被设计为可以`自底向上逐层应用`。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与 `现代化的工具链` 以及各种 `支持类库` 结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。这里有几个关键字: 渐进式框架、现代化的工具链、支持类库用一个例子说明我们现在很多界面排版的方式,div布局:Vue是怎样渐进式到现有的界面上去呢,原创 2021-02-07 10:46:50 · 411 阅读 · 0 评论 -
学习笔记 (2) uni-app中的数据绑定 和 事件绑定
uni-app中的数据绑定在页面中需要定义数据,和我们之前的vue 一样,直接在data中定义数据即可。export default {data () { return { msg:'hello-uni' } }}差值表达式利用差值表达式渲染数据<view> {{msg}} </view>在差值表...原创 2020-04-25 09:04:35 · 1257 阅读 · 0 评论 -
代码格式错误提示:http://eslint.org/docs/rules/eol-last Newline required at end of file but not found
初次运行时出现:http://eslint.org/docs/rules/eol-last Newline required at end of file but not found错误提示。1、报错解释 Errors: 1.http://eslint.org/docs/rules/eol-last 表示:文档末尾要换行 Errors: 2 http://eslint.org/docs/rules/spaced-comment原创 2021-02-05 16:55:28 · 1658 阅读 · 0 评论 -
vue 框架学习(7)-创建项目
创建项目步骤如果你已经安装了node.js,VsCode, 再进行操学习Vue知识之前先来创建个项目吧。npm install -g vue-cli,然后等待安装(vue-cli可以帮助我们快速构建Vue项目)npm install -g webpack命令,等待安装(打包js的工具)创建一个名为hellovue的项目吧,名字随意取,输入回车vue init webpack hellovue在vscode中打开在终端创建的项目。目录结构展示在左侧。5.在package.json 中找到启原创 2021-02-05 16:50:40 · 122 阅读 · 0 评论 -
uni-app 导航栏使用iconfont 字体图标(unicode引用方式)
unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件 ,新建一个专门存放文件夹。复制  设置导航栏字体图标:"text": "\ue73f","fontSrc":"/static/iconfont/iconfont.ttf"效果图如下:...原创 2021-01-28 16:03:29 · 3141 阅读 · 0 评论 -
iconfont symbol引用,展示彩色字体图标
1.去阿里巴巴图标库中找到自己的项目,选择symbol ,下载到本地。2.将下载后的文件解压找到iconfont.js文件,copy到项目。我是在static 下面新建的一个名为iconfont的文件夹。3.并在同级目录下新建一个 icon.css文件4.在icon.css中粘贴下面代码。通用css代码:.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;原创 2021-01-28 15:29:53 · 852 阅读 · 1 评论 -
uni-app图片压缩转base64位,多图片上传
之前写过uni-app H5方式上传图片,但是在生成apk后,上传图片失败,不支持app上传。查找资料后解决app上传多图问题。H5方式上传图片可参考:uni-appH5端canvas压缩图片图片选择,每次最多选择4张,最多上传8张 chooseImage: async function() { var that = this; uni.chooseImage({ source原创 2020-09-09 17:52:26 · 1304 阅读 · 0 评论 -
CSS学习笔记(flex 伸缩布局 )
一、伸缩布局 Flexdisplay: flex | inline-flex;Flexbox 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染成一个块元素,而设置为 inline-flex 的容器渲染为一个行内元素。属性值决定容器是如何显示的,它的所有子元素将变成 flex 文档流,被称为伸缩项目。Tips:被定义为伸缩项目后,CSS 的 columns 属性在伸缩容器上没有效果,同时 f原创 2020-09-09 17:42:28 · 278 阅读 · 0 评论 -
CSS学习笔记(浮动float)
一、标准流(normal flow)标准流又称为文档流,普通流。标准流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思。比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。二、浮动(float)浮动最早是用来控制图片的,以便达到其他元素(特别是文字)实现 “环绕”图片的效果。现在我们主要使用浮动来让块级元素并排显示。1、浮动是什么 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指原创 2020-09-09 17:41:21 · 190 阅读 · 0 评论 -
CSS学习笔记(初识)
1.定义css是层叠样式表 (Cascading Style Sheet),又叫级联样式表,简称样式表。2.作用(1)用于HTML文档中元素样式的定义。实现了将内容与表现分离。(2)提高代码的可重用性和可维护性。文件后缀是.css。3、css与HTML之间的关系(1)HTML用于构建网页的结构(2)CSS用于构建HTML元素的样式(3)HTML是页面的内容组成,CSS是页面的表现结构层 HTML表示层 CSS行为层 JS4、导入CSS的方式(1)内联方式直接把CSS代码用sty原创 2020-09-09 17:40:59 · 302 阅读 · 0 评论 -
CSS学习笔记(浏览器兼容问题)
渐进增强 (progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级( graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。区别:渐进增强是向上兼容,优雅降级是向下兼容。浏览器前缀:css渐变分为以下两类:线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradient原创 2020-09-09 17:40:29 · 123 阅读 · 0 评论 -
CSS 盒子垂直居中的方法
一、盒子垂直居中的方法 1、先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离。 <div class="father"> <div class="son"></div> </div> /* 通过 transform 属性来移动*/ .father { width: 500px; height: 500px; background-co原创 2020-09-09 17:39:54 · 1522 阅读 · 0 评论 -
uni-app 请求后台接收为null 空值
'Content-Type': 'application/x-www-form-urlencoded'uni.request({ url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。 header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { name: 'name',原创 2020-09-09 17:39:17 · 3498 阅读 · 1 评论 -
vue 随机取一个数组中的4项数据
项目的换一换功能随机展示4个商品: /* 换一换*/ change() { this.recommendItems = this.getRandomArrayElements(this.recommendlist, 4) }, /* 随机获取数组中的数据*/ getRandomArrayElements(arr, count) {原创 2020-09-07 15:27:33 · 3567 阅读 · 1 评论 -
uni-app引入自定义图标库
1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的)方法一:2.在项目根目录下创建common目录,并把iconfont.css文件放入common目录中3.修改iconont.css里的@font-face(保留base64字体图标)删除划线部分,保留结尾分号。删除后:@font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09原创 2020-07-21 15:39:21 · 898 阅读 · 0 评论 -
vue中mixins的使用方法
mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改因项目需要全局隐藏钉钉导航,故创建ddhide.js 文件1.在common文件夹下创建一个ddhide.js文件import * as dd from 'dingtalk-jsapi'// 创建一个需要混入的对象ddhide export const ddhide = { data(){ return{ } }, created(){ if (dd.env.platform !翻译 2020-07-17 09:15:24 · 327 阅读 · 0 评论 -
IOS中 button按钮去除边框
IOS中 button按钮去除边框 <view class="view_2"> <button class="btn edit" type="button" @click="edit">编辑</button> <button class="btn submit " type="button" @click="$dianji(submit)">提交</button> </view>ios系统运行 会出现边框。添加代码可去原创 2020-07-15 11:47:24 · 695 阅读 · 0 评论 -
uni-appH5端canvas压缩图片
实现原理要想使用JS实现图片的压缩效果,核心API就是使用canvas的drawImage()方法。Canvas本质上就是一张位图,而drawImage()方法可以把一张大大的图片绘制在小小的Canvas画布上,不就等同于图片尺寸压缩了?对于本案例的压缩,使用的5个参数的API方法context.drawImage(img, dx, dy);context.drawImage(img, dx, dy, dWidth, dHeight);context.drawImage(img, sx, sy, s原创 2020-07-15 11:18:33 · 2837 阅读 · 2 评论 -
uniapp 解决暴力点击触发事件
1.先创建一个文件交common文件在文件下面创建一个common.js文件内容如下// 处理多次点击方法function dianji(fn) { let that = this; if (that.onoff) { that.onoff = false; fn(); setTimeout(function () { that.onoff = true; }, 1500) } else {原创 2020-07-11 09:33:32 · 4640 阅读 · 1 评论 -
uni-app 全局变量的实现方式
方法1:公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.js 用于定义公用的方法。const websiteUrl = 'http://uniapp.dcloud.io'; const now = Date.now || function () { re原创 2020-07-07 15:05:44 · 638 阅读 · 0 评论 -
uni-app 打开外部网页地址 web url
1、App平台可以使用 plus.runtime.openURL或web-view组件;2、H5平台使用 window.open;<view class="example-body"><uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link></view>uni-link组件<template><text st原创 2020-07-07 11:58:34 · 17061 阅读 · 2 评论 -
uniapp 返回上一页并刷新页面数据
一、page.json文件中配置返回按钮 { "path": "pages/xxx/xxx", "style": { "navigationBarTitleText": "礼品上交", "app-plus": { "titleNView": { "buttons": [{原创 2020-07-07 11:08:06 · 12721 阅读 · 1 评论 -
钉钉导航栏显示/隐藏
//显示钉钉导航栏 dd.biz.navigation.hideBar({ hidden: false, // true:隐藏,false:显示 onSuccess: function(result) {}, onFail: function(err) {} })原创 2020-07-02 17:49:24 · 3093 阅读 · 6 评论 -
uni-app中自定义组件onLoad,onReady不起作用
组件会使uniapp的生命周期失效,换成vue的生命周期就行了,在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理在uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理原创 2020-07-02 17:31:23 · 7192 阅读 · 3 评论