摘要: UI库PC端element­ui 饿了么(推荐) 1、官网https://element.eleme.cn/#/zh-CN 2、安装npm i element-ui -S 3、在main.js中引入import ElementUi from "element-ui"import "element-u 阅读全文
posted @ 2020-11-25 20:52 石海莹 阅读(377) 评论(0) 推荐(0) 编辑
摘要: 官网:https://vuex.vuejs.org/zh/ 什么是vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化。 理念:单向数据流 v-model:双向数据绑定 如果遇到了表 阅读全文
posted @ 2020-11-25 20:49 石海莹 阅读(149) 评论(0) 推荐(0) 编辑
摘要: 1、配置代理 config/index.js中 proxyTable: { "/api":{ target:"http://localhost:3000", changeOrigin:true, pathRewrite:{ "^/api":"http://localhost:3000" } } } 阅读全文
posted @ 2020-11-25 20:47 石海莹 阅读(179) 评论(0) 推荐(1) 编辑
摘要: 1、守卫 //全局守卫 router.beforeEach(to,from,next) router.afterEach(to,from) ​//路由独享守卫 :守卫路由 beforeEnter(to,from,next){} ​//组件内部守卫 :beforeRouteEnter(to,from, 阅读全文
posted @ 2020-11-25 20:44 石海莹 阅读(305) 评论(0) 推荐(0) 编辑
摘要: 多个url对应多个HTML文件 多个url对应一个HTML文件,切换的是组件 1、安装 Install vue-router? (Y/n) Y 2、路由出口 <router-view></router-view> 3、路由导航组件 <router-link to="/login">去登录页</rou 阅读全文
posted @ 2020-11-25 20:41 石海莹 阅读(93) 评论(0) 推荐(0) 编辑
摘要: cnpm安装 1、检查电脑中是否有cnpmcnpm -v2、如果没有cnpm的话就安装npm install -g cnpm --registry=https://registry.npm.taobao.org3、检查是否有cnpm了cnpm -v4、配置环境变量找到nodejs\node_glob 阅读全文
posted @ 2020-11-25 20:39 石海莹 阅读(168) 评论(0) 推荐(0) 编辑
摘要: 组件 1、概念:组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。 2、定义方式 // 全局定义 所有vue实例都可以调用该组件 Vue.compon 阅读全文
posted @ 2020-11-25 20:36 石海莹 阅读(246) 评论(0) 推荐(0) 编辑
摘要: watch watch:{ //浅监听 name(newV,oldV){ console.log(newV,oldV) } //深度监听 obj:{ handler(){ console.log('我变化了') }, deep:true }} 不建议使用深度监听,容易造成页面卡顿 JSONP和aja 阅读全文
posted @ 2020-11-25 20:34 石海莹 阅读(272) 评论(0) 推荐(0) 编辑
摘要: key 概述:vue采用的是“就地更新”原则,所以我们在v-for的时候要给每一条数据绑定一个key,作为唯一标识符,让vue根据key的条件做对比,一般情况下,我们使用id 双for <p v-for="(item,index) in arr"> <span>名称:{{item.name}}</s 阅读全文
posted @ 2020-11-25 20:29 石海莹 阅读(202) 评论(0) 推荐(0) 编辑
摘要: 1、作者:尤雨溪 2、官网:https://cn.vuejs.org 3、渐进式JavaScript 框架 渐进式:主张最少 jquery:主要用来处理动画 bootstrap:ui框架(响应式、组件) 数据请求:ajax、axios 4、优点: 易用、灵活、高效、模块化友好、SPA(单页面应用) 阅读全文
posted @ 2020-11-25 20:25 石海莹 阅读(157) 评论(0) 推荐(0) 编辑
摘要: 1、严格模式 严格模式 简介:除了正常模式,ES5添加了一种运行模式,严格模式 定义严格模式 使用字符串 ‘ust strict’ 声明 : use strict 注意 1)定义变量必须使用变量声明符 NormalText Code 12345678910 使用严格模式定义变量 必须使用变量的声明符 阅读全文
posted @ 2020-10-20 19:06 石海莹 阅读(210) 评论(0) 推荐(0) 编辑
摘要: 1.jQuery的插件 (1) 第三方插件:别人写的插件 (2) 手动开发类级别插件 ① 类级别插件:使用$调用的方法就是类级别插件 $.xxx() (类似于$.ajax() $.each()) ② 封装类级别插件的方法 1) $.extend({要封装的类级别插件:function(){}}) ③ 阅读全文
posted @ 2020-10-20 18:58 石海莹 阅读(151) 评论(0) 推荐(0) 编辑
摘要: 1.jQuery动画 (1) jQuery的动画 ① jQuery预制动画:就是jQuery给我们提供的,固定功能动画 1) 显示隐藏动画 1.hide:隐藏动画 a) 用法:jQuery元素.hide(动画时间,速度曲线,回调函数) b) 参数解析 1.动画时间:是一个数字 单位为ms 1000 阅读全文
posted @ 2020-10-20 17:34 石海莹 阅读(220) 评论(0) 推荐(0) 编辑
摘要: 1.each和extend (1) $.each() ① jQuery的循环方法 ② 用法:$(要循环的数组/对象,function(idx,item){}) ③ 注意:传入的函数中 第一个形参表示数组项索引 第二个形参表示每一个数组项 ④ 如果循环的是对象 第一个参数表示属性名 第二个参数表示属性 阅读全文
posted @ 2020-10-14 10:20 石海莹 阅读(294) 评论(0) 推荐(0) 编辑
摘要: 1.jQuery的初步认识 (1) jQuery的定义 jQuery是一个优秀的js库,jQuery凭借简洁的语法和跨平台的兼容性,极大的简化了javascript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。 (2) jQuery的优势 ① 1、轻量级 ② 2、强大 阅读全文
posted @ 2020-10-14 10:01 石海莹 阅读(209) 评论(0) 推荐(0) 编辑
摘要: 1.移动端原生事件 (1) 移动端原生三大事件 ① touchstart:触摸开始事件 当手指按在屏幕上触发该事件 ② touchmove:触摸移动事件 当手指按在屏幕上 并移动 触发该事件 ③ touchend:触摸结束事件 当手指离开屏幕触发该事件 ④ 注意:在切换到浏览器的移动端模拟器中的时候 阅读全文
posted @ 2020-10-14 09:46 石海莹 阅读(307) 评论(0) 推荐(0) 编辑
摘要: 1.面向对象初识 (1) 定义:js中有两种编程思想 ① 面向过程:按照步骤,一步一步将代码编写完,整个编程是一个过程。 ② 面向对象:遇到问题 使用对象来解决,如果没有对象,就创建(封装)对象 来解决问题 (2) 面向对象的三大基本特征 ① 封装:将一些特征和功能 封装为一个对象, 目的是为了提高 阅读全文
posted @ 2020-09-24 15:56 石海莹 阅读(293) 评论(0) 推荐(0) 编辑
摘要: 封装好的公共代码: //Create in 2020/9/11 by LX //获取元素非行内样式的方法 用法:getStyle(元素,样式名) function getStyle (ele,prop){ //1.编写主要代码 //如果 元素.currentStyle == undefined 标准 阅读全文
posted @ 2020-09-24 13:47 石海莹 阅读(274) 评论(0) 推荐(0) 编辑
摘要: 代码如下; function drag(ele){//2.分析不确定的值 提成参数 拖拽的元素 ele.onmousedown = function(event){ //如果是ie低版本浏览器 就可以使用 setCapture if(ele.setCapture!=undefined){ ele.s 阅读全文
posted @ 2020-09-24 11:00 石海莹 阅读(229) 评论(0) 推荐(0) 编辑
摘要: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum 阅读全文
posted @ 2020-09-17 10:44 石海莹 阅读(1257) 评论(1) 推荐(0) 编辑
摘要: ① every :针对数组元素做些判断,如果结果都为true 则返回的结果为true 1) 用法:数组.every(function(item,idx,arr){ return 判断条件 }) 2) Item表示数组中的数组项 idx表示数组项索引 arr表示循环的数组 3) 如果循环每一个数组 返 阅读全文
posted @ 2020-09-17 10:09 石海莹 阅读(1089) 评论(0) 推荐(0) 编辑
摘要: 1.定义:内置对象 主要提供操作数组的基础方法 2.数组对象的创建 (1) Var arr = [1,2,3,4,5]; (2) Var arr = Array(1,2,3,4,5) (3) Var arr = new Array(1,2,3,4,5) 3.数组方法 (1) 添加和删除方法 ① 在数 阅读全文
posted @ 2020-09-17 10:01 石海莹 阅读(286) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-09-17 09:39 石海莹 阅读(249) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-09-17 09:38 石海莹 阅读(552) 评论(0) 推荐(0) 编辑
摘要: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum 阅读全文
posted @ 2020-09-17 09:36 石海莹 阅读(949) 评论(0) 推荐(0) 编辑
摘要: Undefined和null的本质区别 ① Js中的数据类型 分为 基础类型 复杂类型 1) 基础类型(数字,字符串,布尔,undefined,null) 存储位置为栈区 2) 复杂类型(数组,函数,对象) 存储位置为堆区 但是为了方便数据的查找 计算机会在数据存入的瞬间 生成一个数据地址 并将地址 阅读全文
posted @ 2020-09-08 11:48 石海莹 阅读(316) 评论(0) 推荐(0) 编辑
摘要: 网格布局grid 它与传统的布局方案,包括前面介绍的 Flex 布局方案相比的特性在于: 它是第一个真正意义上的布局系统,其主要表现在它是第一个基于二维方向的布局模块 它是第一个基于网格(或者叫栅格,本文叫网格)的原生布局系统 网格容器(container)上可以设置的属性有 display: gr 阅读全文
posted @ 2020-09-03 17:28 石海莹 阅读(588) 评论(0) 推荐(0) 编辑
摘要: 用CSS3的知识,3d旋转,平移搭建立方体 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- 阅读全文
posted @ 2020-08-26 15:23 石海莹 阅读(149) 评论(0) 推荐(0) 编辑
摘要: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放实例< 阅读全文
posted @ 2020-08-26 13:47 石海莹 阅读(162) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-08-14 17:32 石海莹 阅读(149) 评论(0) 推荐(0) 编辑
摘要: 重点: 伪元素制作动态列表项中:content内容区使用arr(),可以制作动态数据添加 下面代码中的案例 <!-- 自定义属性 属性名自己定 --> <a href="" class="clearfix" xh="11"> /* attr(属性名) 获取该属性名字对应的属性值 */ content 阅读全文
posted @ 2020-08-14 15:59 石海莹 阅读(249) 评论(0) 推荐(0) 编辑
摘要: 大致分为三大类:display 1.块类型:display:block div,p,hi,ul li,ol li 特点: 默认宽度100% ,高度由内容撑开 可以设置宽高,独成一行(霸道) 行高可以撑开盒子高度 内外边距四个方向均可设置 2.行内类型:display:inline span,a,em 阅读全文
posted @ 2020-08-14 08:53 石海莹 阅读(295) 评论(0) 推荐(0) 编辑
摘要: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum 阅读全文
posted @ 2020-08-14 08:49 石海莹 阅读(241) 评论(0) 推荐(0) 编辑
摘要: 描述 ==加了内边距撑开盒模型 属于外扩区域 必须内减计算 当你遇见%和px内减时,此时你可以按照以下两种方法做:== 总结: 宽度%时+内边距 》溢出 不想溢出 1. calc(n% - mpx) 2. width:auto 自动内减 ,不溢出,不外扩 案例 <!DOCTYPE html> <ht 阅读全文
posted @ 2020-08-12 21:55 石海莹 阅读(722) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-07-09 21:00 石海莹 阅读(182) 评论(0) 推荐(0) 编辑
摘要: ## 面向对象 面向过程 类 ## 对象 【键值对,属性名,属性值】 ## 创建对象 ## 1.字面量创建对象 根据特征 var obj = { name:'aa', fn:function(){} } console.log(obj.name); obj.fn(); 缺点: 不适合创建大量对象,会 阅读全文
posted @ 2020-07-09 20:57 石海莹 阅读(147) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-07-09 20:53 石海莹 阅读(260) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-07-09 20:51 石海莹 阅读(346) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-07-09 20:48 石海莹 阅读(172) 评论(0) 推荐(0) 编辑
摘要: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume 阅读全文
posted @ 2020-07-09 20:39 石海莹 阅读(181) 评论(0) 推荐(0) 编辑