前端基础
关注
分享
扫一扫
lvzekun-IT
2018年初入职的菜鸟，博客园丢失了，来到了CSDN
展开
-
async 和 await 结合使用
关于文件上传组件：在这里使用 input 封装一个图片上传组件。原因：使用element ui 组件中的文件上传，需要使用其本身自带action ：“接口地址”，来继续宁上传文件，这里只需要拿到上传文件，后处理图片数据base64格式。如果使用element ui 属性：httprequest 或者其他事件命令，在打印 console.log(fileList) 时候回循环多次打印，无比麻烦。所以采用原始 input 进行封装。注意事项：1.async 和 await 使用，2.图片转base64位.原创 2021-03-22 11:22:27 · 442 阅读 · 0 评论 -
Vue ｒｏｕｔｅｒ 路由导航---根据用户角色进入项目不同的Router路径
1.知识点：vue router 生命周期：router.beforeEach， vue 项目初始目录main.js ，ES6 : promise 开发思想：在main.js 中，在vue 项目实例化之前，通过接口获取用户信息2.vue 项目结合ｉｏｓ原生开发移动端项目，项目的登陆入口在ｉｏｓ 中；而ＰＣＷｅｂ项目登录页面在本项目中，可以登录后直接获取用户信息。所以移动端混合模式使用ｖｕｅ 开发，可以在ｍｉａｎ．ｊｓ中获取// lzk获取用户信息import { autoLogin } f...原创 2021-02-20 16:06:24 · 1235 阅读 · 0 评论 -
Promise 和 vue 中的Axios
new Promise((resolve,reject)=>{ tPlanSpecialSelect({ reportId :this.reportId }).then(response => { if (response.data.code != 200) { return reje...原创 2019-12-19 16:17:48 · 502 阅读 · 0 评论 -
前端基础知识面试
1.盒模型：html元素，分为块级元素 block和行内元素 inline。块级元素默认会另起一行，其中包含块级元素和行内元素。而行内元素并不会另外起一行，只占据该标签元素所在的边框所包含的空间。2.盒模型:是指在html元素可以描述为一个矩形盒子，该矩形盒子占据的空间可以通过一个模型来描述，这个模型可以称为盒模型。包括外边框 margin ,边框 border ,内边框:p...原创 2019-11-20 15:25:10 · 166 阅读 · 0 评论 -
vue-axios
1.建立axios实例//lzk 2019-8-29import service from 'axios'import {baseUrlTrial} from "../index";import setRequestHeader from "../setRequestHeader";import {interceptors} from "../interceptor";// 创建...原创 2019-11-19 13:56:21 · 365 阅读 · 0 评论 -
Vue框架学习三
今天主要是了解Vue框架的细节，父子组件的传值过程，以及传值过程中的参数校验。看完视频后。理解了代码的结构，能够自主的完成代码的敲打，感觉熟练了一点。同时在过程中的小bug,及时改正。下面说一下三点内容。4-1,模板组件细节知识点 （1）H5中table -tbody tr ，使用is属性：is=row， （2）根组件中data中可以是对象，子组件data中必须是个函数，返回该对象...原创 2018-08-20 15:14:30 · 380 阅读 · 0 评论 -
Vue框架基础二
5.样式绑定:：5.1calss的样式绑定： :class="{activeted:isActiveted}"表示样式calss为activeted,取决于变量isActiveted. this.isActiveted=!this.isActiveted;不等于之前的false，再次点击复原 <style> .activeted{ color:red;...原创 2018-08-17 14:49:27 · 192 阅读 · 0 评论 -
Vue.js学习开发五-----Vue动画
5-1.Vue 中Css动画原理: 过渡动画效果<transition></transition>未开始时候添加两个CSS类。给起的名字name="fade".fade-enter 动画第二帧就移除.fade-enter-active，动画结束时移除代码如下：代码为执行时的一瞬间。<style> .v-enter,.v-leave-to{ ...原创 2018-08-22 15:40:44 · 171 阅读 · 0 评论 -
Vue框架学习二：实例，属性
模板语法：1.差值表达式 <div id="root">{{name}}</div> <Script> var vm = new Vue({ el:"#root", data:{ name:"Dell", } }) </Script>2. v-text，和v-html &am原创 2018-08-16 17:59:51 · 139 阅读 · 0 评论 -
Vue.js框架基础学习五
5-5Vue中多个元素或则组件的过渡 多个Dom时候，动画切换避免复用之前的DOM,这里要加入key值 mode=“in-out”,先进入后隐藏，out-in先隐藏后进入<head> <meta charset="UTF-8"> <title>Vue中多个元素的过渡</title> <script type="...原创 2018-08-23 13:48:47 · 126 阅读 · 0 评论 -
Vue.js框架学习五
4-4绑定原生的事件。不同于this.$emit('change')监听子组件中自定义事件，在返回到父组件原生事件函数中如上4-2。<div id="root"><counter @click.native="handleClick"><counter></div><script>Vue.component(&q原创 2018-08-21 14:58:16 · 364 阅读 · 0 评论 -
vue-cli3.x安装:采用git---CMD来安装运行
[Vue] vue-cli3.x安装1. node.js安装https://nodejs.org/en/download/2.npm的安装 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:npm -v5.6.03. 安装vue-cli3.0 命令 ：npm in...转载 2018-08-24 16:01:09 · 1110 阅读 · 0 评论 -
Vue项目三： 首页，城市 json的实现
一周多没写博客了，没觉得时间多久，其实已经十天了，人都是有惰性的。今天总结一下这一周的开发内容。其实主要分为两个前端页面：首页旅游景点，和城市的本地json数据显示。效果图： 实现下拉下面还有。一部分代码： City.vue<template> <div> <city-header></city-header>...原创 2018-09-07 16:26:46 · 2319 阅读 · 0 评论 -
H5笔记一常用表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form act原创 2018-09-25 16:35:49 · 177 阅读 · 0 评论 -
H5笔记二
1.表单应用示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href原创 2018-09-26 17:13:55 · 148 阅读 · 0 评论 -
vue 输入框验证
1.邮箱验证： validator: (rule, value, callback) => { if (value === '') { callback(new Error('请正确填写邮箱')); ...原创 2019-09-02 20:26:35 · 1548 阅读 · 0 评论 -
前端框架Vue学习一：
首先实现简单的：hello Vue<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no&q原创 2018-08-16 09:34:45 · 191 阅读 · 0 评论 -
webAPP开发三：实现数据的交互显示
开发中遇到的错误: 代码逻辑错误，将初始化函数放在了 初始化对象之前，造成了 “.html()”无法识别，表示未定义、http://read.t.imooc.io/ 参考 代码下载地址。开发截图：代码结构：<!DOCTYPE html><html ng-app ="app"> <head> <meta charset="...原创 2018-08-13 15:26:35 · 8177 阅读 · 0 评论 -
css中的定位position
在块状元素中<div class="bro"><div>,我们给标签添加修饰.bro{ width:360px; height:360px; /*利用一张图片解释*/ background:url(".../img/mooc3.png") top no-repeat; position:absolute; ...转载 2018-07-24 11:04:19 · 166 阅读 · 0 评论 -
border的几个用法。
1.三等分2.传统的十字添加3.定义块状元素的高度，边界4.三角形<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; p原创 2018-07-24 17:52:12 · 3619 阅读 · 0 评论 -
前端学习一
1。<select multiple="multiple">下拉框进行多选，添加multiple属性。2.<input type=" submit" value="提交" name="submitbtn">表单设置:提交按钮。3.文本域设置多行多列 <textarea cols="50" rows="10" &原创 2018-07-20 13:58:17 · 109 阅读 · 0 评论 -
前端学习 星星评分的设计。
第一个比较简单，用到了简单的css和js,利用图片的位置上下移动，来实现星星评分。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>星际评分一</title> <style> body,ul,原创 2018-07-26 16:12:55 · 1431 阅读 · 0 评论 -
星星评分 修改二
补充全局变量问题，多评分解决，代码复用<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>星际评分一</title> <style> body,ul,li{ padding: 0;原创 2018-07-26 16:21:51 · 249 阅读 · 0 评论 -
Ajax实现输入框动态提示
https://www.cnblogs.com/gdp176119/p/9415511.html发表在我的博客园了，这里引用一下。原创 2018-08-03 18:01:56 · 854 阅读 · 0 评论 -
前端学习三-box定位。
两个盒子之间定位<div id="box1">111 <div id="box2">112</div></div>./*下面是任务部分*/#box1{ width:200px; height:200px; position:relative;//参照定位元素必须加入position:relative. ...原创 2018-07-27 17:47:29 · 562 阅读 · 0 评论 -
前端学习四----星星星评分半颗星。修改t
进行设计半颗星星评分，出现一个错误："Uncaught ReferenceError: e is not defined" /123/rating/index3.html (142) if(e.pageX - $this.offset().left < $this.width()/2){//半颗，原因是没有定义变量e.,修改后完成，鼠标刷过星...原创 2018-07-27 17:18:47 · 1405 阅读 · 0 评论 -
图形插件ecahrtsa学习一
今天简单学习了解图像插件，编写一个简单的折线图。series:[{ name:'访问量', type:'bar', data:[500,200,360,100] }]中的type:'line'表示折线图, 'bar'柱状图，‘pie’是饼图。 图：代码：&l...转载 2018-07-31 09:00:53 · 170 阅读 · 0 评论 -
echarts，7月31日日报
7-31 工作计划：实现折线图，柱状图，饼图等基本图形。折线图柱状图并存，提示框，图例，工具箱，最值平均值的使用。完成情况：已完成.8-1工作计划： 学习并实现K线图的分布，本地数据的展示，如证券的折线图。 7-31效果展示：折线图和柱状图<!DOCTYPE html><html> <head> <...原创 2018-07-31 18:13:10 · 223 阅读 · 0 评论 -
webapp2：前端界面的实现。
<!DOCTYPE html><html ng-app ="app"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,mi原创 2018-08-09 18:14:31 · 5633 阅读 · 0 评论 -
学习K线图，
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>测试K线图</title> <!--引入echart.min.js插件--> <script type="text/javascri原创 2018-08-01 16:10:23 · 440 阅读 · 0 评论 -
前端学习--promise
'use Strict';导入。新建函数，利用if,else分别书写resolve和reject两个方法。采用 return返回函数的方法暴露内容。//两桶读取数据，转为json数据 function ReaderModel(){ var Chapter_id; var ChapterTotal; var init = functi...原创 2018-08-14 16:23:46 · 184 阅读 · 0 评论 -
webAPP设置
<!DOCTYPE html><html ng-app ="app"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-原创 2018-08-07 17:57:23 · 1730 阅读 · 0 评论 -
webAPP学习设计：页面模式的设计。
学习webAPP视频，逐步实现阅读界面。内容总结：首先实现下边栏模块。先设置好dom模块的架构，在设置css样式。知识点1：设置背景色可以利用两层div,一层是背景色，一层是内容框，覆盖并存。<div class="bottom-nav-bk bottom_nav"></div> <!--下边栏内容div--><...原创 2018-08-08 17:30:47 · 4957 阅读 · 0 评论 -
前端学习之，昨日模仿的，js二级菜单无延迟仿京东
学习慕课网https://www.imooc.com/learn/829学习js实现京东无延迟菜单效果。 首先是主页目录设置。 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <scr翻译 2018-07-24 09:32:15 · 838 阅读 · 0 评论