2017年09月_TimChen666

原创 Vue生态——vue-router（2019.03更新）

概念简单来说，就是当我们点击某些按钮时，去到不同的路径页。但其实它并没有刷新，还是单页面的。简单配置实例HTML <div id = 'app'>  <router-link to="/">首页</router-link> <router-link to="/about">关于我们</r

2017-09-30 16:04:13 467

原创 Vue——Slot（插槽) 2019.03更新

使用方法我们平常内容，都是在template里面定义的。但在template里面使用slot以后，可以直接在html的组件标签内写内容。实例1<div id = 'app'> <panel> nsdjkfn </panel></div><template id="panel-tpl"> <div class="panel"> <div cla

2017-09-30 15:21:51 472

原创 Vue——mixins

基本使用首先，在JS里面声明一个变量，里面保存一些公共用的方法、数据。调用的时候，直接通过mixins调用。实例//定义变量var base = { methods: { toggle (){ if(this.visible){ this.visible = false; }else{

2017-09-30 14:57:46 713

原创 Vue——自定义指令directive

使用方法HTML里面，使用“v-”前缀自定义一个属性。JS里面使用directive设置。语法Vue.directive('属性名',function(所在元素,定义内容){})实例HTMLdiv v-pin="card1.painned" class="card">button @click="card1.painned =!card1.pa

2017-09-30 11:00:23 1037

原创 Vue——过滤器

current（货币相关）实例HTML<input v-model="price">{{ price | currency}}JS//名字函数 html里的priceVue.filter('currency', function(val){ val = val || 0; return val + '元';});new Vue({

2017-09-30 10:31:34 232

原创 Vue——组件通信之EvemtBus

思路核心方法$emit() 触发事件$on() 监听事件核心思路定义一个调度器，其实就是new一个Vue。让这个调度器承载事件，也就是使用上面的两个方法。实例//第四步，定义一个调度器var Event = new Vue();//负责说Vue.component('tim',{ template:`<div> // 第一步，定义了一个keyup事件，触发

2017-09-30 10:20:49 725

原创 Vue——父和子组件通信

父子通信props实例1html（父）的数据传到 js（子）里的数据propsHTML<div id = 'app'> //我们在这里定义了一个变量msg <alert msg="Yoooo"></alert></div>JStemplate: '<button @click="on_click()">弹框</button>' ,//在这里，props接收了变量msg

2017-09-29 17:03:32 275

原创 Vue——组件配置实例

点赞功能小例子HTML<div id = 'app'> <like></like></div>JSVue.component('like',{ template: '<button @click="toggle_like()">赞 {{like_count}}</button>', data: function(){ return {

2017-09-29 16:49:01 331

原创 Vue——计算属性

概念其实就是在标签调用变量，在computed里面定义函数进行相应运算。计算属性只有在它的相关依赖数据发生改变时才会重新求值。所以，性能较好。实例假设我们需要求出总分和平均分。<table border="1"> <thead> <th>学科</th> <th>分数</th> </thead> <tbody> <tr>

2017-09-29 16:09:41 343

原创 Vue——指令

v-for专门用于迭代的指令。实例字符串假设我们有一个foodList在data里面，使用v-for进行迭代，变量名为food。记住，xxxList，变量名就是xxx。jsnew Vue({ el: '#app', data: { foodList: ['麦辣鸡腿堡','甜筒','薯条'], }})html<div id = 'app'> <u

2017-09-29 10:56:42 322

原创 Vue——计算属性和属性监听

计算属性其实就是在标签调用变量，在computed里面定义函数进行相应运算。计算属性只有在它的相关依赖发生改变时才会重新求值。所以，有时候能立即返回值。实例<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p>

2017-09-28 23:42:26 3772 1

原创 Vue——事件绑定

事件绑定方法v-on 可以简写成@使用两种方式内联直接把js写在标签上调用方法调用methods里定义的方法事件修饰符.stop 阻止单击事件冒泡.prevent 提交事件不再重载页面.capture 使用事件捕获模式.self 当事件在该元素本身 (比如不是子元素) 触发时触发回调.once<a v

2017-09-28 19:27:20 6665

原创 Vue——渲染（文本、列表）、列表数据更新

文本渲染方法{{ }}把内容写在双话括号内，也可以写简单的js表达式。（加减乘除，三元运算符等） v-html 将模版便签内的内容展示到页面v-text 将模版便签以及内容展示到页面实例<template> <div> <p v-text = 'hello'></p> <p v-html = 'hello'></p> </div>

2017-09-28 15:56:07 11704

原创 Vue——组件

使用组件可以扩展 HTML 元素，封装可重用的代码。全局注册语法Vue.component('组件名', {选项})实例html代码<div id = 'app'> //使用组件名标签 <my-header></my-header></div>js代码//注册my-header全局组件Vue.component('my-header',{ tem

2017-09-28 11:26:31 180

原创 Vue——实例对象

使用每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始，使用new关键字可以实例化vue对象。基本语法new Vue({ el: '', template: '', data: { }})参数说明el: 挂载到哪个元素上，通过id、class或者标签名template: HTML片段data: 数据（会被代理到实例对象上）简单实例var my

2017-09-28 10:27:33 4483

原创 ES6——Descrotor（修饰器）

基本概念Descrotor是一个函数，它可以用来修改类的行为，它只在类范围内使用。基本用法类的修饰let typename = function(target,name,descriptor){ //在类上添加静态属性myname target.myname='hello' } //使用修饰器 @typename class Test{

2017-09-28 00:55:33 249

原创 ES6——Generator

概念通俗来讲，这就是异步编程的一种解决方案。早期方式是通过回调，es6新增加了Promise，而Generator也是用于异步编程的，但更高级一点。Generator包含多个步骤，每个步骤的标志就是yield或return。遇到yield或return，就会停止运行。进入下一步的时候，需要调用next( )。使用方法基本定义生成器函数以function *开头返回值： Iterator

2017-09-27 23:43:31 195

概念遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。遍历过程：（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

2017-09-27 21:38:58 321

原创 ES6——模块化

导出 1）语句前面加export export let A = 123； 2）在js文件最后加export default{} export default{ A, B, ... } 导入对应导出方式——11）import {A,B,…} from ‘路径’2）import *

2017-09-27 18:28:36 168

原创 ES6——Promise

简介Promise是解决异步编程的一种解决方案。什么是异步？已有函数A，A去执行一个步骤，A执行完，再执行B。A -> B这么一个过程就是异步。如何异步编程？第一种：回调函数第二种：事件触发而，Promise有别于以上两种。回调 && Promise 回调语法定义 A = function（B）{ A函数部分； B函数部分； } 调用 A（自定

2017-09-27 17:19:43 170

原创 ES——类（Class）

实例方法定义与生成使用class定义，使用new生成。 //基本定义和生成实例 class Parent{ constructor(name='Tim'){ this.name = name; } } //实例 let ccc = new Parent('v'); console.log('实例',

2017-09-27 16:44:12 2567

原创 ES6——Proxy（代理）、Reflect（反射）

Proxy（代理）Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。语法new Proxy(被代理对象,处理函数)常用方法 get(被代理对象,k...

2017-09-27 14:55:51 1061

原创 ES6——set、map数据结构

Set就是常见的集合，可以理解成数组，但是它的元素是不能重复的，具有唯一性。方法1）add() 增加元素 2）size() 元素个数3）delete() 移除4）clear() 清空5）has() 判断是否有该元素6）entries() keys() values() 默认的就是，不需要写7）forEach 遍历实

2017-09-27 01:33:10 311

原创 ES6——Symbol数据类型

作用声明独一无二的变量两个Symbol是不相等的。let a1 = Symbol(); //不用newlet a2 = Symbol();console.log(a1===a2); //false防止key值冲突let a1=Symbol.for('abc');let obj={ [a1]:'123', 'abc':345, 'c':456};

2017-09-27 00:59:02 276

原创 ES6——对象扩展

新增方法简洁表示法实例先定义变量并赋值，es5：对象属性等于变量es6：直接写变量名let o=1;let k=2;let es5={o:o,k:k};let es6={o,k};console.log(es6); //{o:1 , k:2}属性是函数，忽略functionlet es5_method={ ...

2017-09-27 00:36:39 216

原创 ES6——Function扩展

参数默认值实例function test(x, y='World'){ console.log(x,y);}test('Hello'); // Hello World注意默认值后面不能再跟参数，例如c。除非这个参数也是有默认值的。rest函数一个函数的最后一个参数有“…”的前缀把一组不确定长度的参数，转换为数组实例function test3(...arg){ for(let

2017-09-26 23:44:21 213

原创 ES6——Array扩展

新增方法Array.of 变量转为数组实例let arr = Array.of(1,2,3,4,5);console.log(arr); // [1,2,3,4,5]如果不放任何参数，返回一个空数组。Array.from 类数组转为数组实例let p = document.quertSelectorAll('p');let pArr = Array.from(p);pArr.forEac

2017-09-26 22:50:37 192

原创 ES6——Number扩展

Number.isFinite() 是否有尽像无穷大、负无穷大是无尽。实例console.log(Number.isFinite(2)); // true注意NaN会返回false，因为它不是一个数；除以0，也会返回falseNumber.isNaN() 非数字null 、 undefined也会返回false。实例console.log(Number.isNaN(

2017-09-26 22:24:42 202

原创 ES6——字符串扩展

字符串新增方法includes——是否包含let str = 'string';console.log(str.includes('r')); // truestartsWith——是否以xxx开头let str = 'string';console.log(str.startsWith('str')); // trueendsWith——是否以xxx结尾let str = 'string'

2017-09-26 21:44:29 244

原创 ES6——正则扩展

y修饰符y和g 都是全局匹配。区别g是从上一次匹配的位置开始，继续寻找，直到找到为止。 y，必须是紧跟着的下一个位置匹配成功，才能输出。实例{ let s = "bbb_bb_b"; let a1 = /b+/g; let a2 = /b+/y; console.log('one',a1.exec(s), a2.exec(s)); console.log('tw

2017-09-26 16:26:13 248

原创 ES6——解构赋值

数组类型左右各一个数组let a,b;[a,b] = [1,2];console.log(a,b); // 1, 2数值赋值给变量（rest）let a,b,rest;[a,b,...rest] = [1,2,3,4,5,6];console.log(a,b,rest); // 1, 2, [3,4,5,6]数组嵌套var [a,[b,c]] = [1,[2,3]];console.l

2017-09-26 15:41:47 174

原创 ES6——let和const

作用域es6之前，只有2种作用域全局作用域和函数作用域。到了es6，新增了一个块级作用域。所谓的块级作用域，就是指用{}大括号括起来的范围。 letlet只有一种域，块级作用域。使用注意使用let，不能重复定义变量。实例for(let i = 0l i < 5; i++){ console.log("i:",i); }console.log("i:", i);运行结果let只作用于

2017-09-26 15:24:37 147

原创 JS & jQ实践——固定边栏滚动

前言当左边栏内容高度大于右边栏的时候，左边栏继续滚动，右边栏保持底部不变。使用到的属性有position:fixed、页面高度、滚动高度、内容高度。判断，当滚动高度 + 页面高度 > 右边拦高度，右边栏fixed，bottom: 0 , right : 0。 jQuery代码实现var jWindow = $(window);jWindow.scro

2017-09-25 11:17:57 553

原创 JS实践——放大镜

原理鼠标在小图片上移动时，通过捕捉鼠标在小图上的位置，定位大图片的相应位置。思路首先，我们先理清楚页面元素。页面元素容器——demo 小盒子（尺寸与图片一样）放大镜框小图片大盒子（尺寸与图片一样）大图片事件事件都发生在小盒子上。最简单的是——onmouseover、onmouseout，此时只需要控制放大镜框，以及大容器的显示与隐藏。最复杂的是，onmousemove事件。

2017-09-25 02:04:54 274

原创 JS实践——拖拽

大体思路1. 鼠标按下onmousedown事件在该事件，我们需要计算鼠标相对于元素左上角的坐标（clientX和clientY），标记元素为可拖动2. 鼠标移动onmousedown事件在该事件，我们需要检测元素是否标记为移动更新元素的位置，到当前鼠标的位置（鼠标当前位置 - 鼠标相对元素的位置）3. 限制区域在上面的鼠标移动事件，我们还需要对元素的移动范围做出限制。首先，页面

2017-09-24 10:28:35 345

原创 JS实践——选项卡

大体思路选项卡的原理就是在不需要的时候，隐藏其他信息，只显示需要的信息。显示信息display:block，以及锚点定位。隐藏信息overflow：hidden 和 display：none CSS实现选项卡不使用JS，也可以实现选项卡。主要是通过锚点定位，以及overflow：hidden。当我们点击的时候，跳转到对应的栏目，而其他内容进行隐藏。实例代码<html><head>

2017-09-23 22:01:21 205

原创 JS——动画

运动实现思路1. 速度（匀速）改变left、right、width、height、opacity实例1（速度）做一个侧栏分享的案例思路容器设置相对定位。内容原本的left是负值，设置一个定时器，每隔一段时间，露出一点来。直至offsetLeft为0，结束计时器。代码window.onload=function(){ var oDiv=document.getElemen

2017-09-22 15:25:46 320

原创 jQuery——ajax

jQuery.ajax([setting])参数说明： type: POST / GET（默认） url: 请求地址 data: 对象（POST才有）dataType: 一般设为json success: 请求成功的回调函数 error: 请求失败的回调函数例子：$.ajax({ ...

2017-09-22 14:53:20 220

原创 jQuery——事件

jQuery事件模型优点：1. 提供了统一的事件处理方法2. 允许添加多个事件处理函数3. 使用标准的事件名称（不带on）4. 事件实例作为事件处理函数的第一个参数5. 标准化事件实例最常用的属性6. 提供了统一的事件取消和阻止默认行为的方法添加事件处理on(eventType[,selector][,data],handler)...

2017-09-22 10:33:54 313

原创 jQuery——动画

隐藏与显示语法： hide(ms) 隐藏 show(ms) 显示 toggle(ms) 隐藏/显示注意，当元素隐藏后不需要了，记得移除！淡入淡出语法：fadaIn(ms) 淡入fadeOut(ms) 淡出fadeToggle(ms) 淡入/淡出fadeTo(ms,透明度) 变淡滑动语法：slideDown(ms)

2017-09-22 01:45:24 316

空空如也

空空如也