<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[angus.dai的博客]]></title><description><![CDATA[前端工程师]]></description><link>https://blog.youkuaiyun.com/daijun11</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; daijun11]]></copyright><item><title><![CDATA[sequelize的使用]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/106457821</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/106457821</guid><author>daijun11</author><pubDate>Sun, 31 May 2020 17:24:22 +0800</pubDate><description><![CDATA[什么是sequelize？
sequelize是一个orm框架，什么是orm呢？即Object-Relationl Mapping，它的作用是在关系型数据库和对象之间作一个映射，这样，我们在具体的操作数据库的时候，就不需要再去和复杂的SQL语句打交道，只要像平时操作对象一样操作它就可以了。
安装依赖
知道了sequelize是什么，很想在项目中使用起来吧！那接下来开始我们的第一步吧！在项目的根目录运行 npm i mysql2 sequelize -S
创建sequelize连接配置文件
依赖也有了，下面我]]></description><category></category></item><item><title><![CDATA[react-router基础]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957791</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957791</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:50:02 +0800</pubDate><description><![CDATA[hello world
import React from "react"
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

function Index() {
    return &lt;div&gt;index&lt;/div&gt;
}

function List() {
    retur...]]></description><category></category></item><item><title><![CDATA[react基础]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957761</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957761</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:49:28 +0800</pubDate><description><![CDATA[react优势


React主要用于构建UI，通过对DOM的模拟，最大限度地减少与DOM的交互；


组件构建，代码复用


单向的响应数据流，state通过与用户交互来改变状态，props是不变的，通常将父组件设置为state，子组件设置为props；


React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一...]]></description><category></category></item><item><title><![CDATA[使用vue实现吸顶效果]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957725</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957725</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:46:35 +0800</pubDate><description><![CDATA[使用到的知识点
// 获取吸顶元素的dom
let header = this.$refs.header;
// 吸顶元素到top的距离
this.offsetTop = header.offsetTop;
// 元素自身的高度
this.offsetHeight = header.offsetHeight;

// 监听滚动条
window.addEventListener("scroll", ...]]></description><category></category></item><item><title><![CDATA[vue-router学习]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957712</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957712</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:45:45 +0800</pubDate><description><![CDATA[helloworld
&lt;div&gt;
    &lt;div&gt;
        &lt;router-link to="/"&gt;Home&lt;/router-link&gt; |
        &lt;router-link to="/about"&gt;About&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;router-vie...]]></description><category></category></item><item><title><![CDATA[vue插槽]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957685</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957685</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:43:54 +0800</pubDate><description><![CDATA[Vue插槽（vue2.6及以后版本，新版插槽v-slot）
默认插槽
没有名字的插槽
// 父组件
&lt;template&gt;
    &lt;p&gt;默认插槽&lt;/p&gt;
&lt;/template&gt;

// 子组件
&lt;slot&gt;&lt;/slot&gt;

具名插槽
带名字的插槽
// 父组件
&lt;template v-slot:title&gt;
   ...]]></description><category></category></item><item><title><![CDATA[vue组件通信之sync学习]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957622</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957622</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:41:53 +0800</pubDate><description><![CDATA[sync其实是一种语法糖，可以很简单的使用子组件与父组件的通信
知识点：
当子组件想要修改父组件数据时，只用使用 this.$emit('update:dataName', dataValue)这种方式去通知父组件，父组件上不需要做任何操作。
下面上代码
父组件
&lt;template&gt;
  &lt;div&gt;
    &lt;div&gt;父组件中 {{ name }}&lt;/di...]]></description><category></category></item><item><title><![CDATA[vue插件学习]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957307</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957307</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:19:02 +0800</pubDate><description><![CDATA[vue的插件通常是用来添加全局功能，
插件按功能分一般有：

1、添加全局方法或属性
2、添加全局属性：指令、过滤器、过渡
3、通过全局混入来添加一些组件选项
4、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现

使用插件
1、使用import引入插件
2、Vue.use(插件名称)

开发插件
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个...]]></description><category></category></item><item><title><![CDATA[计算属性vs方法]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957280</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957280</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:17:14 +0800</pubDate><description><![CDATA[计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
而每当触发重新渲染时，调用方法总会再次执行函数。

&lt;div&gt;计算属性方式：{{ reveres1 }}&lt;/div&gt;
&lt;div&gt;方法方式：{{ reveresMethod2() }}&lt;/div&gt;
&lt;button @click="() =&gt; $for...]]></description><category></category></item><item><title><![CDATA[计算属性VS侦听器]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957155</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957155</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:14:20 +0800</pubDate><description><![CDATA[区别
计算属性（computed）:
改变一个或多个响应式元素的值，去修改一个响应式元素的值
侦听器（watch）:
改变一个响应式元素的值，去修改多个响应式元素的值
实例
&lt;div&gt;
    &lt;input v-model="firstName" /&gt;
    &lt;br /&gt;
    &lt;input v-model="lastName" /&gt;
    &...]]></description><category></category></item><item><title><![CDATA[vuex学习]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105957127</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105957127</guid><author>daijun11</author><pubDate>Wed, 06 May 2020 19:06:44 +0800</pubDate><description><![CDATA[使用vuex也有一段时间了，今天总结一下vuex的使用
vuex有5个核心概念state ``````getter``````mutation``````action``````module

state
this.$store.state.xxx
或者使用mapState

getter
this.$store.getters.xxx
或者使用mapGetter

mutation
this....]]></description><category></category></item><item><title><![CDATA[vue中key的作用]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105936106</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105936106</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:49:10 +0800</pubDate><description><![CDATA[我们先看一下vue官方文档中对key的介绍

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

其实看完这段文档就大概知道key到底有什么用了，v...]]></description><category></category></item><item><title><![CDATA[vue缓存机制之动态keep-alive]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105936056</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105936056</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:45:59 +0800</pubDate><description><![CDATA[使用keep-alive包裹动态组件时，会缓存不活动的组件。但是有些情况下希望使用keep-alive包裹的动态组件有些页面需要缓存，有些页面不需要缓存那该怎么做呢？
vue的官方文档提供了include和exclude来解决这个问题。

具体案例

但是，还是解决不了一些特殊的问题：如
一. 用户前进时，总是进入新的页面。（比如在合同列表页反复加载多次列表之后，进入其中一个合同详情，再返回时，应...]]></description><category></category></item><item><title><![CDATA[vue过滤器]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105936014</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105936014</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:43:52 +0800</pubDate><description><![CDATA[Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
&lt;!-- 在双花括号中 --&gt;
{{ message | capitalize }}

&lt;!-- 在 `v-bind` 中 --&gt;
&l...]]></description><category></category></item><item><title><![CDATA[vuex helloWorld]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105935975</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105935975</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:42:53 +0800</pubDate><description><![CDATA[1、使用前需要在项目中安装一下vuex
npm install vuex --save  或  cnpm install vuex --save

2、需要了解一下vuex是什么以及vuex提出的几个概念


(1)、vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。


(...]]></description><category></category></item><item><title><![CDATA[vue计算属性、侦听器、插槽]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105935909</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105935909</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:37:40 +0800</pubDate><description><![CDATA[计算属性（computed）
计算结果并返回，只有当被计算的值发生改变时才会触发
(即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)
主要用于处理计算逻辑比较复杂的运算，计算属性默认只有getter方法，如果需要你也可以加一个setter方法
computed: {
  fullName: {
    // getter
    get: function () {
      ...]]></description><category></category></item><item><title><![CDATA[vue中的prop]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105935870</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105935870</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:36:23 +0800</pubDate><description><![CDATA[学习vue有一段时间了，也写了一些东西。今天看文档突然看到了一个好玩的东西，那就是prop。prop的作用是父组件中引用了子组件并给子组件加了一个属性，这个属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象。接下来就展示改怎么用。
传静态的属性
子组件：
&lt;template&gt;
  &lt;div&gt;
    &lt;h1&gt;{{ msg }}&l...]]></description><category></category></item><item><title><![CDATA[vue中ref的作用]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105935839</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105935839</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:34:14 +0800</pubDate><description><![CDATA[vue中的ref其实功能很强大，下面介绍一下如何使用。
基本用法，本页面获取dom元素
&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;div ref="testDom"&gt;11111&lt;/div&gt;
    &lt;button @click="getTest"&gt;获取test节点&lt;/button&gt;
  &lt;/div...]]></description><category></category></item><item><title><![CDATA[vue组件传参]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105935803</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105935803</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:32:27 +0800</pubDate><description><![CDATA[父子组件通信
1、父组件给子组件传递数据，请查看下面这篇文章 vue中的prop
2、子组件给父组件传递数据（一般不推荐）
需要借助 emit 事件，可以传递数据和调用父组件的方法


兄弟组件通信
兄弟组件之间的通行需要借助第三方，如bus.js
bus.js
import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

expo...]]></description><category></category></item><item><title><![CDATA[防抖]]></title><link>https://blog.youkuaiyun.com/daijun11/article/details/105935723</link><guid>https://blog.youkuaiyun.com/daijun11/article/details/105935723</guid><author>daijun11</author><pubDate>Tue, 05 May 2020 17:26:33 +0800</pubDate><description><![CDATA[原理
防抖的原理是：你尽管触发事件，但是我一定要在事件触发n秒之后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后再执行。总之，就是要等到你触发完事件n秒内不再触发事件，我才执行。
案例
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-cmn-Hans"&gt;
&lt;head&gt;
    &lt;meta charse...]]></description><category></category></item></channel></rss>