- 博客(54)
- 收藏
- 关注
RSS订阅转载 vue.js-day14
在data中定义即将渲染的数据，及activedata() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, {...
2019-06-26 19:30:05
96
转载 vue.js-day13
概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js演示我们来看一下一个最基本的动画例子点击查...
2019-06-25 19:19:55
102
转载 vue.js-day12
路由中有三个基本的概念 route, routes, router。 1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。 2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>h...
2019-06-24 18:31:40
98
转载 vue.js周末
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。下面一段简单的代码给大家介绍Vue加载组件的几种方式，具体代码如下所示：//正常加载import index from '../pages/index.vue'impor...
2019-06-23 23:10:08
109
转载 vue.js-day010
简单打包命令行方式安装webpack，使用全局安装模式。cnpm install -g webpack@1.13.2cnpm install -g webpack@1.13.2一个简单的a.js：document.write("hello webpack");运行打包命令：webpack a.js bundle.js一个index.html文件：<html>...
2019-06-20 19:18:23
90
转载 vue.js-day09
vue生命周期的理解vue生命周期是指vue实例对象从创建之初到销毁的过程。vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后vue生命周期的作用：生命周期中有多个钩子，可以让我们在控制整个vue实例时更容易形成好的逻辑● 1、创建前/后：beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/w...
2019-06-19 19:11:23
63
转载 vue.js-day08
1、 Vue中的全局变量是通过 Vue.prototype实现的2、vue入口1）main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件2）App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。index.html文件入口src放置组件...
2019-06-18 19:06:22
93
转载 vue.js-day07
v-if，v-else，v-else-if实现逻辑判断控制代码html：<div id="app"> <div v-if="role == 'admin'"> 管理员你好 </div> <div v-else-if="role == 'hr'"> hr你好 </div&g...
2019-06-17 19:02:31
70
转载 vue.js-day06
Vue实例每个 Vue 应用都是通过实例化一个新的 Vue对象开始的：window.onload = function(){ var vm = new Vue({ el:'#app', data:{message:'hello world!'} });} ......<div id="app">{{ message }...
2019-06-17 09:48:04
67
原创 vue.js-day05
v-if是条件渲染指令，他根据表达式的真假来删除和插入元素，它的基本语法如下:v-if=”expression”expression是一个返回bool值的表达式，表达式可以使一个bool属性，也可以返回一个bool的运算时Vue.js 模板语法（v-html）<div id="app"><div v-html="message"></div>...
2019-06-13 19:16:34
88
原创 web移动端-day07
一、meta的使用1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览2...
2019-05-22 19:06:42
121
原创 web移动端周末
.viewport模板<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">...
2019-05-19 22:05:08
105
原创 web移动端-day02
一、meta标签html代码中最关键的就是meta标签设置，开发移动端页面首先一定要设置viewport（可视区域）device-width - 设备的宽度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手...
2019-05-15 19:26:41
73
原创 c3h5-day09
transition属性transition:让元素变化的时候有动画效果（过渡效果） */ 参数1：参与过渡的属性，一般写all，代表所有属性都参与过渡，也可以写其他的，写什么就代表什么属性参与过渡 参数2：过渡的持续时间，记得要加单位s代表多少秒 参数3：代表延迟几秒执行（延迟时间） 参数4：运动曲线 linear匀速 st...
2019-05-13 19:29:47
91
原创 h5c3-day08
js 的Math库，自带了许多常见函数方法，其中关于 三角函数的求解还是很齐全的，于是想到，利用canvas 绘制一个比较准确的 sin、cos、tan、sinh、cosh、tanh图像。canvas绘制坐标轴坐标轴由两条直线构成，直接将坐标定在中心点就好，这样容易绘制。同时为坐标的箭头定义边长。绘制坐标轴上的尺度和文字思路：将坐标轴线的长度平均分割，分别定义好x轴和y轴每个尺度的...
2019-05-09 19:17:17
115
原创 c3h5-day06
《QQ TIM》案例Stellar插件描述视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。这种效果可以给网站一个很好的补充。特性视差滚动效果酷炫，适合于个性展示的场合。视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。视差滚动容易迷...
2019-05-07 19:05:08
139
原创 c3h5-day05
h5新增语义化标签标签语义化:在合适的地方放合适的标签 利于seo优化<header>头部</header><nav>导航</nav><section><aside>侧边栏</aside><article>文章</article></section>...
2019-05-06 19:11:45
216
原创 c3h5-day03
transition属性transition:让元素变化的时候有动画效果（过渡效果） */ 参数1：参与过渡的属性，一般写all，代表所有属性都参与过渡，也可以写其他的，写什么就代表什么属性参与过渡 参数2：过渡的持续时间，记得要加单位s代表多少秒 参数3：代表延迟几秒执行（延迟时间） 参数4：运动曲线 linear匀速 st...
2019-04-29 18:47:41
184
原创 c3h5-day02
transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。示例：transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);【矩阵变形】matrix(<number>,<number>,<...
2019-04-28 17:29:02
134
原创 周末作业
1.属性选择器语法特点：[]e[attr] 具有某属性的标签e[attr = ""]属性值完全等于某个值的标签e[attr *= ""] 属性值里包含某个值的标签e[attr ^= ""] 属性值以某个值开头的标签e[attr $= ""] 属性值以某个值结尾的标签2.伪类选择器（位置伪类）e:first-child 父元素的第一个子元素 例子：li:first...
2019-04-27 21:04:26
99
原创 c3-day01
1.属性选择器语法特点：[]e[attr] 具有某属性的标签e[attr = ""]属性值完全等于某个值的标签e[attr *= ""] 属性值里包含某个值的标签e[attr ^= ""] 属性值以某个值开头的标签e[attr $= ""] 属性值以某个值结尾的标签2.伪类选择器（位置伪类）e:first-child 父元素的第一个子元素 例子：li:first...
2019-04-25 18:29:14
97
原创 jquery-day07
jquery的基本api函数 描述jQuery() 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。jQuery()1.8* 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包...
2019-04-24 18:43:16
76
原创 jquery-day06
什么是ajax？ asynchronous JavaScript and xml 不用加载整个页面，只用更新部分页面----用来做数据交互的 ajax的原理：通过xmlHttpRequest对象向服务器发送异步请求，从而从服务器中获取到数据，然后把这个数据通过js来操作DOM从而达到渲染页面的效果 简单来说：ajax用于客户端和服务器端交换数据，可以实...
2019-04-23 18:49:27
118
原创 jquery-day05
JQuery：效果JQuery效果有很多，包括隐藏、显示、切换，滑动，淡入淡出，以及动画等。隐藏：JQuery hide()显示：JQuery show()切换：JQuery toggle(）淡入淡出：JQuery fadeIn()、JQuery fadeOut()、JQuery fadeToggle()、JQuery fadeTo()滑动：JQuery slideDown()...
2019-04-22 19:01:15
91
原创 jquery周末作业
jQuery:jQuery是一个js库免费开源易用，提供了我们开发中常用到的操作DOM的API，解决了我们使用js操作DOM常遇到的一些问题，强大的选择器，简化我们的操作。jQuery的特点：a. 轻量级b. 富应用c. DOM操作、事件处理、运动动画、AJAXd. 跨浏览器（不再考虑浏览器兼容）e. 链式调用f. 隐式迭代g. 丰富的插件库 。jQuery基本使用：官网下载:...
2019-04-20 16:55:37
233
原创 jquery-day03-day04
1. 创建节点：$("标签和内容") 2. 将节点添加到页面中 嵌套关系： 向后追加：父元素.append(子元素) 子元素.appendTo(父元素) 往前面添加： 父元素.prepend(子元素) 子元素.prependTo(父元素) 并列关系： 兄...
2019-04-19 15:43:20
76
原创 jquery-day02
css样式：设置单个样式：css(属性，属性值)；----js通过style属性来设置样式设置多个样式：css({属性:属性值，属性2：属性值2})获取样式：css(属性名)隐式迭代：设置操作的时候，会给jq内部的所有对象都设置相同的值【获取的时候，只会返回第一个元素的值】class操作：添加类名：addClass("类名")移出类名：removeClass("类名...
2019-04-16 19:27:00
127
原创 jquery-day01
1.jquery的入口函数比js的入口函数快一些2. jquery的入口函数会等待页面加载完成才执行，但是不会等待图片的加载 js的入口函数会等待页面加载完成，并且等待图片加载完成才执行js对象(DOM对象):通过js的方式获取到的元素就是js对象 documentjquery对象:通过jquery的方式获取到的元素就是jquery对象 $("选择器")jquer...
2019-04-15 19:19:56
116
原创 js高级
浅拷贝：拷贝就是复制，就相当于把一个对象中所有的内容，直接复制一份，或者是将这个对象的地址给另一个对象，他们的指向是相同，两个对象之间有共同的属性和方法函数封装：浅拷贝，把一个对象中的属性全部复制到另一个对象中深拷贝：拷贝还是复制的意思，深，把对象中所有的属性和方法，一个一个的找到，并且在另一个对象中开辟相应的空间，一个一个的存储到另一个对象中【深拷贝：浅拷贝+递归来实现】正则表达...
2019-04-14 22:15:38
74
原创 js高级-day04
apply和call方法的用法：apply方法：1. 函数名.apply(对象，[参数1，参数2...]) 2.方法名字.apply(对象,[参数1，参数2...])call方法：1.函数名.call(对象，参数1，参数2...) 2.方法名字.call(对象，参数1，参数2...)【第二个参数：函数中或者方法中的形参对应的实参 】apply和call的作用：改变this指...
2019-04-11 20:42:10
77
原创 js高级-day03
原型对象：创建对象：第一步，添加自定义构造函数-----构造函数首字母大写，普通函数驼峰命名法作用：数据共享，节省内存空间 实例化对象【构造函数中的原型对象（prototype）和实例对象中的原型对象（__proto__）是相同, 实例对象中的原型对象（__proto__）指向 构造函数中的原型对象（prototype） console.log(Pe...
2019-04-10 21:41:19
111
原创 api-day07
offset系列：在style标签中的属性，不能通过style.属性获取到，只能通过offset获取offsetWidth：获取元素的宽【width+padding+border】offsetHeight：获取元素的高【有边框】offsetLeft：获取元素距离左边的距离offsetRight：获取元素距离右边的距离offsetLeft具体的值：1. 子元素和父元素都没有脱...
2019-04-03 19:28:07
80
原创 api-day06
常用事件：onclick：点击元素时触发onmouseover：鼠标移入元素时触发onmouseout：鼠标移出元素时触发onkeyup：键盘抬起时触发onkeydown：键盘按下时触发onmouseup：鼠标抬起时触发onmousedown：鼠标按下时触发onfocus：获取焦点nblur：失去焦点案例笔记：【1.样式的代码在<style>...
2019-04-02 19:26:03
120
原创 api-day05
BOM的概念：BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象BOM的顶级对象：window：window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 【wind...
2019-04-01 19:24:32
81
原创 API-day04
创建元素的三种方式：1.document.write() 【document.write ('新设置的内容<p>标签也可以生成</p>')】2.innerHTML var box = document.getElementById('box');box.innerHTML = '新内容<p>新标签</p>...
2019-03-31 21:23:23
92
原创 API-day03
创建元素的三种方式：1.document.write() 【document.write ('新设置的内容<p>标签也可以生成</p>')】2.innerHTML var box = document.getElementById('box');box.innerHTML = '新内容<p>新标签</p>...
2019-03-29 16:44:36
81
原创 API-day02
根据id获取元素：var div = docment.getElementById('main');console.log(div); 【获取到的数据类型HTMLDivElement,对象都是有类型的】 【HTMLDivElement<-- HTMLElement <-- Element <-- Nod...
2019-03-27 18:33:43
84
原创 WA-day01
DOM:文档对象模型操作页面元素可以访问html文档的所有元素文档:html文件万物皆对象文档也可以看做一个对象页面中的每一个标签都是一个元素节点(node):页面中所有的内容都是节点:标签,文本,属性页面中每一个标签都是一个元素,也是节点节点包括元素根节点(root):html文档中所有元素组成了树形结构图即DOM树onclick...
2019-03-26 19:04:52
127
原创 JS-day08
创建数组对象的两种方式 ：1.字面量方式 2.new Array()1. 使用构造函数创建数组对象 创建了一个空数组var arr = new Array();创建了一个数组，里面存放了3个字符串var arr = new Array('zs', 'ls', 'ww');创建了一个数组，里面存放了4个数字var arr = new Array(1, 2, 3, 4);...
2019-03-25 19:21:57
80
原创 JS结束
JS暂时告一段落，虽然还处于半知半解，但是经过很多次的实践和练习会慢慢熟练起来的，老师也很耐心的讲给我们知识不懂就问，可能有时候人太多有时候兼顾不过来。希望以后更加努力鸭，冲鸭！...
2019-03-24 20:45:46
263
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人