![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
空城1995
爱编程,爱java。
展开
-
Vue路由案例演示
1. 简介Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。Vue.js 路由需要载入 vue-router 库中文文档地址:vue-router文档。2. 安装1)直接下载https://unpkg.com/vue-router/dist/vue-router.js2)NPMnpm install vue-router3. 案例演示原创 2020-12-10 14:30:17 · 630 阅读 · 0 评论 -
vue组件化编程
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:1. 使用vue-cli创建模板项目1.1 简介1) vue-cli 是 vue 官方提供的脚手架工具2) github: https://github.com/vuejs/vue-cli3) 作用: 从 https://github.com/vuejs-tem.原创 2020-12-09 11:06:43 · 469 阅读 · 0 评论 -
VueX(Vue状态管理模式)
一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的,所以在下文出现的项目的目录请参照VueCl转载 2020-12-07 14:32:14 · 168 阅读 · 0 评论 -
vue入门教程(二)
8. 事件处理可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。 <button @click="test1">test1</button> <button @click="test2('abc')">test2</button><script> new Vue({ el: '#example', methods: { // 默认事件形参: event ...原创 2020-12-03 11:16:43 · 556 阅读 · 1 评论 -
vue入门教程(一)
1. vue简介1.1 vue是什么官网:https://cn.vuejs.org/Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。1.2 vue的特点1) 遵循 MVVM 模式2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发.原创 2020-12-03 11:09:12 · 8464 阅读 · 0 评论 -
Promise和Async-Await的入门教程
1. Promise是什么1.1 理解 抽象表达: Promise 是一门新的技术(ES6 规范) Promise 是 JS 中进行异步编程的新解决方案(旧方案是单纯使用回调函数) 具体表达: 从语法上来说: Promise 是一个构造函数 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值 1.2 Promise的状态改变Promise一种有三种状态,为 pending、fulfi原创 2020-11-25 20:52:08 · 404 阅读 · 0 评论 -
ECMAScript6入门教程(二)
ECMAScript入门教程(一)2.11 生成器生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同 function * gen(){ yield '一只没有耳朵'; yield '一只没有尾部'; yield '真奇怪'; } let iterator = gen(); console.log(iterator.next());...原创 2020-11-18 18:09:14 · 291 阅读 · 0 评论 -
ECMAScript6入门教程(一)
1.什么是ECMA1.1 什么是ECMAECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。1.2 什么是ECMAScriptECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。1.3 为什么要学习ES6 ES6 的版本变动内容最多,具有里程碑意义 ES6 加入许原创 2020-11-18 18:04:09 · 735 阅读 · 0 评论 -
前端实现mac笔记本停靠栏效果
1.代码演示代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;原创 2020-11-11 20:45:30 · 338 阅读 · 0 评论 -
css中width:100%与width:auto的区别
在布局中,width:100%和width:auto都会经常用到,那么,二者究竟有何区别呢?下面就来探讨下。先上代码<style> * { margin: 0; padding: 0; } .parent { width: 800px; margin: 50px auto; border: 2px solid red; } .child1 { background: orang转载 2020-11-05 16:03:44 · 1023 阅读 · 0 评论 -
javascript之DOM总结
1.简介当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树,这种结构被称为节点树:节点树中的节点彼此拥有层级关系。我们常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。 在节点树中,顶端节点被称为根(root)。 每个节点都有父节点、除了根(它没有父节点)。 一个节点可拥有任意数量的子节点.原创 2020-10-27 11:27:27 · 301 阅读 · 0 评论 -
CSS3新增属性详解
1.圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中,很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角:如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角原创 2020-10-26 15:11:21 · 2320 阅读 · 0 评论 -
CSS布局相关汇总
1.margin外边距margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。margin 可以单独改变元素的上下左右边距,也可以一次改变所有的属性。属性 描述 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距.原创 2020-10-23 18:08:51 · 171 阅读 · 0 评论 -
CSS样式相关汇总
1.CSS背景CSS 背景属性用于定义HTML元素的背景。Property 描述 常用属性值 background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 scroll、fixed background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-posit...原创 2020-10-22 19:31:19 · 224 阅读 · 0 评论 -
ajax入门
目录一、ajax概述1.什么是ajax2.ajax的应用场景3.同步与异步的区别二、js原生的ajax1.开发步骤2.代码实现三、jQuery中的ajax1.load()方法2.GET请求3.POST请求4.AJAX请求四、json数据格式1.什么是json2.语法格式3.json的转换工具(1)概述(2)常见的json转换工...原创 2018-10-10 18:37:44 · 407 阅读 · 0 评论 -
CSS选择器、盒子模型及布局
一、CSS的简介Cascading Style Sheets:层叠样式表可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。将网页内容和显示样式进行了分离,提高了显示功能。二、CSS和HTML的结合方式(四种)1.在html标签上加style属性<div style=" height:400px; width:400p...原创 2018-04-19 21:36:27 · 259 阅读 · 0 评论 -
javascript简介及基本语法
目录一、javascript的简介1.JavaScript的特点2.JavaScript的语法组成二、JavaScript的基础语法1.编写方式2.注释3.变量4.数据类型5.算术运算符6.流程控制语句7.九九乘法表案例演示8.数组(1)定义方式(2)注意三、JavaScript的函数1.定义函数的三种方式(1)标准格式(2)...原创 2018-04-20 17:51:21 · 789 阅读 · 1 评论 -
javascript的常见对象总结
目录一、String对象1.创建String对象2. 属性2.常用方法二、Array对象三、Date对象1.获取当前时间2.常用方法四、Math对象五、全局函数一、String对象1.创建String对象var str=”abc”;2. 属性length:字符串的长度pototype:就是对对象的一个描述。该描述中如果添加了新功能,那...原创 2018-04-20 21:03:56 · 185 阅读 · 0 评论 -
javascript案例练习
案例1.动态显示时间<div id="div_1"></div><script type="text/javascript"> function showDate(){ var date=new Date();//获取date对象 var d=date.toLocaleString();//获取本地时间格式 var div1=documen...原创 2018-04-22 14:41:31 · 5155 阅读 · 1 评论 -
AJAX入门
一、AJAX概述 1.什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部...原创 2018-05-25 10:20:51 · 271 阅读 · 0 评论 -
jquery入门(一)
目录一.DOM和jquery的转换1.jquery对象2.jquery 对象转成 DOM 对象3.DOM对象转成jquery对象二、jquery选择器1.基本选择器2.层次选择器3.过滤选择器(1)基本过滤选择器(2)内容过滤选择器(3)可见性过滤选择器(4)属性过滤选择器(5)子元素过滤选择器(6)表单对象属性过滤选择器4.表单选择器...原创 2018-10-05 20:56:04 · 175 阅读 · 0 评论 -
jquery中的DOM操作
目录1.查找节点2.创建节点3.插入节点4.案例一4.删除元素5.复制节点6.替换节点7.包裹节点8.HTML代码/文本/值9.样式操作10.CSS-DOM操作1.查找节点 查找属性节点: 通过 jQuery 选择器完成 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值...原创 2018-10-07 17:17:11 · 187 阅读 · 0 评论 -
jquery中的事件和动画
目录一、jquery中的事件1.加载DOM2.事件绑定3.合成事件4.事件冒泡5.事件对象的属性6.移除事件二.jquery中的动画1.隐藏和显示2.滑动效果3.淡入淡出效果三、jquery的遍历1.对象方法遍历2.全局方法遍历3.jQuery3.0新特性for of遍历一、jquery中的事件1.加载DOM 在页面加载完毕...原创 2018-10-09 08:12:01 · 234 阅读 · 0 评论 -
Jquery插件入门之Validate插件的简单使用
目录一、jQuery插件1.jQuery插件概述2.Validate插件一、jQuery插件1.jQuery插件概述 jQuery插件机制概述 jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能. jQuery插件机制语法 jQuery...原创 2018-10-16 08:07:40 · 274 阅读 · 0 评论 -
angular入门
目录一、angular入门1.双边数据绑定2.模块3.Controller4.表达式(Expression)5.内置服务二、常用内置指令1.ng-app指令2.ng-repeat 指令3.ng-class指令4.ng-show/ng-hide 指令5.ng-link/ng-src 指令一、angular入门1.双边数据绑定<!--...原创 2018-11-27 20:52:59 · 515 阅读 · 0 评论 -
html简介及常用标签
目录一.html的简介1.什么是html?2.第一个html程序3.html的规范(遵循)4.html的操作思想二、html中常用的标签1.文字标签和注释标签2.注释标签3.标题标签、水平线标签和特殊字符4.列表标签 (1)定义列表 (2)有序列表 (3)无序列表5.图像标签6.路径的介绍7...原创 2018-04-19 17:40:03 · 458 阅读 · 0 评论