一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

OwlCarousel调用方法及参数说明

调用方法： 引入jQuery和owl.carousel相关组件

1
2
3
4
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/owl.carousel.js"></script>

  HTML

1
2
3
4
5
6
<div id="owl-demo" class="owl-carousel"> 
    <a class="item"><img src="img/owl1.jpg" alt=""></a> 
    <a class="item"><img src="img/owl2.jpg" alt=""></a> 
    <a class="item"><img src="img/owl3.jpg" alt=""></a> 
    ...... 
</div>

  JS调用

1
2
3
$(function(){ 
    $('#owl-example').owlCarousel(); 
});

  参数说明： 参数 描述 默认值 items 幻灯片每页可见个数 5 itemsDesktop 设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false [1199,4] itemsDesktopSmall 同上 [979,3] itemsTablet 同上 [768,2] itemsTabletSmall 同上，默认为 false false itemsMobile 同上 [479,1] itemsCustom singleItem 是否只显示一张 false itemsScaleUp slideSpeed 幻灯片切换速度，以毫秒为单位 200 paginationSpeed 分页切换速度，以毫秒为单位 800 rewindSpeed 重回速度，以毫秒为单位 1000 autoPlay 自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次 false stopOnHover 鼠标悬停停止自动播放 false navigation 显示“上一个”、“下一个” false navigationText 设置“上一个”、“下一个”文字，默认是[“prev”,”next”] [“prev”,”next”] rewindNav 滑动到第一个 true scrollPerPage 每页滚动而不是每个项目滚动 false pagination 显示分页 true paginationNumbers 分页按钮显示数字 false responsive responsiveRefreshRate 每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式 200 […]

龙生   28 Jan 2022
View Details

Vue2.X集成typeScript

1.安装依赖
2.配置 webpack.base.conf.js
3.添加 tsconfig.json
4.让 ts 识别 .vue
5..js 文件重命名为.ts 文件
6.改造 .vue 文件
7.运行 npm run dev
8.让vue识别全局方法/变量

龙生   26 Jan 2022
View Details

JS获取顶层对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 方法一
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);
 
// 方法二
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};

 

龙生   25 Jan 2022
View Details

vue环境安装&开发工具

Node.js  服务端的 JavaScript，所有的包依赖、开发脚手架都是基于node.js的。 下载地址：https://nodejs.org/en/ Python  有些依赖包是python写的。 下载地址：https://www.python.org/downloads/release/python-2717/ Vscode  微软开源轻量级IDE，插件多，受众广泛。 下载地址：https://visualstudio.microsoft.com/zh-hans/downloads/ 安装过node.js之后，就可以cmd下查看npm的版本了，vue2要求npm的版本3.0以上。 用以下命令查看npm版本：npm -v 使用淘宝 NPM 镜像  npm install -g cnpm --registry=https://registry.npm.taobao.org #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g 安装Vue命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli

龙生   25 Jan 2022
View Details

vue项目中在单独的js文件中使用element ui

vue项目中在单独的js文件中使用element ui 例如要使用MessageBox组件 例如要使用MessageBox组件 1.引入组件 import { MessageBox } from "element-ui"; 2.使用 MessageBox.confirm("这是一个内容", "这是一个标题" ,{undefined distinguishCancelAndClose: true, confirmButtonText: ‘确认’, showClose:false, showCancelButton:false }).then(()=>{undefined // 点击确认按钮的回调 }） 一般是在响应拦截器中使用，亲测有效 ———————————————— 版权声明：本文为CSDN博主「流年＊痕迹」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_52007839/article/details/111663753

龙生   20 Jan 2022
View Details

input [type=search] 搜索框去掉默认边框和旁边的小图标

input[type="search"]{-webkit-appearance:none;} input::-webkit-search-cancel-button {display: none;} http://www.html-5.cn/WebApp/css/10243.html ———————————————— 版权声明：本文为CSDN博主「LYC_2011_ACM」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/LYC_2011_ACM/article/details/9149071

龙生   08 Jan 2022
View Details

Vue解决报错8_打包时TyeError: Class extends value undefined is not a constructor or null

一、问题描述 执行 npm run build:prod

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ERROR  TypeError: Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (C:\Users\司超龙\IdeaProjects\vue\base_education_vue\base_education_third_3.0+\grass-roots teaching system\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\司超龙\IdeaProjects\vue\base_education_vue\base_education_third_3.0+\grass-roots teaching system\node_modules\mini-css-extract-plugin\dist\index.js:12:45)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin-template@4.4.0 build:prod: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-admin-template@4.4.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\司超龙\AppData\Roaming\npm-cache\_logs\2021-03-26T13_04_34_482Z-debug.log

执行num run build:prod 报错，但是npm run dev没问题 二、解决 TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous> (C:\Users\司超龙\IdeaProjects\vue\base_education_vue\base_education_third_3.0+\grass-roots teaching system\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46) CssDependency的问题，依赖包不兼容 执行npm add webpack@4.5.0，解决   from:https://blog.csdn.net/qq_24654501/article/details/115254960

龙生   26 Dec 2021
View Details

带你了解Typescript的14个基础语法

本文分享自华为云社区《Typescript基础语法全解析》，作者：北极光之夜。 。 一.Ts是什么： 首先，强类型不允许随意的隐式类型转换，而弱类型是允许的。JavaScript就是经典的弱类型语言。而Typescript可以说是JavaScript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。 二. 基本语法： 1.声明原始数据类型： 在变量后面指定一个关键字表示其只能为什么类型。 string类型：

1
const a: string = 'auroras'

  number类型：

1
const b: number = 666 // 包括 NAN Infinity

  boolean类型：

1
const c: boolean = true

  null类型：

1
const d: null = null

  undefined类型：

1
const e: undefined = undefined

  symbol类型：

1
const h: symbol = Symbol()

  2.声明Object类型： 首先，object类型不单单可以指定对象，还可以指定数组或函数：

1
2
3
const foo1: object = {};
const foo2: object = [];
const foo3: object = function(){};

  如果只想指定为对象，如下，对象属性都要提前声明好类型：

1
2
3
4
const obj: {name: string,age: number} = {
    name: '北极光',
    age:18
}

  3.1声明数组类型： 可以指定声明Array且通过<>指定元素类型，比如指定声明元素都为数字的数组：

1
const arr: Array<number> = [1,2,3]

  第二种方式如下，也指定声明元素都为数字的数组：

1
const arr: number[] = [1,2,3]

  3.2声明元组类型： 就是要提前指定数组里每个元素的类型，严格一一对应：

1
const tuple: [number,string,boolean] = [666,'auraros',true]

  4.声明枚举类型： 通过关键字enum声明一个枚举类型，如：

1
2
3
4
5
6
7
enum Status {
    pedding = 1,
    resolve = 2,
    reject = '3'
}
//访问
console.log(Status.pedding);

  如果全不写值，默认值为从0开始递增。如果第一个元素为字符类型，就必须全部定义值。如果第一个元素指定为一个数字，后面元素不写值，那值为第一个元素值按位置大小递增的结果。 5.函数参数与返回类型： 函数声明式： 指定函数传入参数类型，指定返回值类型，调用时传入参数个数与类型都必须相同： 括号里指定每个参数类型，括号右边指定返回值的类型。

1
2
3
4
function fun (name:string,age:number):string{
  return 'sss'
}
fun('auroras',18);

  如果传入参数不确定传不传，那么可以给参数加个‘？’表明它是可选的：

1
2
3
4
function fun (name:string,age?:number):string{
  return 'sss'
}
fun('auroras');

  或者给参数添加默认值，那也会成为可选参数：

1
2
3
4
function fun (name:string,age:number=666):string{
  return 'sss'
}
fun('auroras');

  如果参数个数不确定，可以用扩展运算符加解构赋值表示，当然要传入与指定类型一致的：

1
2
3
4
function fun (name:string,age:number=666,...res:number[]):string{
  return 'sss'
}
fun('auroras',1,2,3);

  函数表达式：

1
2
3
const fun2:(name:string,age:number)=>string = function(name:string,age:number){
  return 'sss'
}

  定义接口时再详细说。 6.任意类型： 通过指定any关键字表示任意类型，跟原来 js 一样，可以任意赋不同类型的值：

1
2
3
let num:any = 1;
num = 'a';
num = true;

  7.类型断言： 类型断言就是明确的告诉typescript这个变量就是某种类型的，百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。 可以通过 as+类型 断言它就是某种类型的：

1
2
const res = 1;
const num = res as number;

  也可以通过 <类型> 形式断言（不推荐）：

1
2
const res = 1;
const num = <number>res

  8.接口基本使用： 接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。 […]

龙生   06 Dec 2021
View Details

最全的 Vue 面试题+详解答案

前言 本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 如果对原理感兴趣的同学 欢迎查看小编的手写 Vue 源码系列文章 如果对答案有不一样见解的同学欢迎评论区补充讨论 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可(进群免费领取 Vue2 源码思维导图哈) 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！ 简单 1 MVC 和 MVVM 区别 MVC MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范 Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据 View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的 Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据 MVC 的思想：一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来，换句话说就是在 Controller 里面把 Model 的数据赋值给 View。 MVVM MVVM 新增了 VM 类 ViewModel 层：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。 MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想） 整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM […]

龙生   03 Dec 2021
View Details

最全的手写JS面试题

本文整理了前端面试高频出现的手写源码相关的题目 其中有小编面试亲自遇到的也有其他同学帮忙补充的 整体采用 es6 语法并且以简单易懂版进行实现。

龙生   03 Dec 2021
View Details
1 … 8 9 10 … 60

Copyright © 2024 Longsheng All rights reserved