自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(83)
  • 收藏
  • 关注

原创 ES6模块化的基本语法

文章目录1.默认导出和默认导入2.按需导出和按需导入直接导入并执行模块代码1.默认导出和默认导入默认导出:export default默认导出成员m1.js:let a = 10;let c = 20;let d = 30;function show(){ console.log("111111");}export default { a,c,show}默认导入:import 接收名称 from “模块标识符”index.js:import m1 from '

2020-12-04 09:20:46 3

原创 Node.js中通过babel体验ES6模块化

文章目录1.创建项目文件夹打开cmd窗口2.初始化项目3.安装依赖模块4.在项目的跟目录中创建文件并进行配置5.在根目录中创建`index.js`6.执行代码1.创建项目文件夹桌面——新建文件夹——取名为babel-study打开cmd窗口双击打开文件夹,将路径改为cmd2.初始化项目npm init -y得到3.安装依赖模块npm i -D @babel/core @babel/cli @babel/preset-env @babel/node这里需要等待,待安装完成文件夹

2020-12-02 14:23:22 9

原创 API前后端交互模式

文章目录URL地址格式1. 传统形式的URL2. Restful形式的URLPromise1. Promise概述2. Promise基本用法3. Promise常用的APIfetch1. 请求参数(1)methods(String):Http请求方法,默认为GET(2)body(String):HTTP的请求参数(3)header(Object):HTTP的请求头,默认为{}2. 参数传递(1)get请求方式的参数传递(1)delete请求方式的参数传递(1)post请求方式的参数传递(2)put请求方式

2020-12-01 20:39:45 53

原创 Vue路由的基本概念与原理,Vue-router的使用

文章目录1. 路由的基本概念与原理路由的本质(1)后端路由(2)SPA(3)前端路由2. 路由的使用(1)Vue-router的基本使用(2)路由重定向(默认路径)(3)Vue-router的嵌套路由`children`(4)Vue-router的动态路由匹配(5)路由组件传递参数props①props的值为布尔类型②props的值为对象类型③props的值为函数类型(6)Vue-router的命名路由(7)Vue-router的编程式导航1. 路由的基本概念与原理路由的本质 路由的本质就是对应关系

2020-11-28 16:28:54 12

原创 Vue渲染函数

节点、树以及虚拟 DOM1. 浏览器的工作原理<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>上述 HTML 对应的 DOM 节点树如下图所示:每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。2

2020-11-26 16:47:48 30

原创 Vue自定义指令

自定义指令简介1.自动聚焦输入框自定义指令&&全局————不带参数<div id="app"> <input type="text" v-focus></div><script> Vue.directive('focus', { inserted: function(el){ el.focus() } }); var vm = new Vu

2020-11-26 14:29:44 18

原创 Vue混入

混入基础一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项<script> var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } var Component =

2020-11-26 13:40:02 9

原创 Vue边界处理情况

一.访问根实例$rootVue 子组件可以通过 $root 属性访问父组件实例的属性和方法写入根组件的数据<div id="app"> {{msg}} <root-obj></root-obj> </div> <script> Vue.component("root-obj",{ data () { return { } }, templ

2020-11-26 11:55:56 18

原创 Vue组件简易模拟购物车练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></scr.

2020-11-20 20:33:19 14

原创 Vue组件化开发

组件注册1 全局组件注册语法Vue.component("button-counter", { data: function(){ return{ count: 0 } }, template: "<button @click='handle'>点击了{{count}}次</button>", methods:{ handle:function(){ this.count+=2; } }});var

2020-11-18 16:33:17 22

原创 Vue数组响应式变化

1.变异方法(修改原有数据,会影响原有数组数据)都会被Vue处理成响应式的方式,只要调用这些方法,都会影响到页面中模板内容的变化this.list.push(this.fname)push()数组末尾添加一个或多个元素pop()删除数组的最后一个元素shit()删除数组的第一个元素unshit()向数组开头添加一个或多个元素splice()删除数组中指定元素sort()对数组中的元素进行排序reverse()反转数组,颠倒顺序2.替换数组(生成新的数组,不会对原数组产生影响)调用完

2020-11-18 10:08:35 15

原创 Vue生命周期

1. 主要阶段挂载(初始化相关属性)(1)baforeCreate在实例初始化之后,数据观测和事件配置之前被调用(2)created在实例创建完成后立即被调用(3)beforeMount在挂载之前被调用*(4)mountedel被新创建的wm.$el替换,并挂载到实例上去之后调用该钩子更新(元素或组件的变更操作)(1)beforeUpdate数据更新时调用,发生在虚拟Dom打补丁之前(2)updated由于数据更改导致的虚拟Dom重新渲染和打补丁,在这之后会调用该钩子销毁(销毁

2020-11-18 08:21:31 5

原创 Vue过滤器的使用(格式化日期)

过滤器的作用格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等自定义过滤器Vue.filter("lower",function(val){ return val.charAt(0).toLowerCase() + val.slice(1)})过滤器的使用级联操作<div>{{msg | upper}}</div><div>{{msg | upper | lower}}</div>属性绑定<div :abc

2020-11-17 16:26:08 19

原创 Vue侦听器的用法即应用场景

侦听器的应用场景数据变化时执行异步或开销较大的数据侦听器的用法<body> <div id="app"> <div> <span>名:</span> <span> <input type="text" v-model="firstName"> </span> </div> <d

2020-11-17 15:19:47 18

原创 Vue 计算属性 computed

一:Vue计算属性1.为何需要计算属性?表达式 的计算逻辑可能比较复杂,使用计算属性可以使模板内容更加简洁2.计算属性的用法computed: { reverseString: function(){ //基于data中的数据来做处理 return this.msg.split('').reverse().join(''); }}直接调用<div>{{reverseString}}</div>计算属性与方法的区别计算属性是基于他们的依赖进行

2020-11-17 14:27:11 6

转载 新版vs code + Vue高亮、语法自动补全插件

vs code 版本或及以上1.安装以下三个插件插件VeturESLintPrettier2.左下角设置3.进行配置旧版配置:{ "editor.fontSize": 20, "window.zoomLevel": 1, "workbench.iconTheme": "ayu", "files.autoSaveDelay": 500, "files.autoGuessEncoding": true, "files.autoSave": "a

2020-11-17 09:53:40 114

原创 基于Vue的表单操作

基于Vue的表单操作input单行文本textarea多行文本select下拉多选radio单选框checkbox多选框示例效果如下:input单行文本与 textarea多行文本类似,使用v-model数据绑定select下拉(1)单个下拉选项在每个option中添加<option value="0"></option>,不同的value值,select 中添加<select v-model="occupation" >,data中

2020-11-16 15:38:35 12

原创 Vue的Tab选项卡(点击切换图片)

效果:点击相对应的图片编号显示该图片,随机切换css:1.list-style: none;//去除列表默认小点2.display: none;//图片初始都为隐藏3.添加选中的名字的样式active4.添加当前选中图片显示display: block;js:1.利用遍历数组的对象添加相应名称和图片<li :key="item.id" v-for="(item,index) in list">{{item.title}}</li><div :key="i

2020-11-16 14:09:08 26

原创 Vue模板语法概述(指令,事件、属性、样式绑定,分支、循环结构)

Vue模板语法如何理解前端渲染把数据填充到html中(模板+数据=前端渲染(静态html内容))前端渲染方式原生js拼接字符串使用前端模板引擎使用Vue特有的模板语法模板语法概述插值表达式指令事件绑定属性绑定样式绑定分支循环结构v-cloak指令语法插值表达式存在的问题:闪动如何解决该问题:使用v-cloak指令解决该问题的原理,先通过样式隐藏内容,然后在内存中进行值的替换,替换好了之后再显示最终的结果提供样式,再在插值表达式所在的标签中添加v-cloak

2020-11-14 16:53:30 22

原创 Vue概述及入门

Vue渐进式Javascript框架声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建Vue的基本使用步骤需要提供标签用于填充数据引入vue.js库文件可以使用Vue的语法做功能把Vue提供的数据填充到标签<body> <div id="app"> <div>{{msg}}</div> </div> <script> var

2020-11-13 10:11:38 15

原创 移动端旋转浏览器自动刷新

//全局定义窗口的宽度var x = window.innerWidth;window.onload = function () { //窗体加载时,获取浏览器的窗口宽度 x = window.innerWidth;}//定义一个函数监测当浏览器页面宽度改变时,自动刷新function resizeFresh() { if (x != window.innerWidth) { location.reload(); //alert(x);

2020-11-12 11:27:52 18

原创 CSS的background效果集合

为什么背景不能继承假设背景能继承,而且向背景中应用了一个背景图像,那么,这个图像将应用于文档所有元素的背景,而且每个元素都完成了自己的平铺,这并不是我们想要的效果。注意:模式在每个元素的左上角都重新开始,也包括链接。这并不是大多数创作人所要的,正因如此,背景属性不能继承如果出于某种原因确实想要这样的效果效果:*{background-image: url(图片.png)}关于背景的良好实践:避免由于某些原因图片无法加载,而出现全白的背景影响浏览效果,因此在使用背景图像的同时再指定一个背景颜色,这样

2020-11-04 14:28:31 42

原创 CSS的display的多种布局方式总结(inline-block,table,flex)

1.display:inline-block布局常见块级元素常见行内元素一:display的几个常用的属性值inline(行内元素)1.使元素变成行内元素,可以与其他行内元素共享一行,不会独占一行2.不能更改元素的height,width的值,大小由内容撑开3.可以使用padding,margin上下左右都有效block(块级元素)1.使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度2.能够改变元素的height,width的值3.可以设

2020-11-03 10:16:13 178 1

原创 移动端,ipad,pc端H5适配

媒体查询方式各分辨率字体大小或控件大小适配效果:用媒体查询方式,实现移动端,ipad,pc端横屏竖屏的的不同效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document

2020-11-02 10:22:32 379 1

原创 CSS长度单位合集

绝对长度单位pc(Picas)派卡1pc = 16pxdiv{ font-size:1pc;}pt(Points)点1pt = 1.33pxdiv{ font-size:10pt;}in(Inches)英寸1in = 96pxdiv { font-size: 1in;}q(quarter-millimeters)1/4毫米1q = 1/4mm = 0.945pxdiv { font-size: 20q;}mm(Millimeters)毫米

2020-10-30 16:35:49 70

原创 雅马哈机械手的基本操作,与上位机通讯程序编写

运行环境:机械手与电脑在同一网段上1. 安装雅马哈机械手的软件2. 添加许可证:工具–选项–许可证3. 建立新的控制器:以太网–输入机械手的ip4. 机械手连接 连接后的状态5. 伺服上电上完电状态6. 原点复归(选择机器人),对A1,A2,A3轴进行复原(需在左手系下复原)复原A1,A2,A3轴后状态7. 坐标系的选择(世界坐标系)(关节坐标系)8. 点位的示教选择合适的坐标系移动机械手后,点击左上角示教,可以将点记录下来(勾选方框,可以将无记录的点位隐藏,

2020-10-19 15:56:02 411

原创 Html5和CSS3遗漏点记录

关于安装vs code下载Chinese,即为中文版安装Live Server, open in browser,设置afterDelay自动保存更新网页左下角设置,设置自动刷新时间,编辑字体大小(或Ctrl+,-)HTML简单标签<p>块元素<em>语调加重(斜体)<strong>强调(加粗)<blockquote>长引用<a href="" target=""></a>,(1) herf:#点

2020-10-10 16:31:39 22

原创 JavaScript对类的操作(添加移除切换样式)

效果(点击按钮可以改变box的样式,在原有样式上添加移除切换样式):html代码:<button id="btn1">点击改变box1的样式</button><br><br><div id="box1" class="b1 b2"></div>css代码:.b1{ width: 100px; height: 100px; background-color: greenyellow;}.b2

2020-10-08 09:18:19 51

原创 JavaScript轮播图(定时器自动轮播,点击按钮切换图片)

效果(在框内实现图片的轮播,点击小方框跳转图片):html代码:<!-- 设置外部div,来作为大的容器 --><div id="outer"> <!-- 创建ul,放置图片 --> <ul id="imgList"> <li><img src="lbimg/1.png" alt=""></li> <li><img src="lbimg/2.png"

2020-10-08 09:10:29 74

原创 JavaScript使用定时器切换图片练习

效果:可以根据按钮来控制图片的开始切换和停止切换html代码:<img id="img1" src="img/1.png" alt=""><br><br><button id="btn1">开始</button><button id="btn2">停止</button>js代码:window.onload = function(){ var img1 = document.getElementByI

2020-10-07 09:01:38 36

原创 JavaScript的Bom简介

Bom浏览器对象模型,通过js来操作浏览器Bom对象window:整个浏览器的窗口,也是网页的全局对象Navigator:当前浏览器的信息,通过该对象可以来识别不同的浏览器判断浏览器的类型var ua = navigator.userAgent;if(/firefox/i.test(ua)){ alert("我是火狐");}else if(/chrome/i.test(ua)){ alert("我是Chrome");}else if("ActiveXObject" in

2020-10-07 08:53:22 24

原创 JavaScript键盘事件(上下左右键无卡顿移动div)

html代码:<div id="box1"></div>css代码:#box1{ height: 100px; width: 100px; position: absolute; background-color: lightsalmon;}js代码://box根据不同的方向键移动window.onload = function(){ //初始速度 var speed = 10; var dir = 0; //开启一

2020-10-07 08:46:59 47

原创 JavaScript鼠标滚轮事件(box随滚轮滚动改变长短)

html代码:<div id="box1"></div>css代码:#box1{ height: 100px; width: 100px; background-color: palegreen; }js代码://事件绑定的函数(适应于所有浏览器)function bind(obj, eventStr, callback){ if(obj.addEventListener){ obj.addEventListener(

2020-10-06 10:27:17 17

原创 JavaScript对元素的拖拽(兼容任意浏览器)

思路:鼠标在元素上按下时,开始拖拽 onmousedown鼠标移动时候被拖拽元素跟随鼠标移动onmousemove鼠标松开,元素被固定在当前位置onmouseup全部代码:(1)封装了两个函数,id获取函数、拖拽函数(2)解决了拖动时点击元素中任意位置,指针只会跳在元素左上角的问题(鼠标的坐标 - div的偏移量)(3)解决了事件的兼容性问题,特别是ie8,window.event(4)针对不同的浏览器,对事件的捕获与取消捕获(5)拖拽功能的异常,通过return false来取消默认

2020-09-30 15:47:14 35

原创 JavaScript多个事件的绑定(所有浏览器均可以用)

单个事件的绑定添加按钮<button id="btn01">点击</button>使用对象.事件 = 函数的形式绑定响应函数,他只能同时为一个元素的一个事件绑定一个函数//点击按钮以后弹出内容var btn01 = document.getElementById("btn01");btn01.onclick = function(){ alert("1");};若想绑定多个事件使用对象.事件 = 函数的形式绑定响应函数,不能绑定多个函数,如果绑定多了,后面

2020-09-30 11:43:58 35

原创 JavaScript事件的冒泡及委派

事件的冒泡及取消冒泡事件的冒泡(Bubble)事件向上传导,当后代元素的事件被触发时,其祖先元素的相同事件也会被触发在开发中,大部分冒泡都是有用的,如果不希望发生冒泡可以通过冒泡事件来取消冒泡通过一个简单的例子来简述事件的冒泡及取消冒泡html代码:<div id="box1"> 我是box1 <span id="s1">我是span</span></div>css代码:<style> #box1{

2020-09-30 10:52:48 32

原创 JavaScript鼠标移动练习:1.显示xy,2.div随鼠标移动

一:当鼠标在areaDiv移动时,在showMsg中显示鼠标的坐标鼠标在元素中移动时触发onmousemoveclientX,clientY用于获取鼠标相对于当前可见窗口的坐标,在ie8中不支持解决事件的兼容性问题e = e ||window.e;效果:html代码:<div id="areaDiv"></div><br><div id="showMsg"></div>css代码:<style> #a

2020-09-30 09:53:56 48

原创 JavaScript使用Dom操作CSS (判断滚动条是否到底的用户注册练习)

通过js改元素的样式语法:元素.style.样式名 = 样式值如果css样式中含有-,需要将这样的样式名修改为驼峰命名法box1.style.width = "300px";box1.style.backgroundColor = "yellow";如果在样式中写了!important,用js不能覆盖,因为他有最高的优先级读取样式 (内联样式)通过style属性设置和读取到的都是内联样式,无法读取样式表中的样式box1.style.width获取元素当前显示的样式(只能在ie..

2020-09-29 19:03:30 38

原创 JavaScript增删改查练习(将人员信息可以添加到表格中也可以进行删减)

将人员信息可以添加到表格中也可以进行删减html代码: <table style="margin:100px 100px 30px 100px" border="3" id="employeeTable"> <tr> <th style="text-align: center;">Name</th> <th style="text-align: center;">Email&

2020-09-29 08:22:19 76

原创 JavaScript Dom其他查询方法 及 js增删改查

Dom其他查询方法获取body标签document.getElementsByTagName("body")[0]或document.body获取页面中所有的元素document.all或 document.getElementsByTagName("*")根据元素的class属性查询一组元素的节点document.getElementsByClassName("box1")ie8及以下浏览器不支持根据CSS选择器来查询元素的节点document.querySelector(".box1 div"

2020-09-28 19:52:22 12

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除