vue
GQ_cyan
怀揣着大神梦的菜鸟小白(2016),慢慢长大(2020) 【承接网站,小程序,H5等一系列前端相关外包】
展开
-
vue 父子组件生命周期执行顺序
父子组件在加载的时候,执行的先后顺序为父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted原创 2021-04-15 10:08:08 · 223 阅读 · 0 评论 -
【Vue基础知识再巩固】--混入,自定义指令,过滤器
1. 混入Mixin 混入类似于公共参数或者方法的初始化,使一些公共的变量或方法定义到组建中,与vuex功能类似却不相同。(混入中可以定义vue的各个变量入craeated,methods等,但是合并后,重复的以组件内为主)var mixin = { data: function () { return { message: 'hello', foo: 'abc' } }}new Vue({ mixins: [mixin], ...原创 2020-11-18 11:32:54 · 264 阅读 · 0 评论 -
【Vue基础知识再巩固】--动态组件和异步组件
动态组件 标签切换v-bind:is控制模板切换,但是模板切换前后重新加载,无法保持切换前状态,故引入keep-alive对组件实例进行缓存,以保持其状态:<keep-alive> <component v-bind:is="currentTabComponent"></component></keep-alive>异步组件 暂时用到的场景,大量组件引入时候会导致页面有一定延迟,因此引入异步组件,当组件使用实被引入注册ne...原创 2020-11-17 13:41:57 · 183 阅读 · 0 评论 -
vue 流加载下拉分页,隐藏域复制
流加载下拉分页以及移动端隐藏域复制功能(copyCode)<template> <div class="hello"> <div class="container"> <div class="mv-banner-comp" id="header-box"></div> <!-- 复制用 --> <input type="hidden" value="http://www.baidu.com原创 2020-10-14 16:15:58 · 292 阅读 · 0 评论 -
Vue自定义组件使用v-model实例
实现目标:分模块添加时候组件封装1.父组件内容<template> <div> <article> {{ tmpjson.id }}:{{ tmpjson.name }} <button @click="reWriteToChild">点击</button> <form-child v-model="tmpjson"></form-child> </ar原创 2020-09-08 16:17:04 · 508 阅读 · 1 评论 -
vue组件的依赖注入(父组件异步数据后传)
1.初始父组件provide给出:data(){ return { //后传数据 stepCanAdd: {} }},provide () { return { getChangeNew: () => this.stepCanAdd };},methods: { //获取异步数据 getStep () { apiGet.ProductPlanApi.GetStep({ getPara原创 2020-09-08 15:41:42 · 627 阅读 · 2 评论 -
【Vue基础知识再巩固】--Vue的边界情况(依赖注入等)
1,元素,组件的访问 根元素:this.$root.XXX (真实项目中多用VueX对全局的状态进行管理) 父元素:this.$parent.XXX (多层父级this.$parent.$parent.XXX寻找,无法很好扩展到更深层级的嵌套组件,引依赖注入) 子组件元素: this.$refs.XXX (渲染后才可以取到,多结合this.$nextTick()使用) 依赖注入:父元素设置可访问方法provide;子组件设...原创 2020-07-13 16:01:43 · 258 阅读 · 0 评论 -
【Vue基础知识再巩固】--插槽v-solt
1,普通插槽组件:<button type="submit"> <slot>Submit</slot></button>引用:<submit-button>Save</submit-button>渲染后:<button type="submit">Save</button>2,具名插槽<div class="container"> <header>原创 2020-07-13 14:18:31 · 306 阅读 · 0 评论 -
【Vue基础知识再巩固】--不成块容易忘记内容
1,不要在选项 property 或回调上使用箭头函数,比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this,this会作为变量一直向上级词法作用域查找,直至找到为止,会出现错误。2,动态绑定class与style1>.<div class="static" v-bind:class="{ active: isActive, 't...原创 2020-07-10 09:41:51 · 196 阅读 · 0 评论 -
【Vue基础知识再巩固】--计算属性computed与侦听器watch
以下形式对比均采用此例:<div id="demo">{{ fullName }}</div>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }原创 2020-07-09 16:58:12 · 163 阅读 · 0 评论 -
Axios--基础知识
下载使用方式:npm: $ npm install axioscdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>案例(GET以及POST请求):GET请求:// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }原创 2020-07-02 09:59:44 · 195 阅读 · 0 评论 -
最新99道前端面试题
前言:7月份的第一天,毕业马上两年了,居安思危,为后边儿做个准备吧 “即便不跳,也始终保持跳的能力”1.vue优点?答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了angular的特点,在数据操作方面更为简单;组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代...原创 2020-07-01 09:28:14 · 790 阅读 · 0 评论 -
stylus引入公共变量及方法文件
目的:写一份公共变量以及样式方法,使VUE中所有页面以及组件公用。以修改变量改变全局风格。方法环境:(vue项目中如下) 1,修改如下文件(combase.styl是我写得公共文件)var stylusOptions = { // variables.styl是我单独定义的stylus公共变量的文件,注意地址要引入正确 import: [path.join(__dirname, "../src/assets/combase.styl"), ] } 2,...原创 2020-06-29 10:14:13 · 931 阅读 · 0 评论 -
Promise 解决for循环中异步请求获取数据
描述:根据集合ID循环获取详情并push进一个详情数组resultlist。getPlanDetail (ids) { let tmpplandatas = [] console.log() ids = ['9C549ACCB9B24E4AA785A8CB3D97F2D9', '9C549ACCB9B24E4AA785A8CB3D97F2D9'] for (let i in ids) { tmpplandatas.push(new Pro原创 2020-05-29 13:34:45 · 2634 阅读 · 1 评论 -
vue图表点击联动展示z-tree&echarts
1.点击表格展示对应扇形统计图,效果如下:2.统计图组件Statistics .vue代码如下:<template> <div> <div :id="idname" :style="{width: '100%', height: allheight+ 'px'}"></div> </div></tem...原创 2019-12-25 08:43:28 · 779 阅读 · 0 评论 -
// 获取起始日期获取周以及对应日期段
formatDig (num) { return num > 9 ? '' + num : '0' + num }, formatDate (mill) { var y = new Date(mill) let raws = [ y.getFullYear(), this.formatDig(y....原创 2019-11-14 09:19:38 · 288 阅读 · 0 评论 -
获取某年第几周
isLeapYear (year) { return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0) }, getMonthDays (year, month) { return [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 3...原创 2019-11-14 09:18:24 · 288 阅读 · 0 评论 -
vue component组件小结
了解完vue的一些必须知道的事情,就该看看vue的组件了,本部分我们以代码进行分析。什么是组件? 就我而言,组件就是按照自己的需求自定义的元素,充分体现了打代码的重用性。官方文档如下: 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊原创 2017-04-15 12:52:09 · 6492 阅读 · 0 评论 -
vue进阶
一,过渡效果1,对过渡的理解,在vue中定义了过渡组件,vue自动检测组件中的过渡效果2,过渡方式:css-transition css-animition javascript方法 过渡的状态:v-enter v-enter-active v-leave v-leave-active css-t原创 2017-05-25 16:03:40 · 399 阅读 · 0 评论 -
vue制作分页效果
首先js效果: var pagitation=new Vue({ el:'#app', data: { // 省略的符号 sign:'...', // 省略号位置 signIndex:3, // 总页数原创 2017-09-13 12:03:06 · 5921 阅读 · 0 评论 -
学习Vue实现去哪儿网(上)-----基础知识总结
第一部分基础知识学习: (1)vue挂载渲染基础; (2)生命周期; (3)计算,方法与监听;computed中get与set; (4)vue进行样式渲染:<1>class的对象(true or false)或数组绑定;<2>style的绑定数组数据(data中定义styleobj用于样式绑定改变) (5)vue的条件渲染:v-if(不...原创 2018-08-06 17:36:07 · 1281 阅读 · 1 评论 -
学习Vue实现去哪儿网(下)-----项目进行流程总结
第四部分vue-cli进行项目开发 4.1项目准备 1>.目录了解与搭建,最好在src中新建pages来存放对应页面组件; 2>.引入reset.css重置不同端的默认样式; 文件下载链接后续补全 3>.引入border.css解决移动端1像素边框问题; 文件下载链接后续补全 ...原创 2018-08-08 18:07:48 · 1057 阅读 · 2 评论 -
Vue学习巩固(上)
利用去哪儿网项目的搭建学习,最大的收获就是在项目中实现了自己之前的所学所想,同时也将很多知识运用到了最近一个项目上,让自己所学所看真正有了落地。当然学无止境,刚好趁热打铁,利用饿了么搭建课程对Vue进一步巩固。方便后续对reactjs等相关框架的进一步学习,话不多说,加油喽! 1,Get到的新知识 <1>.http://cssreset....原创 2018-08-15 23:53:03 · 202 阅读 · 0 评论 -
vuex流程简单示例
在vue-cli中使用vuex(个人理解实现数据的公用):1.安装vuex,在vue-cli目录下的src文件下建立vuex目录=》vuex文件夹下建立store.js文件,文件如下: import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const state={ count:1}const muta...原创 2018-10-14 23:49:54 · 1746 阅读 · 0 评论 -
vue-router学习汇总
*红色标注为功能主要点1·路由嵌套{ path:"/", name:'hello', component:hello, children:[{ {path:'/one',component:one}, {path:'/two',component:two} }]}2·vue推荐传参方式(两种)name传参数[实际开发中不常用]app.vu...原创 2018-10-15 15:07:35 · 321 阅读 · 0 评论 -
vue中实现二维码生成
安装 : npm install --save qrcodejs2js部分:<script> import QRCode from 'qrcodejs2' export default { methods: { qrcode () { let qrcode = new QRC...原创 2018-10-23 15:38:54 · 1184 阅读 · 1 评论 -
Vuex ----超简单详细使用手册
之前在项目用到过Vuex,但用的时候都是前辈写好的结构,知其然而不知所以然,看了几篇博客以及官网的内容打算小小的整理一下,首先来抛玉引砖,推荐几个我觉得通俗易懂的博客:未将状态使用Modules进行表达的:https://blog.csdn.net/u011068996/article/details/80216154 使用Modules进行表达的:https://segmentfa...原创 2018-11-24 21:50:55 · 3177 阅读 · 6 评论 -
veux--页面刷新更新后数据状态无法保存问题
以登陆退出为例,我这里使用的是sessionStorage去处理 (具体用localStorage(手动清除,数据消失)还是sessionStorage(会话窗口关闭,数据消失),可根据具体需求而定,处理方法流程同) 1.在改变state时候改变sessionStorage里面的值,使其值与state中更新后的值一致//loginState传入true与false判定执行登...原创 2018-11-25 15:47:02 · 983 阅读 · 0 评论 -
记第一次用node-express+mysql+vue的小项目
1,建立项目文件夹nodevue,文件内建立server文件夹2,进入server此次执行以下命令搭建expressnpm install express --savenpm install body-parser --savenpm install cookie-parser --savenpm install multer --savenpm list express...原创 2018-11-30 09:51:43 · 677 阅读 · 0 评论 -
常用---vue-cli中使用页面切换库vue-awesome-swiper以及动画库animate.css
vue-awesome-swiper以及animate.css使用 安装下载:npm install --save vue-awesome-swiper animate.css 文件入口main.js中引入:import vueAwesomeSwiper from 'vue-awesome-swiper'import animate from 'animate...原创 2018-12-05 10:29:23 · 2814 阅读 · 0 评论 -
区间日历(带时分控制)
效果:前后有控制,时分联动控制伪代码(利用了element组件):<template> <el-container> <el-header style="height:62px;">{{overtimetitle}}</el-header> <el-container> <el-main...原创 2019-07-30 11:30:25 · 250 阅读 · 0 评论 -
Vue学习
前言:对于没有接触过这个框架的人,面对一个框架可能不知道从何入手,看官方文档和前辈们的博客以及git 上的项目或许是最好的选择,当然我也是这样学习的,作为一个没有 接触过正式工作的我而言,一度对这个红极一时的框架产生敬畏,但是尝试了才知道,这个框架很好用也不难学。安装:对于Vue的安装,以npm下载安装:npm install vue,这是一种比较简单的方法;对于我们这种小白在做联系时这需要引原创 2017-04-15 10:31:03 · 581 阅读 · 0 评论