master

分支 (1)

管理

管理

master

blog
/
index.html

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>农药 - 越来越努力成为更好的自己，却发现自己活成了自己最想嫁的男人的样子。</title><meta name="description" content="一个菜菜前端人员的生活记录 , 农药的博客 , 开发"><meta name="keywords" content="农药的博客 , 前端 , 数据库 , 服务器 , 微信小程序 , 等等"><meta name="author" content="农药"><meta name="copyright" content="农药"><meta name="format-detection" content="telephone=no"><link rel="shortcut icon" href="/blog/./img/favicon.ico"><link rel="stylesheet" href="/blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="canonical" href="http://ny6.gitee.io/blog/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="农药"><meta name="twitter:description" content="一个菜菜前端人员的生活记录 , 农药的博客 , 开发"><meta name="twitter:image" content="https://s2.ax1x.com/2019/11/06/MPulX8.png"><meta property="og:type" content="website"><meta property="og:title" content="农药"><meta property="og:url" content="http://ny6.gitee.io/blog/"><meta property="og:site_name" content="农药"><meta property="og:description" content="一个菜菜前端人员的生活记录 , 农药的博客 , 开发"><meta property="og:image" content="https://s2.ax1x.com/2019/11/06/MPulX8.png"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css"><script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js" defer></script><link rel="preload" href="https://s2.ax1x.com/2019/11/06/MPuzDS.jpg" as="image"><link rel="stylesheet" href="/blog/./css/fontfamily.styl"><script>var GLOBAL_CONFIG = {
  root: '/blog/',
  algolia: {"appId":"845MBVOI4X","apiKey":"452a66ebdc8c11d0ffc5737357bc1a21","indexName":"search","hits":{"per_page":6},"languages":{"input_placeholder":"搜索文章","hits_empty":"找不到您查询的内容:${query}","hits_stats":"找到 ${hits} 条结果，用时 ${time} 毫秒"}},
  localSearch: undefined,
  translate: {"defaultEncoding":2,"translateDelay":0,"cookieDomain":"http://ny6.gitee.io/blog/","msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  highlight_copy: 'true',
  highlight_lang: 'true',
  highlight_shrink: 'false',
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  bookmark: {
    title: '添加书签',
    message_prev: '按',
    message_next: '键将本页加入书签'
  },
  runtime_unit: '天',
  copyright: undefined,
  copy_copyright_js: false

}</script></head><body><div id="header"> <div id="page-header"><span class="pull-left" id="blog_name"><a class="blog_title" id="site-name" href="/blog/">农药</a></span><i class="fa fa-bars fa-fw toggle-menu pull-right close" aria-hidden="true"></i><span class="pull-right menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 前端</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/React/"><i class="fa-fw fa fa-code"></i><span> React</span></a></li><li><a class="site-page" href="/blog/categories/Vue/"><i class="fa-fw fa fa-code"></i><span> Vue</span></a></li><li><a class="site-page" href="/blog/categories/Gatsby/"><i class="fa-fw fa fa-code"></i><span> Gatsby</span></a></li></ul></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 数据库</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/MongoDB/"><i class="fa-fw fa fa-database"></i><span> MongoDB</span></a></li></ul></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 服务器</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/Node/"><i class="fa-fw fa fa-forumbee"></i><span> Node</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/blog/categories/weixin/"><i class="fa-fw fa fa-weixin"></i><span> 微信小程序</span></a></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 绘图</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/Echart/"><i class="fa-fw fa fa-bar-chart"></i><span> Echart</span></a></li></ul></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> Life</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/Music/"><i class="fa-fw fa fa-music"></i><span> Music</span></a></li><li><a class="site-page" href="/blog/categories/Movies/"><i class="fa-fw fa fa-film"></i><span> Movies</span></a></li><li><a class="site-page" href="/blog/categories/Read/"><i class="fa-fw fa fa-book"></i><span> Read</span></a></li><li><a class="site-page" href="/blog/categories/Life/"><i class="fa-fw fa fa-user"></i><span> Life</span></a></li></ul></div><script>document.body.addEventListener('touchstart', function(){ });</script></div></span><span class="pull-right" id="search_button"><a class="site-page social-icon search"><i class="fa fa-search fa-fw"></i><span> 搜索</span></a></span></div></div><div id="mobile-sidebar"><div id="menu_mask"></div><div id="mobile-sidebar-menus"><div class="mobile_author_icon"><img class="lozad avatar_img" src="https://s2.ax1x.com/2019/11/06/MPulX8.png" onerror="onerror=null;src='/blog/img/friend_404.gif'"></div><div class="mobile_post_data"><div class="mobile_data_item is_center"><div class="mobile_data_link"><a href="/blog/archives/"><div class="headline">已发布文章数</div><div class="length_num">25</div></a></div></div><div class="mobile_data_item is_center">     <div class="mobile_data_link"><a href="/blog/categories/"><div class="headline">已有文章分类</div><div class="length_num">11</div></a></div></div></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 前端</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/React/"><i class="fa-fw fa fa-code"></i><span> React</span></a></li><li><a class="site-page" href="/blog/categories/Vue/"><i class="fa-fw fa fa-code"></i><span> Vue</span></a></li><li><a class="site-page" href="/blog/categories/Gatsby/"><i class="fa-fw fa fa-code"></i><span> Gatsby</span></a></li></ul></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 数据库</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/MongoDB/"><i class="fa-fw fa fa-database"></i><span> MongoDB</span></a></li></ul></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 服务器</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/Node/"><i class="fa-fw fa fa-forumbee"></i><span> Node</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/blog/categories/weixin/"><i class="fa-fw fa fa-weixin"></i><span> 微信小程序</span></a></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> 绘图</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/Echart/"><i class="fa-fw fa fa-bar-chart"></i><span> Echart</span></a></li></ul></div><div class="menus_item"><a class="site-page"><i class="fa-fw fa fa-list" aria-hidden="true"></i><span> Life</span><i class="fa fa-chevron-down menus-expand" aria-hidden="true"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/blog/categories/Music/"><i class="fa-fw fa fa-music"></i><span> Music</span></a></li><li><a class="site-page" href="/blog/categories/Movies/"><i class="fa-fw fa fa-film"></i><span> Movies</span></a></li><li><a class="site-page" href="/blog/categories/Read/"><i class="fa-fw fa fa-book"></i><span> Read</span></a></li><li><a class="site-page" href="/blog/categories/Life/"><i class="fa-fw fa fa-user"></i><span> Life</span></a></li></ul></div><script>document.body.addEventListener('touchstart', function(){ });</script></div></div></div><div id="body-wrap"><nav class="full_page" id="nav"><div class="nav_bg" style="background-image: url(https://s2.ax1x.com/2019/11/06/MPuzDS.jpg)"></div><div id="site-info"><div id="site-title"><span class="blogtitle">农药</span></div><div id="site-sub-title"><span class="subtitle"></span></div><div id="site-social-icons"><a class="social-icon" href="https://github.com/wangdongmei666" target="_blank"><i class="fa fa-github"></i></a><a class="social-icon" href="https://gitee.com/ny6" target="_blank"><i class="fa fa-github-alt"></i></a><a class="social-icon" href="https://blog.csdn.net/weixin_39893889" target="_blank"><i class="fa fa-mixcloud"></i></a></div></div><div class="scroll-down"><i class="fa fa-angle-down scroll-down-effects"></i></div></nav><div id="content-outer"><div class="layout_page" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item article-container"><div class="post_cover is_left"><a href="/blog/Vue/%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/" title="递归组件的使用"><img class="post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'"></a></div><div class="recent-post-info">  <a class="article-title" href="/blog/Vue/%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/" title="递归组件的使用">递归组件的使用</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2020-01-02</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/blog/categories/Vue/">Vue</a></span><div class="content">递归组件的使用代码展示(TodoList)12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364&lt;templa ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/blog/Vue/vue%E7%9A%84%E5%8A%A8%E7%94%BB%E5%B0%8F%E7%BB%93/" title="vue的动画小结"><img class="post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'"></a></div><div class="recent-post-info">  <a class="article-title" href="/blog/Vue/vue%E7%9A%84%E5%8A%A8%E7%94%BB%E5%B0%8F%E7%BB%93/" title="vue的动画小结">vue的动画小结</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2019-11-26</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/blog/categories/Vue/">Vue</a></span><div class="content">vue的动画小结多个元素的动画12345678910111213141516171819202122232425262728293031323334353637383940414243444546&lt;template&gt;    &lt;div&gt;        &lt;transitio ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_left"><a href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8js%E5%8A%A8%E7%94%BB%E5%BA%93velocity/" title="在vue项目中使用js动画库velocity"><img class="post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'"></a></div><div class="recent-post-info">  <a class="article-title" href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8js%E5%8A%A8%E7%94%BB%E5%BA%93velocity/" title="在vue项目中使用js动画库velocity">在vue项目中使用js动画库velocity</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2019-11-26</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/blog/categories/Vue/">Vue</a></span><div class="content">在vue项目中使用js动画库velocity在vue中通过js实现动画
在vue中通过js实现动画使用的是vue提供的动画钩子函数。


before-enter：入场动画还未开始执行时
enter：入场动画开始执行
after-enter：入场动画执行结束
before-leave：出场动画还未开 ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8animate-css/" title="在vue项目中使用animate.css"><img class="post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'"></a></div><div class="recent-post-info">  <a class="article-title" href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8animate-css/" title="在vue项目中使用animate.css">在vue项目中使用animate.css</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2019-11-25</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/blog/categories/Vue/">Vue</a></span><div class="content">在vue项目中使用animate.css第一步：安装1cnpm install animate.css --save
第二步：引用并使用在main.js中引用并使用
1234567891011import Vue from 'vue'import App from './App.vue'import ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_left"><a href="/blog/Vue/%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8Ev-once%E6%8C%87%E4%BB%A4/" title="动态组件与v-once指令"><img class="post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'"></a></div><div class="recent-post-info">  <a class="article-title" href="/blog/Vue/%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8Ev-once%E6%8C%87%E4%BB%A4/" title="动态组件与v-once指令">动态组件与v-once指令</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2019-11-22</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/blog/categories/Vue/">Vue</a></span><div class="content">Vue中动态组件与v-once指令动态组件动态组件component会根据is里面的数据变化，自动的加载不同的组件。
v-once指令如果一个组件每一次加载的内容都一样，可在组件上添加v-once指令
代码12345678910111213141516171819202122232425262728 ...</div></div></div><div class="recent-post-item article-container"><div class="post_cover is_right"><a href="/blog/Vue/vue%E4%B8%AD%E6%8F%92%E6%A7%BDslot%E7%9A%84%E4%BD%BF%E7%94%A8/" title="vue中插槽slot的使用"><img class="post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'"></a></div><div class="recent-post-info">  <a class="article-title" href="/blog/Vue/vue%E4%B8%AD%E6%8F%92%E6%A7%BDslot%E7%9A%84%E4%BD%BF%E7%94%A8/" title="vue中插槽slot的使用">vue中插槽slot的使用</a><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2019-11-22</time><span class="article-meta"><span class="article-meta__separator">|</span><i class="fa fa-inbox article-meta__icon" aria-hidden="true"></i><a class="article-meta__categories" href="/blog/categories/Vue/">Vue</a></span><div class="content">vue中插槽slot的使用插槽的产生原因当子组件有一部分内容需要根据父组件传递过来的dom进行显示（且内容很多）时，可通过使用slot进行解决，具体原因可见如下代码。
123456789101112131415161718192021222324252627282930313233343536373 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/blog/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/blog/page/5/">5</a><a class="extend next" rel="next" href="/blog/page/2/"><i class="fa fa-chevron-right"></i></a></div></nav></div><div class="aside_content" id="aside_content"><div class="card_widget card-author"><div class="card-content"><div class="post_data"><div class="data-item is_center"><img class="lozad avatar_img" src="https://s2.ax1x.com/2019/11/06/MPulX8.png" onerror="onerror=null;src='/blog/img/friend_404.gif'"><p class="author-info__name is_center">农药</p><p class="author-info__description is_center">一个菜菜前端人员的生活记录 , 农药的博客 , 开发</p></div></div><div class="post_data data_config"><div class="data-item is_center"><div class="data_link"><a href="/blog/archives/"><p class="headline">已发布文章数</p><p class="length_num">25</p></a></div></div><div class="data-item is_center">     <div class="data_link"><a href="/blog/categories/"><p class="headline">已有文章分类</p><p class="length_num">11</p></a></div></div></div><div class="post_data data_config"><div id="aside-social-icons"> <div id="wdm-tit">社区地址</div><a class="social-icon data-item" href="https://github.com/wangdongmei666" target="_blank"><i class="fa fa-github"></i></a><a class="social-icon data-item" href="https://gitee.com/ny6" target="_blank"><i class="fa fa-github-alt"></i></a><a class="social-icon data-item" href="https://blog.csdn.net/weixin_39893889" target="_blank"><i class="fa fa-mixcloud"></i></a></div></div></div></div><div class="card_widget card-recent-post"><div class="card-content"><div class="item_headline"><i class="fa fa-history" aria-hidden="true"></i><span>最新文章</span></div><div class="aside_recent_item"><div class="aside_recent_post"><a href="/blog/Vue/%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/"><div class="aside_post_cover"><img class="aside_post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" title="递归组件的使用"></div><div id="aside_title"><div class="aside_post_title" href="/blog/Vue/%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/" title="递归组件的使用">递归组件的使用</div><time class="aside_post_meta post-meta__date">2020-01-02</time></div></a></div><div class="aside_recent_post"><a href="/blog/Vue/vue%E7%9A%84%E5%8A%A8%E7%94%BB%E5%B0%8F%E7%BB%93/"><div class="aside_post_cover"><img class="aside_post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" title="vue的动画小结"></div><div id="aside_title"><div class="aside_post_title" href="/blog/Vue/vue%E7%9A%84%E5%8A%A8%E7%94%BB%E5%B0%8F%E7%BB%93/" title="vue的动画小结">vue的动画小结</div><time class="aside_post_meta post-meta__date">2019-11-26</time></div></a></div><div class="aside_recent_post"><a href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8js%E5%8A%A8%E7%94%BB%E5%BA%93velocity/"><div class="aside_post_cover"><img class="aside_post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" title="在vue项目中使用js动画库velocity"></div><div id="aside_title"><div class="aside_post_title" href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8js%E5%8A%A8%E7%94%BB%E5%BA%93velocity/" title="在vue项目中使用js动画库velocity">在vue项目中使用js动画库velocity</div><time class="aside_post_meta post-meta__date">2019-11-26</time></div></a></div><div class="aside_recent_post"><a href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8animate-css/"><div class="aside_post_cover"><img class="aside_post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" title="在vue项目中使用animate.css"></div><div id="aside_title"><div class="aside_post_title" href="/blog/Vue/%E5%9C%A8vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8animate-css/" title="在vue项目中使用animate.css">在vue项目中使用animate.css</div><time class="aside_post_meta post-meta__date">2019-11-25</time></div></a></div><div class="aside_recent_post"><a href="/blog/Vue/%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8Ev-once%E6%8C%87%E4%BB%A4/"><div class="aside_post_cover"><img class="aside_post_bg lozad" data-src="https://s2.ax1x.com/2019/11/07/MkZpBF.jpg" onerror="onerror=null;src='/blog/img/404.jpg'" title="动态组件与v-once指令"></div><div id="aside_title"><div class="aside_post_title" href="/blog/Vue/%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8Ev-once%E6%8C%87%E4%BB%A4/" title="动态组件与v-once指令">动态组件与v-once指令</div><time class="aside_post_meta post-meta__date">2019-11-22</time></div></a></div></div></div></div><div class="card_widget card-categories"><div class="card-content"><div class="item_headline"><i class="fa fa-folder-open" aria-hidden="true"></i><span>分类专栏</span></div><ul class="aside_category_item">       <li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Echart/"><span class="aside_category_list_name">Echart</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Gatsby/"><span class="aside_category_list_name">Gatsby</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Life/"><span class="aside_category_list_name">Life</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/MongoDB/"><span class="aside_category_list_name">MongoDB</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Movies/"><span class="aside_category_list_name">Movies</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Music/"><span class="aside_category_list_name">Music</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Node/"><span class="aside_category_list_name">Node</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/React/"><span class="aside_category_list_name">React</span><span class="aside_category_list_length">2</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Read/"><span class="aside_category_list_name">Read</span><span class="aside_category_list_length">1</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/Vue/"><span class="aside_category_list_name">Vue</span><span class="aside_category_list_length">13</span></a></li><li class="aside_category_list"><a class="aside_category_list_link" href="/blog/categories/weixin/"><span class="aside_category_list_name">weixin</span><span class="aside_category_list_length">1</span></a></li></ul></div></div><div class="card_widget card-archives"><div class="card-content"><div class="item_headline"><i class="fa fa-archive" aria-hidden="true"></i><span>成长记录</span></div><div class="archives_item"><ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/01/">2020年01月<span class="archive-list-count">1</span></a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/11/">2019年11月<span class="archive-list-count">24</span></a></li></ul></div></div></div><div class="card_widget card-webinfo"><div class="card-content"><div class="item_headline"><i class="fa fa-line-chart" aria-hidden="true"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo_item"><div class="webinfo_article_name">现有文章数 :</div><div class="webinfo_article_count">25</div></div><div class="webinfo_item"><div class="webinfo_runtime_name">网站运行时间 :</div><div class="webinfo_runtime_count" id="webinfo_runtime_count"></div><script id="runtionshow" src="/blog/js/runtimeshow.js" start_date="11/1/2019 00:00:00">      </script></div><div class="webinfo_item">      <div class="webinfo_site_uv_name">访问用户数 :</div><div class="webinfo_site_uv_count" id="busuanzi_value_site_uv"></div></div><div class="webinfo_item"><div class="webinfo_site_name">页面访问量 :</div><div class="webinfo_site_pv_count" id="busuanzi_value_site_pv"></div></div></div></div></div></div></div></div><footer><div id="footer"><div class="copyright">&copy;2019 - 2020 By 农药</div><div class="framework-info"><span>框架 </span><a href="http://hexo.io" target="_blank" rel="noopener"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 </span><a href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" rel="noopener"><span>Butterfly</span></a></div></div></footer></div><section class="rightside" id="rightside"><div id="rightside-config-hide"><i class="fa fa-plus" id="font_plus" title="放大字体"></i><i class="fa fa-minus" id="font_minus" title="缩小字体"></i><a class="translate_chn_to_cht" id="translateLink" href="javascript:translatePage();" title="简繁字体切换">简</a><i class="nightshift fa fa-moon-o" id="nightshift" title="夜间模式"></i></div><div id="rightside-config-show"><div id="rightside_config" title="设置"><i class="fa fa-cog" aria-hidden="true"></i></div><i class="fa fa-arrow-up" id="go-up" title="回到顶部" aria-hidden="true"></i></div></section><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script><script src="/blog/js/utils.js"></script><script src="/blog/js/main.js"></script><script async src="/blog/js/search/algolia.js"></script><script src="/blog/js/nightshift.js"></script><script id="ribbon" src="/blog/js/third-party/canvas-ribbon.js" size="150" alpha="0.6" zIndex="-1" data-click="true"></script><script id="ribbon" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/js/piao.js"></script><script src="/blog/js/tw_cn.js"></script><script>translateInitilization()

</script><script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9">   </script><script>var typed = new Typed(".subtitle", {
strings: '越来越努力成为更好的自己，却发现自己活成了自己最想嫁的男人的样子。'.split(","),
startDelay: 300,
typeSpeed: 100,
loop: true,
backSpeed: 50
});
</script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script><script>const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();
</script><script>//首頁fullpage
function alignContent() {
  for (var n = $(window).height(), e = document.querySelectorAll(".full_page"), i = 0; i < e.length; i++)
    e[i].style.height = n + "px";
    $("#site-info").each(function () {
      var x = $(this).height();
      $(this).css("top", (n-x)/2)
    })
}
alignContent();

$(window).bind("resize", function () {
  alignContent()
})</script><div class="search-dialog" id="algolia-search"><div class="search-dialog__title" id="algolia-search-title">Algolia</div><div id="algolia-input-panel"><div id="algolia-search-input"></div></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-stats"></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>