- 博客(32)
- 收藏
- 关注
RSS订阅原创 Vue学习之transition实现过渡效果
先来一个简单的栗子如下代码，假设不使用transition，那么我们得到的效果就是一个简单的显示与隐藏之间的切换。在加入了transition之后，这个显示与隐藏就有了“过程”。首先当点击按钮隐藏的时候，会有两个class被附加到transition上并依次执行，分别是.v-leave和.v-leave-to，前者代表“出场前”的状态，后者代表“出场后”的状态。当再次点击按钮显示的时候，同...
2019-12-17 11:15:20
668
原创 Vue学习之transition-group列表过渡组件复用
如下代码，本质上就是将transition-group作为根组件，内部使用slot插槽。代码中使用到的Velocity是一个高性能的动画库使用方式为Velocity(元素节点，css样式，配置项)配置项详情可参考Velocity.js中文文档Vue.component('demo-component', { template: ` <transition-group...
2019-12-17 10:27:11
550
原创 Node.js框架——koa基础
koa代码编写上避免了多层的嵌套异步函数调用 async await来解决异步async await 需要依赖于promise更轻… 减少了内置的中间件 express.static处理静态资源的内置中间件 express.Router() 路由启动步骤引入Koa构造函数对象 const Koa = require('koa')创建服务器示例对象 const app ...
2019-05-07 09:25:50
178
原创 作用域链简述
[[scope]]:作用域这是函数的一个属性，系统能访问而我们不能访问，里面存放的是函数的执行期上下文（也就是AO和GO对象）；function a(){ function b(){ function c(){ } c(); } b();}a();当函数a定义时--------->...
2019-05-07 09:22:01
268
原创 BOM简述
BOM 1、BOM 包括了所有的JS对象 ，是一个对象集合群 2、在JS中最大的对象是window对象 3、全局的也是相对window来说的；也就是说全局的东西，其他地方都可以访 问 4、学习DOM目的：进一步熟悉JS 是怎么在浏览器这个平台进行运行的 5、这里需要更加了解浏览器的一些功能window下六大对象...
2019-05-07 09:20:21
406
原创 vue父子组件传值
1.父组件向子组件传值采用prop down 属性向下传递的方式1.在父组件中通过子组件标签声明属性的方式传递数据2.在子组件中声明props接收父组件传递给自己的数据app.jsconst template= ` <div> <section class="todoapp"> <todo-header v-on:addTodo="addTo...
2019-05-07 08:46:28
193
原创 JavaScript原生实现mvvm
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
2019-05-07 08:31:05
396
原创 async函数
我们知道，promise用于控制异步流程，但是它本身还是需要回调函数，这不太方便。因此，在es6中新增了一个函数——async函数。语法：async function add(x,y){ }用以上这种方式声明的函数为异步函数，返回值为一个promise对象在async函数中使用awaitasync function fn(){ //在async函数的内部可以使用awa...
2019-05-06 22:02:59
606
原创 Node连接MySql数据库及操作
下载npm i mysql -S使用/** * 这里是有关数据库的操作 * 学会如何使用mysql第三方中间件 * **/var mysql=require('mysql');//创建一个连接池var pool = mysql.createPool({ connectionLimit:10, host : 'localhost', user ...
2019-05-06 21:36:52
485
原创 webpack——输出管理及打包单文件组件
HtmlWebpackPlugin你会发现，当你打包结束的时候，如果index.html在根目录直接运行的话，那么图片资源这些路径就无法访问到了。解决方案是把index.html放入dist目录中，但是dist是打包编译的结果而非源码，所以把index.html放到dist中就不合适，而且你也会发现，我们打包的结果文件名：bundle.js,如果我把这个文件名改了，则index.html也要手动...
2019-05-06 21:29:03
1044
原创 webpack——在模块化环境中使用vue-router
1、下载npm i vue-router2、引用资源<script src="./node_modules/vue-router/dist/vue-router.js"></script>3、配置externalsexternals:{ 'vue-router':'VueRouter'}4、在router.js文件中加载使用import Vue...
2019-05-06 21:26:26
758
原创 配置webpack不打包第三方包
通常情况下我们不打包第三方包，因为第三方包太大，和bundle打包到一起会造成资源体积过大，所以我们还是通过script标签的方式把第三方资源引入到页面中，只需要通过以下配置即可，这里以jQuery为例。1、下载第三方包npm i jquery2、在页面中引入资源<!--注意 这里的路径以最终的index.html文件位置为准--> <script src="....
2019-05-06 21:25:16
5576
1
原创 webpack-dev-server
每一次手动打包很麻烦，而且即便有--watch也不方便，还需要自己手动刷新浏览器，所以webpack给你提供了一个工具：webpack-dev-server它就可以实现监视代码改变，自动打包，打包完毕自动刷新浏览器的功能安装：npm i -D webpack-dev-server注意： webpack-dev-server 3.0及以上版本不再支持4.0版本以下的webpack，所以这里...
2019-05-06 21:23:26
186
原创 webpack——Babel
babelbabel是一个JavaScript编译器，可以把EcmaScript6编译成EcmaScript5babel可以独立使用，但是独立使用没有意义，一般是和webpack结合到一起使用的安装依赖：npm install --save-dev babel-loader babel-core babel-preset-env配置：module: { rules: [ ...
2019-05-06 21:21:37
307
原创 webpack资源加载
1.Loading Cssmodule.exports={ entry:'./src/main.js', output:{ path:path.join(__dirname,'./dist/'), filename:'bundle.js' }, module:{ rules:[ { ...
2019-05-06 21:19:00
261
原创 Node.js------koa-socket
koa-socket1.起步引入var IO=require('koa-socket');var io=new IO();io.attach(app);//将socket和app关联2.使用客户端：首先引入包：<script src="/socket.io/socket.io.js"></script>服务端和客服端通过on和emit进行交互emi...
2019-05-06 21:10:44
490
原创 Node.js------koa-formidable
koa-formidablekoa-formidable是nodejs下的一个第三方中间件，用于获取上传的文件1. 起步引入var koa=require('koa');var app=new koa();var formidable = require('koa-formidable');配置app.use(formidable({ uploadDir:config.u...
2019-05-06 20:54:20
605
原创 jQuery事件相关
jQuery事件绑定<body> <button></button> <script> /**jQuery中有两种事件绑定的方式 * 1、eventName（fn） * 编码效率略高/部分事件jQuery没有实现，所以不能添加 * 2、on（eventName，f...
2019-04-26 20:22:56
157
原创 jQuery节点操作
jQuery添加节点<script> //创建节点 var $li = $('<li>我是新的li</li>') //添加节点 $('button').click(function () { //在ul内部的最后添加li 两种写法 // $('ul').append($li); ...
2019-04-26 20:21:12
139
原创 jQuery属性操作
jQuery内容选择器 <script> //找到既没有文本内容也没有子元素的指定元素 var $div=$('div:empty') console.log($div); //找到有文本内容或者子元素的指定元素 var $div=$('div:parent'); console....
2019-04-26 20:19:33
185
原创 jQuery核心函数和工具方法
jQuery核心函数$()就是jQuery的核心函数 <script> //可以接收一个函数 $(function () { //接收一个字符串选择器 //返回一个jQuery对象 var $div = $('.content'); console....
2019-04-26 20:15:50
114
原创 Mongodb数据库
MongoDB关系型数据库和非关系型数据库表就是关系，或者说 表与表之间存在关系。所有的关系型数据库都需要通过sql语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约数唯一的主键默认值非空非关系型数据库非常的灵活，有的非关系型数据库就是 key-value 对儿。但是 MongoDB 是长得最像关系型数据库的非关系型数据库。MongoDB 不...
2019-04-26 20:11:06
159
原创 Express框架基础
Express简单语法var express = require('express');var app = express();app.get('/', function (req, res) { res.send('hello express');});app.listen(3000, function () { console.log('app is running at po...
2019-04-26 20:08:58
113
原创 Node.js基本原生操作
文件命名不要命名为 node.js操作文件var fs = require('fs');// 读文件// 注意，这里的 './' 相对的是执行 node 命令所处的终端路径// 其实所有文件操作路径中，相对路径都是相对于执行 node 命令所处的终端路径fs.readFile('./book.txt', function (error, data) { console....
2019-04-26 20:06:58
176
原创 requireJS 路径解析问题
requirejs 路径解析问题在requirejs的模块路径解析里，baseUrl是非常基础的概念。简单的说，baseUrl指定了一个目录，然后requirejs基于这个目录来寻找依赖的模块。举个例子，在00.html里加载requirejs，同时在requirejs所在的script上声明data-main属性，那么requirejs加载下来后，它会做两件事情<script...
2019-03-25 19:35:55
1576
原创 对象、原型和继承
认识对象对象的创建方法1、var obj={};对象字面量/对象直接量（plain Object）2、构造函数：1、系统自带的构造函数 Object()var obj=new Object2、自定义构造函数 当函数前面加上new时此函数就成了构造函数 必须符合大驼峰式命名规则 构造函数同样可以传参function Person(){ t...
2019-03-21 19:19:37
327
原创 闭包
闭包简述闭包的产生如下代码所示：当内部函数被保存到外部时就产生闭包优点：防止污染全局变量缺点：闭包会导致原有作用域链不释放，从而造成内存泄漏function a(){ function b(){ var bbb=234; console.log(aaa); } var aaa=123; return b;}var gl...
2019-03-20 22:34:28
138
原创 Ajax
Ajax简述1、AJAX= Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法3、AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下XMLHttpRequest创建一个XMLHttpRequest对象var xml=new XMLHttpRequ...
2019-03-20 22:32:24
136
原创 JS异步加载和时间线
1、json对象json是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的）json和普通对象的区别在于 json对象中的属性名必须加引号1.1、json对象的方法1、JSON.stringify(obj)作用：能够使一个常规对象转化为json格式的字符串2、JSON.parse(str)作用：能够使一个json格式的字符串转化为...
2019-03-20 22:08:49
240
原创 ES6箭头函数内this指向问题
ES6箭头函数内this指向问题 function foo(){ console.log(this); return function(){ console.log(this); } } var fn=foo.call({name:'zx'});//Obj fn();//window以上代码...
2019-03-14 20:25:58
610
原创 Cookie&sessionStorage&localStorage
cookie是什么？？cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用 document.cookie查看你当前正在浏览的网站的cookie。注意：谷歌不支持本地静态cookie，需要将网页放在tomcat或者其他的服务器目录下访问才可以cookie的设置和修改1、设置cookie值:document.cookie=‘name=va...
2019-03-13 20:59:35
200
1
原创 try catch相关
try–catchtry{ console.log('a'); console.log('b'); console.log(c);}catch(e){//系统会将错误信息放入一个对象中，而这个e就是用于接收对象的 console.log(e.name+':'+e.message);//错误信息对象中的属性}当try{}中代码出现错误时 try中程序终止并直...
2019-03-12 19:07:16
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人