vue
折海棠赠晩宁.
这个作者很懒,什么都没留下…
展开
-
web前端面试题必备
1、vue数据双向绑定原理vue.js 是采用数据劫持结合发布者-订阅者的模式的方法,通过Object.defineProperty()来劫持各个属性的Getter、setter,在数据变动时发送消息给订阅者。它实现的整个流程是先为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model就会添加一个订阅者,接着用input举例,为input添加监听事件,修改值就会为这个属性赋值原创 2020-10-12 09:21:52 · 881 阅读 · 2 评论 -
vue双向数据绑定原理(面试必备)
原理vue.js是采用数据劫持结合发布者-订阅者的模式的方法,通过Object.defineProperty()来劫持各个属性的Getter、setter,在数据变动时发送消息给订阅者。实现的整个流程首先为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model就会添加一个订阅者,接着为input添加监听事件,修改值就会为该属性赋值,触发该属性的set方法,在 set方法内原创 2020-10-05 10:05:07 · 385 阅读 · 0 评论 -
Vue 项目性能优化 (图片优化)
Webpack 对图片进行压缩在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理,对小于 limit 的图片转化为 base64 格式,其余的不做操作。所以对有些较大的图片资源,在请求资源的时候,加载会很慢,我们可以用 image-webpack-loader来压缩图片:首先,安装 image-webpack-loader :npm install image-webpack-loader --save-dev原创 2020-09-24 21:45:27 · 851 阅读 · 0 评论 -
vue 自定义指令如何使用和应用场景
作用:是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。自定义指令编写的方式有2种 1、全局自定义指令 全局的指令必须要在实例化之前进行定义 Vue.directive(参数1,参数2) 参数1: 指令的名称 参数2: 指令实现的函原创 2020-09-20 21:21:37 · 306 阅读 · 0 评论 -
vue组件封装
我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、原创 2020-09-20 21:08:16 · 104 阅读 · 0 评论 -
vue中的事件修饰符
常用的修饰符@事件.stop 阻止事件冒泡@事件.prevent 阻止事件默认行为@事件.capture 触发事件捕获@事件.self 当事件在该元素本身 触发回调@once 只执行一次@事件.passive 告诉浏览器你不想阻止事件的默认行为.使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。v-model的修饰符<1>原创 2020-09-20 21:04:18 · 152 阅读 · 0 评论 -
js的数据类型 存储
js数据类型JavaScript一共有8种数据类型:7种基本数据类型: Undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值) 和 BigInt(es10新增);1种引用数据类型: Object(Object本质上是由一组无序的名值对组成的)。里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制,而所有值最终都将是上述 8 种数据类型之一。如何存储基本数据类型:直接存储在栈(sta原创 2020-09-20 20:52:21 · 202 阅读 · 0 评论 -
vue常用指令
1、v-model多用于表单元素实现双向数据绑定2、v-for循环数组或json3、v-show显示/隐藏dom元素,通过display=block/none来控制元素显示/隐藏4、v-if判断显示/隐藏 dom元素5、v-else-if必须和v-if连用6、v-else必须和v-if连用 不能单独使用 否则报错 模板编译错误7、v-bind绑定属性v-bind:class 三种绑定方法1、对象型 ‘{red:isred}’2、三元型 ‘isred原创 2020-09-16 21:42:58 · 101 阅读 · 0 评论 -
vue中的11个生命周期
BeforeCreate(创建前)该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前,实例初始化之后被调用。在该阶段组件未创建,不能访问数据,组件中的 data,ref 均为 undefined。Created(创建后)在组件创建完成后立即调用在这一步 实例已经完成了数据观测 属性和方法的运算 watch、event事件回调但是还没有渲染成html模板 组件中的data已经存在 可以进行操作了 但是el仍然是undefiend 因为挂载原创 2020-09-16 08:25:16 · 2933 阅读 · 0 评论 -
在vue中v-if和v-show的区别与使用场景
相同点都可以动态控制着dom元素的显示隐藏区别一、基于vue框架v-if:控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show:控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的二、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下;v-show适合频繁切换;...原创 2020-09-15 20:41:27 · 159 阅读 · 0 评论 -
vue中axios封装和api接口管理
vue中Axios的封装和API接口的管理我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。1. 安装npm install axios; // 安装axios2. 目录创建一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一原创 2020-09-14 19:19:09 · 219 阅读 · 0 评论 -
generator总结(异步编程、yield、next()、await 、async)
提示:Generator 是一个迭代器生成函数,其返回值是一个迭代器(Iterator),可用于异步调用。迭代器协议: 定义了一种标准的方式来产生一个有限或无限序列的值Generator 函数的定义语法上,可以把理解成,Generator 函数是一个状态机,封装了多个内部状态。形式上,Generator 函数是一个普通函数。它不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。整个Generator函数就是一个封装的异步任务,或者说是异步任务的容器,异步操作需要暂停的地方,都用y原创 2020-09-06 16:17:02 · 235 阅读 · 0 评论 -
async/await(优势在于处理then链)
词法定义asyncasync 是“异步”的简写, async 用于申明一个异步的 functionawait有两个作用,一是作为求值关键字,二是将异步操作变成同步操作;如果方法中使用了await,那么在方法前面必须加上asyncawaitawait 可以认为是 async wait 的简写,await 用于等待一个异步方法执行完成。async/await其实是Promise的语法糖,它能实现的效果都能用then链来实现,它是为优化then链而开发出来的。从字面上来看,async是“原创 2020-09-06 16:01:41 · 1204 阅读 · 0 评论 -
Promise总结(promise 是什么?有哪些状态和参数?如何使用?)
Promise 是什么?Promise 是异步编程的一种解决方案:主要用于异步计算可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果可以在对象之间传递和操作 promise,帮助我们处理队列Promise的参数是什么?Promise接受一个「函数」作为参数,该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用:在异步操作失败时调用,并将异步原创 2020-09-06 15:34:53 · 2545 阅读 · 0 评论 -
VueX如何使用和相关面试题(Vue状态管理模式)
一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的,所以在下文出现的项目的目录请参照VueCli 2.转载 2020-09-03 23:20:04 · 414 阅读 · 0 评论 -
H5 的新特性总结
1、语义化标签:header、footer、section、nav、aside、article2、增强型表单:input的多个 type3、新增表单元素:datalist、keygen、output4、新增表单属性:placehoder、required、min 和 max5、音频视频:audio、video6、canvas绘画7、地理定位8、拖拽9、本地存储:localStorage - 没有时间限制的数据存储;sessionStorage- 针对一个 session 的数据存储,当用户关原创 2020-08-30 16:08:00 · 259 阅读 · 0 评论 -
css3动画的总结
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题。CSS3 的出现,让动画变得更加容易,性能也更加好。CSS3 中有三个关于动画的样式属性transform、transition和animation;transformtransform可以用来设置元素的形状改变,主要有以下几种变形:rotate(旋转)、scale(缩放)、skew(扭曲)、translate(移动)和matrix(矩阵变形),语法如下:原创 2020-08-30 15:28:35 · 142 阅读 · 0 评论 -
如何实现水平/垂直居中?
水平居中1.行内元素如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center 来实现的2.定宽块状元素当被设置元素为块状元素时用 text-align:center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。3.不定宽块状元素11)为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。2)为这个 table 设置“左右 margin 居中。4.不定宽块状元转载 2020-08-27 21:01:00 · 358 阅读 · 0 评论 -
React组件的props属性、state属性、refs属性详解
React组件属性1、props属性react中说的单向数据流值说的就是props,根据这一特点它还有一个作用:组件之间的通信。props本身是不可变的,但是有一种情形它貌似可变,即是将父组件的state作为子组件的props,当父组件的state改变,子组件的props也跟着改变,其实它仍旧遵循了这一定律:props是不可更改的。props属性的特点:每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中内部读取某个属性值:this.prop原创 2020-07-29 20:13:28 · 852 阅读 · 0 评论 -
react 三种通信方式(父传子、子传父、兄弟传值)
react有三种通信方式:一、父传子,二、字传父,三、兄弟之间传值原创 2020-07-29 19:33:33 · 5540 阅读 · 0 评论 -
vue京东案例 (搜索、详情、购物车、导航栏)
1.nav导航组件nav导航组件`template`中<template > <div> <div class="header"> <van-search show-action placeholder="请输入搜索关键词" @click="gotosearch"> <template #action> <div class="iconfont icon-gouwuche1-co原创 2020-07-26 20:41:17 · 3373 阅读 · 2 评论 -
VUE二级导航遍历数据
二级导航遍历数据先在小黑框下载 axios插件使用npm:$ npm install axios在下载vant插件通过 npm 安装npm i vant -S必须在main.js中引入vant和axios插件完整引入代码如下:import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios原创 2020-07-08 20:56:59 · 659 阅读 · 0 评论 -
axios使用实例详解
1、基本用法安装cnpm i axios --save在 main.js 中引入axiosimport axios from 'axios'Vue.prototype.$axios = axios在组件中使用 axios<script>export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) }}</scri原创 2020-07-03 09:27:14 · 2371 阅读 · 0 评论