Sweet_HaoChen-CSDN博客

原创 javascript——this的用法

当调用函数的时候，this参数也将默认的传递给函数。this参数代表函数调用的时候相关联的对象。被称为函数的上下文。一般，调用函数有以下4中形式：作为一个函数——test()直接被调用作为一个方法——obj.test()，关联在一个对象上。作为一个构造函数——new obj，实例化一个新的对象通过函数的apply或者call方法——test.apply(obj)或者test.c...

2018-10-17 19:26:30 330

原创 ES6语法——扩展运算符

一、扩展运算符扩展运算符是三个点（...）。它将一个数组转为用逗号分隔的参数序列。从而能够当作多个参数进行传参。a = [1,2]console.log(add(...a))function add(x,y){ return x + y;}这里如果直接写成add(a)的话，那么给add函数中传入的参数将是一个[1，2]，那么函数就会出错。所以这里医用...将一个数组转换...

2018-10-17 13:02:31 349

原创 javascript原型、原型链的理解

首先先利用常用的一个例子来说明：function Person(){}Person.prototype.name = "Nick";Person.prototype.age = 29;Person.prototype.sayName = function(){ console.log(this.name)}var person1 = new Person();pers...

2018-10-17 00:20:47 226

原创 js面向对象——类的定义

属性类型ECMAScript有两种类型：数据属性和访问器属性一、数据类型数据属性有4个描述行为的特性：[[configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特征。 [[Enumerable]]：表示能否通过for-in循环返回属性。 [[Writeable]]：表示能否修改属性的值。 [[Value]]：表示属性的值。二、访问器属...

2018-10-11 15:20:40 207

原创 js的异步回调机制

首先先要明确一个js调取的准则：同步优先，异步靠边，回调垫底，也就是说，在执行代码的过程中，js会按顺序依次执行同步操作，遇到异步操作或者回调的时候会将对应的事件添加到他们相应的队列中去，不执行，进而继续执行同步操作，等到所有的异步操作执行完毕的时候，再去异步的队列中执行异步操作，之后再又去回调的队列中执行回调的操作。即：同步=》异步=》回调。比如下面这个在网上找到的例子：let a =...

2018-10-11 09:30:55 496

原创 ES6模块化输出和运行

首先先定义一个util1.js函数：export default { a: 100}再定义util2.js函数：export function fn1() { alert('fn1')}export function fn2() { alert('fn2')}在index.js中import刚刚暴露的几个值：import util1 fro...

2018-10-11 02:27:08 416

原创使用CSS3绘制几个常见的图案（三角、箭头）

一、绘制三角形首先先做一个测试深入理解一下盒子模型，主要体会一下height和border-width的用法： #div1{ height: 80px; border-style: solid; border-width: 100px 100px 100px 100px; bor...

2018-10-10 03:01:08 13201

原创 Vue.js——vue-resource用法和axios插件

安装：cnpm install vue-resource --savevue-resource就像jQuery里的$.ajax，用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据。1.getthis.$http.get(url,[option]).then(successCallback, errorCallback)：第一个参数url是请求的地址...

2018-10-09 20:05:56 292

原创 app.use()和express.static()

app.use()是一个中间件，是用来处理用户的任何url请求的，也会处理path下的子路径：app.use("/admin",function(req,res){ res.write(req.originalUrl + "\n"); // /admin/aa/bb/cc/dd res.write(req.baseUrl + "\n"); // /admin...

2018-10-09 01:29:20 693

原创 node.js——express的内容渲染、get和post请求

res.render():● 大多数情况下，渲染内容用res.render()，将会根据views中的模板文件进行渲染。如果不想使用views文件夹，那么可以使用app.set("views","myFile")进行设置成自己想要的文件夹。● 如果想写一个快速测试页，当然可以使用res.send()。send只能用一次，自动设置MIME类型。这个函数将根据内容，自动帮我们设置了Conten...

2018-10-08 22:41:38 755

原创 Vue路由基础

基础知识路由就是根据不同的url地址展示不同的内容或页面。前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前都是通过服务端根据url的不同返回不同的页面实现的。前端路由的优点：用户体验好，不需要每次都从服务器上全部获取，快速展现给用户。缺点：不利于SEO，有可能只有第一张页面能被收录使用浏览器的前进，后退键的时候会重新发送群请求，没有合理的使用缓存。...

2018-10-08 01:39:04 179

原创 webpack4架构的搭建和vue单组件的应用

首先进入安装目录的文件夹，输入npm init初始化package.json：本地安装webpack和webpack-cli：npm install webpack webpack-cli -D//-D是指开发环境需要，上线环境不需要；创建入口文件，配置packet.json进行打包处理在webpack4.0中默认将./src/index.js作为入口，创建./src/inde...

2018-10-07 15:27:36 426

原创 Vue.js——Render函数

createElement构成了Vue Virtual Dom的模板，它有3个参数：String：一个HTML标签，组件选项，或一个函数，必须return上述其中一个Object：一个对应属性的数据对象，可选，可以在template中使用第三个参数是子节点，也是可选参数。以往在template里，都是在组件的标签上使用形容v-bind:class、v-bind:style这样的指令...

2018-09-19 19:30:56 371

原创 Vue.js——slot分发内容

一、作用域父组件模板的内容是在父组件作用域内编译的，子组件模板的内容实在子组件作用域内编译的。二、slot用法单个slot在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot，在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签集他的内容。<body> <div id="app">...

2018-09-17 23:55:01 162

原创 Vue.js计算属性

在Vue应用中，在模板中双向绑定一些数据或表达式。但是表达式如果过长，或者逻辑更为复杂，就会变得臃肿甚至难以阅读和维护，所以在遇到复杂逻辑的时候应该使用计算属性。所有的计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回一个结果即可。<body> <div id...

2018-09-14 11:03:22 166

原创 vue.js学习笔记——表单与v-model

Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据。<div id="app"> <input type="text" v-model="mess"/> <p>您输入的内容是：{{mess}}</p> </div> <scri

2018-09-13 22:14:21 277

原创 vue.js组件——组件通信

组件关系有：父子组件通信、兄弟组件通信、跨级组件通信。一、自定义事件子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件。父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件出发的自定义事件。<div id="app"> <p>总数：{{ total }}</p> <my-c...

2018-09-13 21:32:53 207

原创 vue组件——props的用法

一、组件的全局注册和局部注册<div id="app"> <my-component></my-component></div><script> Vue.component('my-component',{ template:'<div>这是组件的内容</div&am

2018-09-13 17:29:20 960

CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。更重要的是，Flexbox布局方向不可预知，不像常规的布局(块级从上到下，内联从左到右)，而那些常规的适合页面布局，但对于支持大型或者复杂的应用程序就缺乏灵活性。如果常规布局是基于块和内联文本流方向，那么Fl...

2018-09-12 23:02:49 217

原创 Bootstrap 下拉菜单

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。  <nav class="navbar navbar-default" role="navigation"> <div class="contai...

2018-09-12 14:50:46 312

原创 Bootstrap 导航栏

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> &

2018-09-12 14:04:30 198

原创 Bootstrap 网格系统（Grid System）

<div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, in.

2018-09-12 13:29:31 387

原创 Bootstrap 插件设计——Tooltip插件

添加提示工具的方式有两种：通过data属性：只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。通过 JavaScript 触发提示工具（tooltip）： $('#identifier').tooltip(options)提示工具（Toolt...

2018-09-12 00:31:04 239

原创 Bootstrap插件设计——模态对话框

Bootstrap模态对话框不支持模态对话框重叠方式，不能在一个模态对话框里面放置另一个模态对话框。务必将模块对话框放在HTML文档的最高层级内（body标签的直接子元素），以避免影响模态框的显示和使用。  <button class="btn btn-primary btn-lg" data-toggle="modal" da...

2018-09-11 23:46:08 244

原创 node.js学习笔记——模块

1.模块的创建 Node.js提供了exports和require两个对象，其中exports是模块公开的接口，require是用于从外部获取一个模块的接口，即获取模块的exports对象。创建一个ModuleTest.js文件：var name;exports.setname = function(thyName){ name = thyName;}exports...

2018-08-04 21:59:24 603

原创 jQuery自学笔记（二）——事件（二）

复合事件：假设现在有以下代码段：<body><div id="container"> <div id="switcher" class="switcher"> <h3>Style Switcher</h3> <button id="s

2018-07-27 15:51:26 261

转载 jQuery自学笔记（二）——事件（一）

click()click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。dblclick()当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件。...

2018-07-25 09:04:02 150

原创 jQuery学习笔记（一)

windows.onload和$(document).ready():$(document).ready()支持在DOM加载完毕后调用某个函数，不必等待页面中的图像加载。window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready()要比window.onload先加载。CSS选择器的在jQuery中的应用：&l...

2018-07-22 17:47:59 179

Sweet_HaoChen的博客