- 博客(41)
- 收藏
- 关注
RSS订阅原创 sequelize的使用
什么是sequelize？sequelize是一个orm框架，什么是orm呢？即Object-Relationl Mapping，它的作用是在关系型数据库和对象之间作一个映射，这样，我们在具体的操作数据库的时候，就不需要再去和复杂的SQL语句打交道，只要像平时操作对象一样操作它就可以了。安装依赖知道了sequelize是什么，很想在项目中使用起来吧！那接下来开始我们的第一步吧！在项目的根目录运行 npm i mysql2 sequelize -S创建sequelize连接配置文件依赖也有了，下面我
2020-05-31 17:24:22
2778
原创 react-router基础
hello worldimport React from "react"import { BrowserRouter as Router, Route, Link } from "react-router-dom"function Index() { return <div>index</div>}function List() { retur...
2020-05-06 19:50:02
154
原创 react基础
react优势React主要用于构建UI，通过对DOM的模拟，最大限度地减少与DOM的交互；组件构建，代码复用单向的响应数据流，state通过与用户交互来改变状态，props是不变的，通常将父组件设置为state，子组件设置为props；React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一...
2020-05-06 19:49:28
219
原创 使用vue实现吸顶效果
使用到的知识点// 获取吸顶元素的domlet header = this.$refs.header;// 吸顶元素到top的距离this.offsetTop = header.offsetTop;// 元素自身的高度this.offsetHeight = header.offsetHeight;// 监听滚动条window.addEventListener("scroll", ...
2020-05-06 19:46:35
2340
1
原创 vue-router学习
helloworld<div> <div> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-vie...
2020-05-06 19:45:45
243
原创 vue插槽
Vue插槽（vue2.6及以后版本，新版插槽v-slot）默认插槽没有名字的插槽// 父组件<template> <p>默认插槽</p></template>// 子组件<slot></slot>具名插槽带名字的插槽// 父组件<template v-slot:title> ...
2020-05-06 19:43:54
69
原创 vue组件通信之sync学习
sync其实是一种语法糖，可以很简单的使用子组件与父组件的通信知识点：当子组件想要修改父组件数据时，只用使用 this.$emit('update:dataName', dataValue)这种方式去通知父组件，父组件上不需要做任何操作。下面上代码父组件<template> <div> <div>父组件中 {{ name }}</di...
2020-05-06 19:41:53
339
原创 vue插件学习
vue的插件通常是用来添加全局功能，插件按功能分一般有：1、添加全局方法或属性2、添加全局属性：指令、过滤器、过渡3、通过全局混入来添加一些组件选项4、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现使用插件1、使用import引入插件2、Vue.use(插件名称)开发插件Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个...
2020-05-06 19:19:02
137
原创 计算属性vs方法
计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。而每当触发重新渲染时，调用方法总会再次执行函数。<div>计算属性方式：{{ reveres1 }}</div><div>方法方式：{{ reveresMethod2() }}</div><button @click="() => $for...
2020-05-06 19:17:14
153
原创 计算属性VS侦听器
区别计算属性（computed）:改变一个或多个响应式元素的值，去修改一个响应式元素的值侦听器（watch）:改变一个响应式元素的值，去修改多个响应式元素的值实例<div> <input v-model="firstName" /> <br /> <input v-model="lastName" /> &...
2020-05-06 19:14:20
140
原创 vuex学习
使用vuex也有一段时间了，今天总结一下vuex的使用vuex有5个核心概念state ``````getter``````mutation``````action``````modulestatethis.$store.state.xxx或者使用mapStategetterthis.$store.getters.xxx或者使用mapGettermutationthis....
2020-05-06 19:06:44
111
原创 vue中key的作用
我们先看一下vue官方文档中对key的介绍key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。其实看完这段文档就大概知道key到底有什么用了，v...
2020-05-05 17:49:10
528
原创 vue缓存机制之动态keep-alive
使用keep-alive包裹动态组件时，会缓存不活动的组件。但是有些情况下希望使用keep-alive包裹的动态组件有些页面需要缓存，有些页面不需要缓存那该怎么做呢？vue的官方文档提供了include和exclude来解决这个问题。具体案例但是，还是解决不了一些特殊的问题：如一. 用户前进时，总是进入新的页面。（比如在合同列表页反复加载多次列表之后，进入其中一个合同详情，再返回时，应...
2020-05-05 17:45:59
207
原创 vue过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 -->&l...
2020-05-05 17:43:52
103
原创 vuex helloWorld
1、使用前需要在项目中安装一下vuexnpm install vuex --save 或 cnpm install vuex --save2、需要了解一下vuex是什么以及vuex提出的几个概念(1)、vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(...
2020-05-05 17:42:53
147
原创 vue计算属性、侦听器、插槽
计算属性（computed）计算结果并返回，只有当被计算的值发生改变时才会触发(即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)主要用于处理计算逻辑比较复杂的运算，计算属性默认只有getter方法，如果需要你也可以加一个setter方法computed: { fullName: { // getter get: function () { ...
2020-05-05 17:37:40
392
原创 vue中的prop
学习vue有一段时间了，也写了一些东西。今天看文档突然看到了一个好玩的东西，那就是prop。prop的作用是父组件中引用了子组件并给子组件加了一个属性，这个属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象。接下来就展示改怎么用。传静态的属性子组件：<template> <div> <h1>{{ msg }}&l...
2020-05-05 17:36:23
278
原创 vue中ref的作用
vue中的ref其实功能很强大，下面介绍一下如何使用。基本用法，本页面获取dom元素<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div...
2020-05-05 17:34:14
213
原创 vue组件传参
父子组件通信1、父组件给子组件传递数据，请查看下面这篇文章 vue中的prop2、子组件给父组件传递数据（一般不推荐）需要借助 emit 事件，可以传递数据和调用父组件的方法兄弟组件通信兄弟组件之间的通行需要借助第三方，如bus.jsbus.jsimport Vue from 'vue';// 使用 Event Busconst bus = new Vue();expo...
2020-05-05 17:32:27
154
原创 防抖
原理防抖的原理是：你尽管触发事件，但是我一定要在事件触发n秒之后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后再执行。总之，就是要等到你触发完事件n秒内不再触发事件，我才执行。案例<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charse...
2020-05-05 17:26:33
936
原创 什么是mvvm
mvvm是model-view-viewModel的简写，即模型-视图-视图模型。模型指后端传递的数据。视图指的是所看到的页面。视图模型是mvvm的核心，他是连接view和model的桥梁。 它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM...
2020-05-05 17:25:54
466
原创 js进阶小知识
关于函数名和var声明的变量名相同的情况function a() { console.log(10);}var a;console.log(a); // 打印 a() 函数的函数体a(); // 10a = 3;1、函数和var声明的变量作用域会发生提升2、han’shu提升会优先与变量提升3、如果函数和变量名一样，并且变量没有被赋值，则函数生效...
2020-05-05 17:24:11
151
原创 js遍历对象
方式一var obj = {'0':'a','1':'b','2':'c'};for(var i in obj) { console.log(i,":",obj[i]);}方式二var obj = {'0':'a','1':'b','2':'c'};Object.keys(obj).forEach(key => { console.log(key,obj[key])...
2020-05-05 17:22:01
118
原创 js数组去重
使用set进行简单去重let arr = [1, 1, 2, 3, 3, 5, 5, 3]let set = new Set();arr.forEach(val => { set.add(val)})console.log("arr: ", arr); // 1, 1, 2, 3, 3, 5, 5, 3console.log("set: ", set); // 1, ...
2020-05-05 17:20:48
101
原创 js类型判断
基本数据类型用typeofvar a = "test";console.log(typeof(a)); // string复合类型用instanceof和constructorvar b = new Date();console.log(b instanceof Date); // trueconsole.log(b.constructor === Date); /...
2020-05-05 17:18:12
136
原创 引用赋值、浅拷贝、深拷贝
引用类型赋值只是改变了指针的指向，值会跟着一起变化引用类型浅拷贝复制一层对象的属性，并不包括对象里面的为引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变。浅拷贝的实现方式一：// 只复制第一层的浅拷贝function simpleCopy(obj1) { var obj2 = Array.isArray(obj1) ? [] : {}; for (le...
2020-05-05 17:12:33
376
原创 js设计模式
单例模式单例模式也称作为单子模式，单体模式。单例模式的定义是产生一个类的唯一实例，是软件设计中较为简单但是很常用的一种设计模式。单例模式的核心是确保只有一个实例，并提供全局访问工厂模式把实现同一件事情的相同代码放到同一个函数中，以后如果再想实现这个功能，只需要调用这个函数就可以了，提高代码的重复利用率function createFactory(name, age) { let ...
2020-05-05 17:11:05
82
原创 js判断对象中是否包含某个属性
方法一（in）有返回true，否者返回falsevar obj = { name: 'dj', age: 18}console.log('name' in obj) // trueconsole.log('eat' in obj) // false方法二（hasOwnProperty）有返回true，否者返回falsevar obj = { name:...
2020-05-05 17:09:22
3964
1
原创 table布局
使用场景<table> 最常用的也是最正确的使用方法是制作表格，由于其对占据的空间有着划分的作用，便可以使用<table> 来布局。使用<table border="1" cellspacing="0" cellpadding="0" style="width: 100%;"> <tr> <td>1</...
2020-05-05 17:05:49
380
原创 flex布局
什么是flex使用flex的元素就叫做容器，容器默认存在2条轴线，主轴线（main axis)和垂直的交叉轴线(cross axis)。轴线开始的位置被叫做main/cross start，结束的位置被叫做main/cross end。项目是沿着主轴线开始、结束方向排列的。知识点1、flex-direction设置容器的主轴方向和主轴的起点flex-direction: row; ...
2020-05-05 16:57:09
120
原创 浮动定位及清除浮动
浮动定位我们在写页面的时候会经常使用浮动定位 <div class="container"> <div class="item"></div> <div>Pea horseradish azuki bean lettuce avocado asparagus okra.</div> </div>.co...
2020-05-05 16:52:59
848
原创 transition和animation的区别
1、transition 需要去触发比如：点击事件、鼠标移入事件；而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画2、transition 触发一次播放一次；而 animation 则是可以设置很多的属性，比如循环次数，动画结束的状态等等；3、transition关注的是样式属性的变化，属性值和时间的关系是一个三次贝塞尔曲线；而animation作用于元素本...
2020-05-05 16:38:39
236
原创 css动画之animation
语法：animation-name 指定要绑定到选择器的关键帧的名称animation-duration 动画指定需要多少秒或毫秒完成animation-timing-function 设置动画将如何完成一个周期linear（从开始到结束速度一致）| ease（默认。动画以低速开始，然后加快，在结束前变慢。）| ea...
2020-05-05 16:30:12
162
原创 css动画之transform
1、translate（平移）<div class="box"></div> .box { width: 200px; height: 200px; background-color: #9198e5; margin: 30px auto; transform: translate(300px); ...
2020-05-05 16:25:47
237
原创 position定位详解
css中有三种定位：static、fixed、relative、absolutestatic是正常定位fixed 为固定定位 相对于浏览器窗口进行定位relative为 相对定位，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留absolute为绝对定位，相对于static定位以外的第一个有定位的祖先元素进行定位<div class="header">haha&l...
2020-05-05 16:20:05
681
原创 vue css深度选择器
使用scoped后，父组件的样式将不会渗透到子组件如果想在使用了scoped不污染全局样式的情况下，依然可以修改子组件的样式，可以使用深度选择器。对第三方组件也起作用哦！在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep.nav-theme-dark >>> .logo { color: #fff; backg...
2020-05-05 16:13:57
1682
原创 实现左侧内容滚动，右侧固定的布局
背景现在有很多网页的布局都分为头部、内容、尾部三部分，其中内容模块又是左侧比较多，右侧内容比较少。在页面滚动时，内容右侧在滚动到看不见头部的时候就固定住，继续滚动时位置也不再发生改变。效果图这种布局看上去很酷，其实实现起来也很简单，下面我就用jq来实现这种布局。上代码先把html和css布局代码直接给出来<!-- 头部 --><header class="hea...
2020-05-05 14:56:53
2169
2
原创 vue学习系列-核心内容
hello world改造我们上一节创建好的项目App.vue<template> <div id="app"> <HelloWorld /> </div></template><script>import HelloWorld from './components/HelloWorld.vue'...
2020-03-07 17:05:23
100
原创 vue学习系列-初始化项目
vue是一套用于构建用户界面的渐进式框架，可以快速上手。在这里我们使用vue-cli来进行vue学习。在使用vue-cli前，你需要先安装nodejs和对nodejs的npm的一些命令进行学习。安装nodejswindow上安装nodejs直接去 nodejs官网 进行下载mac上安装nodejsmac上可以先安装brewhome，然后使用brewhome下载nodejsbrew in...
2020-03-06 22:27:13
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人