![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
金胜涛
这个作者很懒,什么都没留下…
展开
-
Vue学习之transition实现过渡效果
先来一个简单的栗子如下代码,假设不使用transition,那么我们得到的效果就是一个简单的显示与隐藏之间的切换。在加入了transition之后,这个显示与隐藏就有了“过程”。首先当点击按钮隐藏的时候,会有两个class被附加到transition上并依次执行,分别是.v-leave和.v-leave-to,前者代表“出场前”的状态,后者代表“出场后”的状态。当再次点击按钮显示的时候,同...原创 2019-12-17 11:15:20 · 592 阅读 · 0 评论 -
Vue学习之transition-group列表过渡组件复用
如下代码,本质上就是将transition-group作为根组件,内部使用slot插槽。代码中使用到的Velocity是一个高性能的动画库使用方式为Velocity(元素节点,css样式,配置项)配置项详情可参考Velocity.js中文文档Vue.component('demo-component', { template: ` <transition-group...原创 2019-12-17 10:27:11 · 490 阅读 · 0 评论 -
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 · 272 阅读 · 0 评论 -
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 · 144 阅读 · 0 评论 -
配置webpack不打包第三方包
通常情况下我们不打包第三方包,因为第三方包太大,和bundle打包到一起会造成资源体积过大,所以我们还是通过script标签的方式把第三方资源引入到页面中,只需要通过以下配置即可,这里以jQuery为例。1、下载第三方包npm i jquery2、在页面中引入资源<!--注意 这里的路径以最终的index.html文件位置为准--> <script src="....原创 2019-05-06 21:25:16 · 5445 阅读 · 1 评论 -
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 · 706 阅读 · 0 评论 -
webpack——输出管理及打包单文件组件
HtmlWebpackPlugin你会发现,当你打包结束的时候,如果index.html在根目录直接运行的话,那么图片资源这些路径就无法访问到了。解决方案是把index.html放入dist目录中,但是dist是打包编译的结果而非源码,所以把index.html放到dist中就不合适,而且你也会发现,我们打包的结果文件名:bundle.js,如果我把这个文件名改了,则index.html也要手动...原创 2019-05-06 21:29:03 · 984 阅读 · 0 评论 -
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 · 443 阅读 · 0 评论 -
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 · 331 阅读 · 0 评论 -
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 · 160 阅读 · 0 评论 -
BOM简述
BOM 1、BOM 包括了所有的JS对象 ,是一个对象集合群 2、在JS中最大的对象是window对象 3、全局的也是相对window来说的;也就是说全局的东西,其他地方都可以访 问 4、学习DOM目的:进一步熟悉JS 是怎么在浏览器这个平台进行运行的 5、这里需要更加了解浏览器的一些功能window下六大对象...原创 2019-05-07 09:20:21 · 348 阅读 · 0 评论 -
作用域链简述
[[scope]]:作用域这是函数的一个属性,系统能访问而我们不能访问,里面存放的是函数的执行期上下文(也就是AO和GO对象);function a(){ function b(){ function c(){ } c(); } b();}a();当函数a定义时--------->...原创 2019-05-07 09:22:01 · 230 阅读 · 0 评论 -
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 · 234 阅读 · 0 评论 -
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 · 428 阅读 · 0 评论 -
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 · 113 阅读 · 0 评论 -
闭包
闭包简述闭包的产生如下代码所示:当内部函数被保存到外部时就产生闭包优点:防止污染全局变量缺点:闭包会导致原有作用域链不释放,从而造成内存泄漏function a(){ function b(){ var bbb=234; console.log(aaa); } var aaa=123; return b;}var gl...原创 2019-03-20 22:34:28 · 112 阅读 · 0 评论 -
对象、原型和继承
认识对象对象的创建方法1、var obj={};对象字面量/对象直接量(plain Object)2、构造函数:1、系统自带的构造函数 Object()var obj=new Object2、自定义构造函数 当函数前面加上new时此函数就成了构造函数 必须符合大驼峰式命名规则 构造函数同样可以传参function Person(){ t...原创 2019-03-21 19:19:37 · 277 阅读 · 0 评论 -
requireJS 路径解析问题
requirejs 路径解析问题在requirejs的模块路径解析里,baseUrl是非常基础的概念。简单的说,baseUrl指定了一个目录,然后requirejs基于这个目录来寻找依赖的模块。举个例子,在00.html里加载requirejs,同时在requirejs所在的script上声明data-main属性,那么requirejs加载下来后,它会做两件事情<script...原创 2019-03-25 19:35:55 · 1496 阅读 · 0 评论 -
Node.js基本原生操作
文件命名不要命名为 node.js操作文件var fs = require('fs');// 读文件// 注意,这里的 './' 相对的是执行 node 命令所处的终端路径// 其实所有文件操作路径中,相对路径都是相对于执行 node 命令所处的终端路径fs.readFile('./book.txt', function (error, data) { console....原创 2019-04-26 20:06:58 · 149 阅读 · 0 评论 -
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 · 83 阅读 · 0 评论 -
Mongodb数据库
MongoDB关系型数据库和非关系型数据库表就是关系,或者说 表与表之间存在关系。所有的关系型数据库都需要通过sql语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约数唯一的主键默认值非空非关系型数据库非常的灵活,有的非关系型数据库就是 key-value 对儿。但是 MongoDB 是长得最像关系型数据库的非关系型数据库。MongoDB 不...原创 2019-04-26 20:11:06 · 131 阅读 · 0 评论 -
jQuery核心函数和工具方法
jQuery核心函数$()就是jQuery的核心函数 <script> //可以接收一个函数 $(function () { //接收一个字符串选择器 //返回一个jQuery对象 var $div = $('.content'); console....原创 2019-04-26 20:15:50 · 90 阅读 · 0 评论 -
jQuery属性操作
jQuery内容选择器 <script> //找到既没有文本内容也没有子元素的指定元素 var $div=$('div:empty') console.log($div); //找到有文本内容或者子元素的指定元素 var $div=$('div:parent'); console....原创 2019-04-26 20:19:33 · 160 阅读 · 0 评论 -
jQuery节点操作
jQuery添加节点<script> //创建节点 var $li = $('<li>我是新的li</li>') //添加节点 $('button').click(function () { //在ul内部的最后添加li 两种写法 // $('ul').append($li); ...原创 2019-04-26 20:21:12 · 115 阅读 · 0 评论 -
jQuery事件相关
jQuery事件绑定<body> <button></button> <script> /**jQuery中有两种事件绑定的方式 * 1、eventName(fn) * 编码效率略高/部分事件jQuery没有实现,所以不能添加 * 2、on(eventName,f...原创 2019-04-26 20:22:56 · 120 阅读 · 0 评论 -
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 · 195 阅读 · 0 评论