![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
会飞的小蚂蚱
这个作者很懒,什么都没留下…
展开
-
随便写点面试题(三)结束
13.数组的方法var myMap = new Map(); map 返回形式为 [key,value]fliter 返回的是 删除的数组 改变原数组 reducer 函数接收4个参数: 1.Accumulator (acc) (累计器)2.Current Value (cur) (当前值)3.Current Index (idx) (当前索引)4.Source Array (src) (源数组)用法 arr.reduce(callback[, initialValu...原创 2020-06-19 15:04:45 · 145 阅读 · 0 评论 -
随便写点面试题(二)
6.== ===的区别==:运算符称作相等bai,用来检测两个操du作数是否相等,这zhi里的相等定义的非常宽松,可dao以允许进行类型转换===:用来检测两个操作数是否严格相等7.项目上线 是后端一个服务器 还是前端一个服务器 还是一起一个服务器 为什么这么做这个问题也只是问过我 我也没去查 感觉挺冷门的问题8.问了vuex的 管理状态 和 vuex怎么用 vuex主要是组件与组件之间的通讯 1.先安装vuex npm i vuex -s 2.启动项目 npm run d..原创 2020-06-19 14:56:36 · 133 阅读 · 0 评论 -
随便写点面试题吧(一)
1.生命周期 vue2.事件绑定 1.内联方式: 将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventListener方法进行绑定2.点击事件绑定的方法,在Vue实例中,存放在method属性中注:其中method的this指向始终指向vue实例3.事件修饰符 要知道是干嘛用的. stop:阻止冒泡. prevent:阻止默认事件...原创 2020-06-19 14:52:29 · 97 阅读 · 0 评论 -
简单谈谈Vue实现数据双向绑定的原理是什么
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过**Object.defineProperty()**来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和原创 2020-06-09 11:15:38 · 398 阅读 · 1 评论 -
Vue常识:Vue的生命周期有哪些,第一次加载会触发哪些钩子函数
beforeCreatecreated创建初始化数据事件beforeMountmounted载入DOM渲染完成beforeUpdateupdated更新beforeDestroydestroyed销毁第一次页面加载会触发哪几个钩子?会触发 下面这几个beforeCreate, created, beforeMount, mounted 。...原创 2020-06-09 11:13:23 · 2846 阅读 · 1 评论 -
面试题常问:v-if和v-show的区别
v-show的元素始终会被渲染并保存在DOM中,v-show只是简单的切换元素的CSS属性display。而v-if是真正的条件渲染,因为它会确保切换过程中条件块内的时间监听和子组件适当地被销毁和重建。v-if和v-show的使用场合一般而言,v-if有更高的切换开销,而v-show有更高的初始化渲染开销。因此如果要非常的频繁切换,则使用v-show。如果在运行的时候很少改变,则使用v-if较好。...原创 2020-06-04 10:54:20 · 177 阅读 · 0 评论 -
深入浅出: 谈下Vue 中的 key 值
key 的一个错误使用——使用 index 作为 key不知道你在写 v-for 的时候,会不会直接使用 index 作为它的 key 值,是的,我承认我会,不得不说,这真的不是一个好习惯。根据上篇文章,我们还是用 sortable.js 作为例子讨论。以下是核心代码,其中 arrData 的值为 [1,2,3,4]<div id="sort"> <div v-for="(item,index) in arrData" :key="index" > <d...原创 2020-06-04 10:53:35 · 449 阅读 · 0 评论 -
Vue开发实用技巧(小窍门)
vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结。监听组件的生命周期比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,常规的写法可能如下:// Parent.vue<Child @mounted="doSomething"/>// Child.vuemounted() { this.$emit("mo...原创 2020-06-03 09:52:48 · 231 阅读 · 0 评论 -
audio和video标签
<style> * { margin:0; padding:0; } .video_player{ position:relative; width:1000px; height:500px; margin:0 auto; } video{ position:absolute; width:1000px; hei.原创 2020-06-01 09:04:14 · 292 阅读 · 0 评论 -
如何在 nuxt中使用Vuex
引言在nuxt中使用Vuex,以模块方式引用——计数器为例计数器示例图片上传失败。。。。目录结构目录结构js模块写法// user.js// state为一个函数, 注意箭头函数写法const state = () => ({counter: 6})// mutations为一个对象const mutations = {increment(state) {state.counter++},decrement(stat...原创 2020-06-01 09:09:27 · 1384 阅读 · 0 评论 -
vue 基于elment UI tree 组件实现带引导、提示线怎么写
准备工作,先实现 树状组件的基本样式<span style="height:500px; display:block; overflow-y:auto;" class="mytree"> <el-tree :data="data" show-checkbox :indent="0" node-key="id" :default-expand-all="true" :props="defaultProps" ><..原创 2020-05-28 09:26:04 · 375 阅读 · 0 评论 -
vie和elementui的 开发环境的准备工作
之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现方式。采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变,以及需要接触更多的相关知识,本系列随笔基于循序渐进的学习研究方式,对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍,并结合我对BS前端已有的框架功能,进行两者的融合。本篇随笔原创 2020-05-26 09:36:57 · 596 阅读 · 0 评论 -
谈一下 js实现函数防抖与节流
概念理解防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。js函数防抖与节流的区别:函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。个人踩坑1、通过理解函数防抖与函数节流的概念后,使用闭包实现函数防抖和节流,没有考虑到对于节流,如果用户在下一次请求之前已输入完毕,但是此时不会再进行请求,则会导致最后输入的文字获取其他事件改变不发请求,即漏请求,所以需要加一个s原创 2020-05-23 11:45:05 · 182 阅读 · 2 评论 -
封装一个属于自己的axios请求
摘要 axios是一个基于promise的HTTP库,可以用于浏览器中进行AJAX请求处理。在项目中,为了实现通用性,封装了一个axios请求。axios封装1、配置环境变量 1 2 // 根据不同环境变量选择不同的接口服务器域名 exportconst BASE_URL = process.env.REACT_APP_API; 2、创建axios实例 创建axios实例可以根据官方文档进行属于自己的配置,具体属性可以参..原创 2020-05-23 11:41:58 · 299 阅读 · 0 评论 -
使用Ref实现导航滚动定位
摘要 在开发项目中时常有点击跳转滚动到锚点的需求,最简单的锚点定位就是给一个a标签,a标签的href = ‘#锚点’,然后给需要跳转的锚点一个id = ‘锚点’。参考最简单的锚点跳转实现方式,在React中使用useRef来实现跳转锚点的功能。功能具体步骤1、创建空的Ref 1 2 3 4 5 6 7 8 9 10 importReact, { useRef } from're...原创 2020-05-23 11:41:25 · 812 阅读 · 0 评论 -
使用 vue实现商品 列表的添加删除
1 <div id="app"> 2 <div class="container"><form class="form-inline"> 3 <div class="form-group"><label for="exampleInputName2">ID:</label> <input id="exampleInputName2" class="form-control" type="text" /></di..原创 2020-05-14 09:14:23 · 1114 阅读 · 0 评论 -
关于Vue还有很多你不知道的高级特性
ue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平。一、watch进阶从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用:watch:{ a(){ //doSomething }}实际上,Vue对watch提供了很多进阶用法。handler函数以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数:watch:{ a:{ handler:'doSomething' }},method原创 2020-05-13 09:21:12 · 408 阅读 · 0 评论 -
自定义样式的一个小技巧 萌新不看就是亏啦
众所周知 这是一个截了一半啊 就是一个 menu里面有三个item 用的vant我们可以给item一个名字 比如 x1我们再去sass里面去深度选中他的样式为什么这样选的中呢? 因为组件是很多很多层的 我们在最外层给他一个名字 所以就能直接选中...原创 2020-05-12 09:08:20 · 99 阅读 · 0 评论 -
简单说一下关于vue脚手架遇到的bug
webpack 和 webpack-cli 安装和使用中出现的问题因为国内防火墙的原因,建议首先安装 cnpm: 使用npm install cnpm -g或者npm install -g cnpm --registry=https://registry.npm.taobao.org 【注】G:\MyWeb\...处为自定义的文件夹地址安装 webpack 和 webpack-cli: 可以用cnpm install webpack -D和cnpm install...原创 2020-05-11 09:22:22 · 199 阅读 · 0 评论 -
震惊!这样安装的Vue 老板直夸内行!!!
一、安装 npm 1、 https://www.cnblogs.com/lgx5/p/10732016.html二、安装nginx 1、 https://blog.csdn.net/zuoyigehaizei/article/details/93061002 2、配置Nginx多站点 打开配置文件复制一个 server{ } ,并修改里面的端口和站点路径。 三、安装VSCode 1、https://...原创 2020-05-11 09:19:45 · 158 阅读 · 0 评论 -
关于 路书---写个动态路线
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> ...原创 2020-05-08 09:54:41 · 418 阅读 · 0 评论 -
关于Vue 钩子函数 的讲解
看官网也可以。。。。Vue.component('Test', { props: { name: String }, template: `<div class="test">{{ name }}</div>`, beforeCreate() { console.log('Test beforeCreate'); }, crea...原创 2020-05-08 09:53:34 · 68 阅读 · 0 评论 -
结束axios的请求
import axios from 'axios'let axiosSource = axios.CancelToken.source()// 发送请求axios.get(url, { cancelToken: axiosSource.token })axios.post(url, params, { cancelToken: axiosSource.token })// 取消所有...原创 2020-05-08 09:47:03 · 294 阅读 · 0 评论 -
Vue 动态表格 和 插入自定义表头
直接上代码<el-table :data="templateData" style="width: 100%;" stripe ref="templateTable" :empty-text="$t('basic.noData')" @filter-change="filterTable" @sort-ch...原创 2020-05-08 09:44:40 · 468 阅读 · 0 评论 -
震惊!vue项目居然长这个样子!!!
1. vue create vue04创建一个vue04;如果没有网络怎么办?在有网络的情况下,先打包vue04,如果没有网络又想创建新的项目,就解压缩,就可以运行了2. vue043. 创建后,进入vue04,再运行npm run serve4.了解npm run serve的执行顺序...原创 2020-04-29 09:25:21 · 278 阅读 · 1 评论 -
如果你是新手 却不知道这几个框架 你就out了!!!
近年来,Web技术的发展速度快得让人窒息,特别是最近几年一代又一代的变革一次又一次的创造。各大巨头又纷纷把技术转向HTML5和CSS3,各种企业级框架如雨后春笋般涌现。那么今天就给大家介绍几个在web界比较优秀的前端框架。1、BootstrapTwitter出品的Bootstrap在业界是非常受欢迎的,以致于有很多前端框架都在其基础上开发,如我们熟悉的WeX5就是在Bootstrap源...原创 2020-04-29 09:22:31 · 137 阅读 · 0 评论 -
Vue.js---SPA与router不得不说的关系
1. 创建vue06,安装router和vuex2.3.router:在MVVM的模型之上,外加一个router, 实现不同组件的切换,每个组件都是单独一个MVVM模型4. 以上这一套是SPA 单页面应用程序5. 敲代码熟悉Vue6....原创 2020-04-29 09:21:43 · 241 阅读 · 0 评论 -
vue多页面与单页面开发的优劣性
进入一家新的公司,要开发移动端app项目,前端技术选型时前端组长选的是vue的多页面开发,当时很蒙,vue不是单页面开发吗?咋出来多页面的。接触之后才发现确实存在也挺简单的,省去了路由表的配置。那就给大家整体思路分析一波吧。不足之处还请包涵!单页面开发我就不多说了,主要讲多页面的开发模式与最终效果,网上一搜单页面会有好多文章博客,但是搜多页面的就很少了,比如下面这个就是列了一下两种开发模式的优...原创 2020-04-29 09:21:01 · 919 阅读 · 0 评论