mirror of
https://github.com/JasonsGong/JasonsGong.github.io.git
synced 2024-11-24 12:49:36 +08:00
395 lines
207 KiB
HTML
395 lines
207 KiB
HTML
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>前端基础知识 | The Blog</title><meta name="author" content="Jason"><meta name="copyright" content="Jason"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="一.VSCode的使用常用插件 二. ES6菜鸟ES6教程教程 1.简介 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:title" content="前端基础知识">
|
||
<meta property="og:url" content="https://qingling.icu/posts/432.html">
|
||
<meta property="og:site_name" content="The Blog">
|
||
<meta property="og:description" content="一.VSCode的使用常用插件 二. ES6菜鸟ES6教程教程 1.简介 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<meta property="og:image" content="https://qingling.icu/img/8.png">
|
||
<meta property="article:published_time" content="2023-05-07T03:31:58.000Z">
|
||
<meta property="article:modified_time" content="2023-09-11T23:36:50.000Z">
|
||
<meta property="article:author" content="Jason">
|
||
<meta property="article:tag" content="前端">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:image" content="https://qingling.icu/img/8.png"><link rel="shortcut icon" href="/img/%E5%9B%BE%E6%A0%87.png"><link rel="canonical" href="https://qingling.icu/posts/432.html"><link rel="preconnect" href="//fastly.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="/cdn/icon/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="/cdn/css/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="/cdn/css/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
|
||
root: '/',
|
||
algolia: undefined,
|
||
localSearch: {"path":"/search.xml","preload":true,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
|
||
translate: undefined,
|
||
noticeOutdate: undefined,
|
||
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":400},
|
||
copy: {
|
||
success: '复制成功',
|
||
error: '复制错误',
|
||
noSupport: '浏览器不支持'
|
||
},
|
||
relativeDate: {
|
||
homepage: true,
|
||
post: true
|
||
},
|
||
runtime: '天',
|
||
dateSuffix: {
|
||
just: '刚刚',
|
||
min: '分钟前',
|
||
hour: '小时前',
|
||
day: '天前',
|
||
month: '个月前'
|
||
},
|
||
copyright: undefined,
|
||
lightbox: 'mediumZoom',
|
||
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#006650","bgDark":"#006650","position":"top-center"},
|
||
source: {
|
||
justifiedGallery: {
|
||
js: 'https://fastly.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
|
||
css: 'https://fastly.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
|
||
}
|
||
},
|
||
isPhotoFigcaption: false,
|
||
islazyload: false,
|
||
isAnchor: true,
|
||
percent: {
|
||
toc: true,
|
||
rightside: false,
|
||
},
|
||
autoDarkmode: true
|
||
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
|
||
title: '前端基础知识',
|
||
isPost: true,
|
||
isHome: false,
|
||
isHighlightShrink: false,
|
||
isToc: true,
|
||
postUpdate: '2023-09-12 07:36:50'
|
||
}</script><noscript><style type="text/css">
|
||
#nav {
|
||
opacity: 1
|
||
}
|
||
.justified-gallery img {
|
||
opacity: 1
|
||
}
|
||
|
||
#recent-posts time,
|
||
#post-meta time {
|
||
display: inline !important
|
||
}
|
||
</style></noscript><script>(win=>{
|
||
win.saveToLocal = {
|
||
set: function setWithExpiry(key, value, ttl) {
|
||
if (ttl === 0) return
|
||
const now = new Date()
|
||
const expiryDay = ttl * 86400000
|
||
const item = {
|
||
value: value,
|
||
expiry: now.getTime() + expiryDay,
|
||
}
|
||
localStorage.setItem(key, JSON.stringify(item))
|
||
},
|
||
|
||
get: function getWithExpiry(key) {
|
||
const itemStr = localStorage.getItem(key)
|
||
|
||
if (!itemStr) {
|
||
return undefined
|
||
}
|
||
const item = JSON.parse(itemStr)
|
||
const now = new Date()
|
||
|
||
if (now.getTime() > item.expiry) {
|
||
localStorage.removeItem(key)
|
||
return undefined
|
||
}
|
||
return item.value
|
||
}
|
||
}
|
||
|
||
win.getScript = url => new Promise((resolve, reject) => {
|
||
const script = document.createElement('script')
|
||
script.src = url
|
||
script.async = true
|
||
script.onerror = reject
|
||
script.onload = script.onreadystatechange = function() {
|
||
const loadState = this.readyState
|
||
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
|
||
script.onload = script.onreadystatechange = null
|
||
resolve()
|
||
}
|
||
document.head.appendChild(script)
|
||
})
|
||
|
||
win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
|
||
const link = document.createElement('link')
|
||
link.rel = 'stylesheet'
|
||
link.href = url
|
||
if (id) link.id = id
|
||
link.onerror = reject
|
||
link.onload = link.onreadystatechange = function() {
|
||
const loadState = this.readyState
|
||
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
|
||
link.onload = link.onreadystatechange = null
|
||
resolve()
|
||
}
|
||
document.head.appendChild(link)
|
||
})
|
||
|
||
win.activateDarkMode = function () {
|
||
document.documentElement.setAttribute('data-theme', 'dark')
|
||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
|
||
}
|
||
}
|
||
win.activateLightMode = function () {
|
||
document.documentElement.setAttribute('data-theme', 'light')
|
||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
|
||
}
|
||
}
|
||
const t = saveToLocal.get('theme')
|
||
|
||
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
|
||
const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
|
||
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
|
||
|
||
if (t === undefined) {
|
||
if (isLightMode) activateLightMode()
|
||
else if (isDarkMode) activateDarkMode()
|
||
else if (isNotSpecified || hasNoSupport) {
|
||
const now = new Date()
|
||
const hour = now.getHours()
|
||
const isNight = hour <= 8 || hour >= 22
|
||
isNight ? activateDarkMode() : activateLightMode()
|
||
}
|
||
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
|
||
if (saveToLocal.get('theme') === undefined) {
|
||
e.matches ? activateDarkMode() : activateLightMode()
|
||
}
|
||
})
|
||
} else if (t === 'light') activateLightMode()
|
||
else activateDarkMode()
|
||
|
||
const asideStatus = saveToLocal.get('aside-status')
|
||
if (asideStatus !== undefined) {
|
||
if (asideStatus === 'hide') {
|
||
document.documentElement.classList.add('hide-aside')
|
||
} else {
|
||
document.documentElement.classList.remove('hide-aside')
|
||
}
|
||
}
|
||
|
||
const detectApple = () => {
|
||
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
|
||
document.documentElement.classList.add('apple')
|
||
}
|
||
}
|
||
detectApple()
|
||
})(window)</script><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src ="/js/welcome.js" ></script><script src="/js/sweetalert.js"></script><link rel="stylesheet" href="/css/sweetalert.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar.jpg" onerror="onerror=null;src='/img/loading.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">60</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">39</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><br/><div class="menus_items"><div class="menus_item"><a class="site-page" target="_blank" rel="noopener" href="https://www.tutorialspoint.com/compile_java8_online.php"><i class="fa-fw fas fa-code"></i><span> 代码</span></a></div><div class="menus_item"><a class="site-page" href="/notice/"><i class="fa-fw fas fa-stream"></i><span> 公告</span></a></div><div class="menus_item"><a class="site-page" href="/website/"><i class="fa-fw fas fa-list"></i><span> 网址</span></a></div><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="The Blog"><img class="site-icon" src="/img/logo.png"/><span class="site-name">The Blog</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" target="_blank" rel="noopener" href="https://www.tutorialspoint.com/compile_java8_online.php"><i class="fa-fw fas fa-code"></i><span> 代码</span></a></div><div class="menus_item"><a class="site-page" href="/notice/"><i class="fa-fw fas fa-stream"></i><span> 公告</span></a></div><div class="menus_item"><a class="site-page" href="/website/"><i class="fa-fw fas fa-list"></i><span> 网址</span></a></div><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">前端基础知识</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-05-07T03:31:58.000Z" title="发表于 2023-05-07 11:31:58">2023-05-07</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-09-11T23:36:50.000Z" title="更新于 2023-09-12 07:36:50">2023-09-12</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">7.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>34分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="前端基础知识"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><h1 id="一-VSCode的使用"><a href="#一-VSCode的使用" class="headerlink" title="一.VSCode的使用"></a>一.VSCode的使用</h1><h2 id="常用插件"><a href="#常用插件" class="headerlink" title="常用插件"></a>常用插件</h2><p><img src="/pictures/image-20230521233651126.png" alt="image-20230521233651126"></p>
|
||
<h1 id="二-ES6"><a href="#二-ES6" class="headerlink" title="二. ES6"></a>二. ES6</h1><p><a target="_blank" rel="noopener" href="https://www.runoob.com/w3cnote/es6-tutorial.html">菜鸟ES6教程教程</a></p>
|
||
<h2 id="1-简介"><a href="#1-简介" class="headerlink" title="1.简介"></a>1.简介</h2><p> ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。</p>
|
||
<h2 id="2-基础语法"><a href="#2-基础语法" class="headerlink" title="2.基础语法"></a>2.基础语法</h2><img src="/pictures/es6-tutorial.jpg" alt="img" style="zoom:150%;" />
|
||
|
||
<h3 id="2-1-声明变量"><a href="#2-1-声明变量" class="headerlink" title="2.1 声明变量"></a>2.1 声明变量</h3><ul>
|
||
<li>let 声明的变量有严格的作用域 var没有严格的作用域</li>
|
||
<li>let变量只能声明一次</li>
|
||
<li>let不存在变量提升 var存在变量提升（先使用后声明）</li>
|
||
<li>const声明的是常量，不能重新赋值</li>
|
||
<li>总计:使用let声明变量</li>
|
||
</ul>
|
||
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>声明变量<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.有严格的作用域</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//var 声明的变量往往会越域</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//let 声明的变量有严格的作用域</span></span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> a = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> b = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a) <span class="comment">//不会报错</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(b) <span class="comment">//ReferenceError: b is not defined,有严格的作用域，所以会报错</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//2.let的变量只能声明一次</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> m = <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> m = <span class="number">2</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> n = <span class="number">3</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// let n = 4</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(m) <span class="comment">//不会报错</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(n) <span class="comment">//Identifier 'n' has already been declared 不能声明两次</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//3.let不存在变量提升 var存在变量提升</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>,<span class="title function_">log</span>(x)</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> x = <span class="number">10</span>; <span class="comment">//这里不会报错，可以先使用后定义</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//4.const声明的是常量，不能重新赋值</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//总计:使用let声明变量</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="2-2-解构表达式和模板字符串"><a href="#2-2-解构表达式和模板字符串" class="headerlink" title="2.2 解构表达式和模板字符串"></a>2.2 解构表达式和模板字符串</h3><ul>
|
||
<li>数组的解构</li>
|
||
<li>对象的解构</li>
|
||
<li>字符串API的扩展</li>
|
||
<li>模板字符串</li>
|
||
</ul>
|
||
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>解构表达式<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//解构表达式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.原始的数组的赋值方式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// let a = arr[0]</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// let b = arr[1]</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// let c = arr[2]</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//2.使用解构表达式给数组赋值(数组解构)</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> [a, b, c] = arr;</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b, c);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//3.使用解构表达式给对象赋值(对象解构)</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> person = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">"jack"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">21</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">language</span>: [<span class="string">'java'</span>, <span class="string">'js'</span>, <span class="string">'css'</span>]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//原始的赋值方式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// const name = person.name</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// const age = person.age</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// const language = person.language</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//使用解构赋值(对象解构)</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//const { name, age, language } = person</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//更换属性名</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> { <span class="attr">name</span>: abc, age, language } = person</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//将属性名name更换为abc</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(abc, age, language)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//4.字符串扩展</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//几个新的字符串API</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> str = <span class="string">"hello.vue"</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//是不是以什么开头</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">startsWith</span>(<span class="string">"hello"</span>));<span class="comment">//true</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//是不是以什么结束</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">endsWith</span>(<span class="string">".vue"</span>));<span class="comment">//true</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//是不是包含什么</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">includes</span>(<span class="string">"e"</span>));<span class="comment">//true</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">includes</span>(<span class="string">"hello"</span>));<span class="comment">//true</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//5.模板字符串</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//${}插值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> name = <span class="string">"Tom"</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> result = <span class="string">`你好<span class="subst">${name}</span>`</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//可以直接调用字符串的返回值组成一个新的字符串</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="string">"这是一个函数"</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> result = <span class="string">`你好<span class="subst">${name}</span>,我想说:<span class="subst">${fun()}</span>`</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="2-3-函数优化"><a href="#2-3-函数优化" class="headerlink" title="2.3 函数优化"></a>2.3 函数优化</h3><ul>
|
||
<li>默认初始值</li>
|
||
<li>不定参数</li>
|
||
<li>箭头函数</li>
|
||
</ul>
|
||
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>函数优化<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.函数优化</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通的写法</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//判断b是否为空 如果为空就给默认值1</span></span></span><br><span class="line"><span class="language-javascript"> b = b || <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> a + b</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//传一个参数</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(<span class="number">10</span>)) <span class="comment">//结果是11</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//优化后 直接在参数上写上默认的值 如果没有传就会自动使用默认值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">add2</span>(<span class="params">a, b = <span class="number">1</span></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> a + b</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add2</span>(<span class="number">20</span>)) <span class="comment">//结果是21</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//2.不定参数 类似于java里面的可变形参</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">...values</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(values.<span class="property">length</span>)</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">fun</span>(<span class="number">1</span>, <span class="number">2</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">fun</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">fun</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//3.箭头函数</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//以前的声明方法</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> print = <span class="keyword">function</span> (<span class="params">obj</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> <span class="title function_">print1</span> = obj => <span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">print1</span>(<span class="string">"hello"</span>) <span class="comment">//输出hello</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//求两数之和</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//以前的方法</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> sum = <span class="keyword">function</span> (<span class="params">a, b</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> a + b</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//使用箭头函数</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> <span class="title function_">sum2</span> = (<span class="params">a, b</span>) => a + b <span class="comment">//方法体中只有一行代码 不用写return</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sum2</span>(<span class="number">11</span>, <span class="number">3</span>))</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> <span class="title function_">sum3</span> = (<span class="params">a, b</span>) => {<span class="comment">//方法体中有多行代码 写法如下</span></span></span><br><span class="line"><span class="language-javascript"> c = a + b;</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> a + c</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sum3</span>(<span class="number">11</span>, <span class="number">3</span>))</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//复杂一点的箭头函数</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> person = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">"jack"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">21</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">language</span>: [<span class="string">'java'</span>, <span class="string">'js'</span>, <span class="string">'css'</span>]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//原始的方法</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">hello</span>(<span class="params">person</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"hello "</span> + person.<span class="property">name</span>)</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//单纯的箭头函数</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> <span class="title function_">hello2</span> = (<span class="params">obj</span>) => <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"hello,"</span> + obj.<span class="property">name</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">hello2</span>(person)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//箭头函数加解构表达式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> <span class="title function_">hello3</span> = (<span class="params">{name}</span>) => <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"hello,"</span> + name)</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">hello3</span>(person)</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="2-4-对象优化"><a href="#2-4-对象优化" class="headerlink" title="2.4 对象优化"></a>2.4 对象优化</h3><ul>
|
||
<li>对象新增的API</li>
|
||
<li>声明对象的简写方式</li>
|
||
<li>对象函数属性的简写</li>
|
||
</ul>
|
||
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>对象优化<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.对象相关的API</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//定义一个person对象</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> person = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">"jack"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">21</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">language</span>: [<span class="string">'java'</span>, <span class="string">'js'</span>, <span class="string">'css'</span>]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//测试对象新增的API</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//返回对象所有的属性信息</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(person)) <span class="comment">//['name', 'age', 'language']</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//返回对象中vaules</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">values</span>(person))<span class="comment">// ['jack', 21, Array(3)]</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//返回key-vaues</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">entries</span>(person))<span class="comment">// [Array(2), Array(2), Array(2)]</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//将source1和source2的属性合并到target中</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> target = { <span class="attr">a</span>: <span class="number">1</span> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> source1 = { <span class="attr">b</span>: <span class="number">2</span> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> source2 = { <span class="attr">c</span>: <span class="number">3</span> }</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//将source1和source2中的属性合并在一起</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Object</span>.<span class="title function_">assign</span>(target, source1, source2)</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(target) <span class="comment">//{a: 1, b: 2, c: 3}</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//2.声明对象的简写方式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//声明两个变量</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> age = <span class="number">23</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> name = <span class="string">"张三"</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//原始的方式然后声明一个对象，属性值为这两个变量的值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> person1 = { <span class="attr">age</span>: age, <span class="attr">name</span>: name }</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(person1)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//ES6的方式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> person2 = { age, name }<span class="comment">// 属性名和属性值代表的变量的名字一样可以省写</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(person2)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//3.对象函数属性的简写</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> person3 = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">"jack"</span>,<span class="comment">//对象的属性</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//以前的语法格式</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">eat</span>: <span class="keyword">function</span> (<span class="params">food</span>) {<span class="comment">//对象的方法</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">"在吃"</span> + food)</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//使用箭头有函数简写 箭头函数中this.name无法使用</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">eat2</span>: <span class="function"><span class="params">food</span> =></span> <span class="variable language_">console</span>.<span class="title function_">log</span>(person3.<span class="property">name</span> + <span class="string">"在吃"</span> + food),</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">eat3</span>(<span class="params">food</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">"在吃"</span> + food)</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> person3.<span class="title function_">eat</span>(<span class="string">"香蕉"</span>)</span></span><br><span class="line"><span class="language-javascript"> person3.<span class="title function_">eat2</span>(<span class="string">"苹果"</span>)</span></span><br><span class="line"><span class="language-javascript"> person3.<span class="title function_">eat3</span>(<span class="string">"梨子"</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//4.对象的扩展运算符</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//拷贝对象(深拷贝)</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//将person01的值拷贝给someone</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> person01 = { <span class="attr">name</span>: <span class="string">"Amy"</span>, <span class="attr">age</span>: <span class="number">15</span> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> someone = { ...person01 }</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(someone)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//合并对象</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> age1 = { <span class="attr">age</span>: <span class="number">15</span> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> name1 = { <span class="attr">name</span>: <span class="string">"Amy"</span> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> person03 = { ...age1, ...name1 }<span class="comment">//两个对象属性的合并一个对象中,如果有相同的值,后一个覆盖前面的那一个属性的值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(person03)<span class="comment">//{age: 15, name: 'Amy'}</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="2-5-数组的map、reduce方法"><a href="#2-5-数组的map、reduce方法" class="headerlink" title="2.5 数组的map、reduce方法"></a>2.5 数组的map、reduce方法</h3><ul>
|
||
<li>map方法</li>
|
||
<li>reduce方法</li>
|
||
</ul>
|
||
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>map和reduce<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//数组中新增了map和reduce方法</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> arr = [<span class="string">'1'</span>, <span class="string">'20'</span>, <span class="string">'-5'</span>, <span class="string">'3'</span>]</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//需求:将原数组中的每一个值乘以2并返回</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//第一种方法</span></span></span><br><span class="line"><span class="language-javascript"> arr1 = arr.<span class="title function_">map</span>(<span class="function">(<span class="params">item</span>) =></span> {<span class="comment">//item为数组中的每一个元素</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> item * <span class="number">2</span></span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(arr1)</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//第二种方法</span></span></span><br><span class="line"><span class="language-javascript"> arr2 = arr.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =></span> item * <span class="number">2</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(arr2)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//reduce()方法:为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素</span></span></span><br><span class="line"><span class="language-javascript"> arr3 = [<span class="number">2</span>, <span class="number">40</span>, -<span class="number">10</span>, <span class="number">6</span>]</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//arr.reduce(callback,[initialValue]) //可以传一个回调函数callback，也可以传一个初始值initialValue</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//传入的是回调函数 可以传入的值有</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * previousValue (上一次调用回调返回的值，或者是提供的初始值initialValue)</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * currentValue (数组中当前被处理的元素)</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * index (当前元素在数组中的索引)</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * array (调用reduce的数组)</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * */</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> result = arr3.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, b</span>) =></span> {<span class="comment">//这个方法相当于求数组中每一个元素的和</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"上一次处理后的值:"</span> + a)</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"当前处理的值:"</span> + b)</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> a + b;</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">/**结果</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * 上一次处理后的值:2</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 当前处理的值:40</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 上一次处理后的值:42</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 当前处理的值:-10</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 上一次处理后的值:32</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 当前处理的值:6</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> 38</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> **/</span></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="2-6-promise异步编排"><a href="#2-6-promise异步编排" class="headerlink" title="2.6 promise异步编排"></a>2.6 promise异步编排</h3><p><strong>解决回调地域的问题</strong></p>
|
||
<p> Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。</p>
|
||
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Promise'</span>);</span><br><span class="line"> <span class="title function_">resolve</span>();</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">promise.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'resolved.'</span>);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Hi!'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Promise</span></span><br><span class="line"><span class="comment">// Hi!</span></span><br><span class="line"><span class="comment">// resolved</span></span><br></pre></td></tr></table></figure>
|
||
|
||
<p><strong>原有的基础上进一步的封装，链式调用</strong></p>
|
||
<h2 id="3-模块化"><a href="#3-模块化" class="headerlink" title="3.模块化"></a>3.模块化</h2><h3 id="3-1-什么是模块化"><a href="#3-1-什么是模块化" class="headerlink" title="3.1 什么是模块化"></a>3.1 什么是模块化</h3><p> 模块化就是把代码进行拆分，分辨重复使用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。</p>
|
||
<p>模块功能主要由两个命令构成: export和import</p>
|
||
<ul>
|
||
<li>export命令用于规定模块的对外接口</li>
|
||
<li>import命令用于导入其他模块提供的功能</li>
|
||
</ul>
|
||
<h3 id="3-2-export"><a href="#3-2-export" class="headerlink" title="3.2 export"></a>3.2 export</h3><p><strong>export不仅可以导出对象，一切js对象都可以导出。比如:基本类型的变量、函数、数组、对象</strong></p>
|
||
<p>比如我们定义了一个js文件hello.js，里面有一个对象</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> util = {</span><br><span class="line"> <span class="title function_">dsum</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">return</span> a + b;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||
|
||
<p>我们可以使用export将这个对象导出</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> util = {</span><br><span class="line"> <span class="title function_">dsum</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">return</span> a + b;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出对象</span></span><br><span class="line"><span class="keyword">export</span> { util }</span><br></pre></td></tr></table></figure>
|
||
|
||
<p>也可以简写成</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> util = {</span><br><span class="line"> <span class="title function_">dsum</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">return</span> a + b;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||
|
||
<p>当要导出多个值时，还可以简写。比如我有一个文件: user.js</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">"jack"</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">21</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span>{name, age}</span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="3-3-import"><a href="#3-3-import" class="headerlink" title="3.3 import"></a>3.3 import</h3><p>比如我们之前定义了两个JS文件</p>
|
||
<p>hello.js</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> util = {</span><br><span class="line"> <span class="title function_">dsum</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">return</span> a + b;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出对象</span></span><br><span class="line"><span class="keyword">export</span> { util }</span><br></pre></td></tr></table></figure>
|
||
|
||
<p>user.js</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">"jack"</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">21</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">return</span> a + b</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> { name, age, add }</span><br></pre></td></tr></table></figure>
|
||
|
||
<p>我们在main.js文件中导入上面的两个文件，并使用上面的两个文件的方法</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> util <span class="keyword">from</span> <span class="string">"./hello"</span> <span class="comment">//这里只能是util 不能是其他的名字</span></span><br><span class="line"><span class="keyword">import</span> {name,age,add} <span class="keyword">from</span> <span class="string">'./user'</span> <span class="comment">//可以不用全部导入 只用导入需要的即可</span></span><br><span class="line"></span><br><span class="line">util.<span class="title function_">sum</span>(<span class="number">1</span>,<span class="number">2</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>,<span class="number">2</span>)</span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="3-4-注意"><a href="#3-4-注意" class="headerlink" title="3.4 注意"></a>3.4 注意</h3><p>当我们这样定义时，导入的时候可以自定义导入时使用的变量名</p>
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> { <span class="comment">//导出的时候这样写</span></span><br><span class="line"> <span class="title function_">dsum</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">return</span> a + b;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||
|
||
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> xxx <span class="keyword">from</span> <span class="string">"./hello"</span> <span class="comment">//这里使用可以随意的取名</span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h1 id="三-Vue"><a href="#三-Vue" class="headerlink" title="三.Vue"></a>三.Vue</h1><h2 id="1-MVVM思想"><a href="#1-MVVM思想" class="headerlink" title="1.MVVM思想"></a>1.MVVM思想</h2><ul>
|
||
<li>M:即 Model，模型，包括数据和一些基本操作</li>
|
||
<li>V:即View视图，页面渲染结果</li>
|
||
<li>VM:即 View-Model，模型与视图间的双向操作（无需开发人员干涉)</li>
|
||
</ul>
|
||
<p> 在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作 Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的:</p>
|
||
<h2 id="2-vue的简介"><a href="#2-vue的简介" class="headerlink" title="2.vue的简介"></a>2.vue的简介</h2><p> Vue (发音为 /vjuː/，类似 <strong>view</strong>) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。</p>
|
||
<p><strong><a target="_blank" rel="noopener" href="https://v2.cn.vuejs.org/">Vue2官方文档</a></strong></p>
|
||
<h2 id="3-语法基础"><a href="#3-语法基础" class="headerlink" title="3.语法基础"></a>3.语法基础</h2><h3 id="3-1-快速入门"><a href="#3-1-快速入门" class="headerlink" title="3.1 快速入门"></a>3.1 快速入门</h3><p>1.创建一个文件夹,用VSCode打开</p>
|
||
<p>2.下载vue的依赖</p>
|
||
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">初始化项目</span></span><br><span class="line">npm init -y</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">安装vue的依赖，这里vue2和vue3版本语法有些差别，使用的时候要注意</span></span><br><span class="line">npm install vue@2 </span><br></pre></td></tr></table></figure>
|
||
|
||
<p>3.创建一个index.html文件</p>
|
||
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Vue入门<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{name}},是个傻子<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//这里最新版的vue上面无法获取到name的值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>:<span class="string">"张三"</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="3-2-基本的语法和插件的安装"><a href="#3-2-基本的语法和插件的安装" class="headerlink" title="3.2 基本的语法和插件的安装"></a>3.2 基本的语法和插件的安装</h3><h4 id="3-2-1双向绑定v-model"><a href="#3-2-1双向绑定v-model" class="headerlink" title="3.2.1双向绑定v-model"></a>3.2.1双向绑定v-model</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Vue入门<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 双向绑定 --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"num"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>{{name}}今年{{num}}岁了<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//声明式渲染</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>:<span class="string">"张三"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">num</span>: <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h4 id="3-2-2事件处理"><a href="#3-2-2事件处理" class="headerlink" title="3.2.2事件处理"></a>3.2.2事件处理</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Vue入门<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 双向绑定 --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"num"</span>></span></span><br><span class="line"> <span class="comment"><!-- 点击事件绑定 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"num++"</span>></span>点赞<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="comment"><!-- 取消点赞 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"cancle()"</span>></span>取消点赞<span class="tag"></<span class="name">button</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>有{{num}}为{{name}}点赞!<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//声明式渲染</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>, <span class="comment">//绑定元素</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {<span class="comment">//封装数据</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>:<span class="string">"张三"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">num</span>: <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>:{<span class="comment">//封装方法</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">cancle</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">num</span>--;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//v-xx 相当于指令</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//总结</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.创建vue的实例，关联页面的模板，将自己的数据(data)渲染到关联的模板</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//2.使用指令简化对dom的操作 例如 v-XX</span></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h4 id="3-2-3VUE代码提示插件和浏览器插件"><a href="#3-2-3VUE代码提示插件和浏览器插件" class="headerlink" title="3.2.3VUE代码提示插件和浏览器插件"></a>3.2.3VUE代码提示插件和浏览器插件</h4><p><strong><a target="_blank" rel="noopener" href="https://wwvc.lanzouk.com/ibGDO0x9717i">浏览器插件地址</a></strong> 直接解压，打开浏览器插件的开发者模式，选择加载已解压的文件，选择chrome目录即可</p>
|
||
<p><img src="/pictures/image-20230525192244158.png" alt="image-20230525192244158"></p>
|
||
<img src="/pictures/image-20230525191246045.png" alt="image-20230525191246045" style="zoom:200%;" />
|
||
|
||
<h4 id="3-2-4常用指令"><a href="#3-2-4常用指令" class="headerlink" title="3.2.4常用指令"></a>3.2.4常用指令</h4><h5 id="v-html-和-v-text"><a href="#v-html-和-v-text" class="headerlink" title="v-html 和 v-text"></a>v-html 和 v-text</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>常用指令<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 1.显示类的指令 --></span></span><br><span class="line"> <span class="comment"><!-- 插值表达式会发生插值闪烁的问题,先显示{{msg}}后显示内容 --></span></span><br><span class="line"> <span class="comment"><!-- 打印的是<h1>Hello</h1> --></span></span><br><span class="line"> {{msg}} <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> {{1+1}} <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> {{hello()}} <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="comment"><!-- 直接显示h1的大标题 --></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-html</span>=<span class="string">"msg"</span>></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">msg</span>:<span class="string">"<h1>Hello</h1>"</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">hello</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="string">"hello"</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h5 id="v-bind单向绑定"><a href="#v-bind单向绑定" class="headerlink" title="v-bind单向绑定"></a>v-bind单向绑定</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>单向绑定<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 单向绑定 --></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"link"</span>></span>百度<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="comment"><!-- class style也可以通过标签进行单向绑定 --></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-bind:style</span>=<span class="string">"{color:color}"</span>></span>你好<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">:style</span>=<span class="string">"{color:color}"</span>></span>使用缩写形式的单向绑定<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">link</span>:<span class="string">"http://www.baidu.com"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">color</span>: <span class="string">'green'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h5 id="v-model-双向绑定"><a href="#v-model-双向绑定" class="headerlink" title="v-model 双向绑定"></a>v-model 双向绑定</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>双向绑定<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span> = <span class="string">"app"</span>></span></span><br><span class="line"> 精通的语言:<span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">v-model</span>=<span class="string">"language"</span> <span class="attr">value</span>=<span class="string">"java"</span>></span>JAVA <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">v-model</span>=<span class="string">"language"</span> <span class="attr">value</span>=<span class="string">"php"</span>></span>PHP <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">v-model</span>=<span class="string">"language"</span> <span class="attr">value</span>=<span class="string">"python"</span>></span>Python <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> 选中了: {{language}}</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">language</span>:[]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<p><img src="/pictures/image-20230526164858205.png" alt="image-20230526164858205"></p>
|
||
<h5 id="v-on-事件绑定"><a href="#v-on-事件绑定" class="headerlink" title="v-on 事件绑定"></a>v-on 事件绑定</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>事件绑定<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 绑定一个单机事件 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"num++"</span>></span>v-on:click的方式点赞<span class="tag"></<span class="name">button</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="comment"><!-- 简写的方式实现点赞 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"num++"</span>></span>@click的方式点赞<span class="tag"></<span class="name">button</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="comment"><!-- 点击事件指定一个回调函数 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"cancle()"</span>></span>取消点赞<span class="tag"></<span class="name">button</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> 点赞的数量:{{num}}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">num</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">cancle</span>(<span class="params"></span>){</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">num</span>--;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<img src="/pictures/image-20230526170222378.png" alt="image-20230526170222378" style="zoom:150%;" />
|
||
|
||
<h5 id="v-for-循环显示"><a href="#v-for-循环显示" class="headerlink" title="v-for 循环显示"></a>v-for 循环显示</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>循环遍历<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="comment"><!-- 1.遍历数组 --></span></span><br><span class="line"> <span class="comment"><!-- 可以使用v-for="user in users"遍历用户信息 --></span></span><br><span class="line"> <span class="comment"><!-- 获取下标的信息加上一个index --></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(user,index) in users"</span> <span class="attr">:key</span>=<span class="string">""</span>></span></span><br><span class="line"> 序号:{{index+1}} <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> 姓名:{{user.name}} <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> 性别:{{user.gender}} <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> 年龄:{{user.age}} <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="comment"><!-- 2.遍历对象,获取每一个属性信息 --></span></span><br><span class="line"> 对象信息:</span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-for</span>=<span class="string">"(v,k,i) in user"</span>></span>属性索引={{i}}|属性名={{k}}|属性值={{v}}|<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="comment"><!-- 遍历的时候加上 :key 提高渲染的效率 --></span></span><br><span class="line"> <span class="comment"><!-- <li v-for="(user,index) in users" :key=""> --></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 遍历数组 --></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in nums"</span> <span class="attr">::key</span>=<span class="string">"index"</span>></span></span><br><span class="line"> {{item}}</span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">users</span>: [</span></span><br><span class="line"><span class="language-javascript"> { <span class="attr">name</span>: <span class="string">"mary"</span>, <span class="attr">gender</span>: <span class="string">'女'</span>, <span class="attr">age</span>: <span class="number">21</span> },</span></span><br><span class="line"><span class="language-javascript"> { <span class="attr">name</span>: <span class="string">"tom"</span>, <span class="attr">gender</span>: <span class="string">'男'</span>, <span class="attr">age</span>: <span class="number">35</span> },</span></span><br><span class="line"><span class="language-javascript"> { <span class="attr">name</span>: <span class="string">"mike"</span>, <span class="attr">gender</span>: <span class="string">'男'</span>, <span class="attr">age</span>: <span class="number">21</span> },</span></span><br><span class="line"><span class="language-javascript"> { <span class="attr">name</span>: <span class="string">"amy"</span>, <span class="attr">gender</span>: <span class="string">'女'</span>, <span class="attr">age</span>: <span class="number">64</span> }</span></span><br><span class="line"><span class="language-javascript"> ],</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">nums</span>:[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>,<span class="number">11</span>]</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<p><img src="/pictures/image-20230526172228532.png" alt="image-20230526172228532"></p>
|
||
<h5 id="v-if-和-v-show"><a href="#v-if-和-v-show" class="headerlink" title="v-if 和 v-show"></a>v-if 和 v-show</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>判断<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- v-if 条件判断,当结果为true时,所有的元素才会被渲染 --></span></span><br><span class="line"> <span class="comment"><!-- v-show 当得到的结果为true时,所有的元素才会被显示 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"show = !show"</span>></span>点击显示与否<span class="tag"></<span class="name">button</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="comment"><!-- 1.使用v-if显示 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">v-if</span>=<span class="string">"show"</span>></span>if=看到我...<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="comment"><!-- 2.使用v-show显示 --></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">"show"</span>></span>show=显示...<span class="tag"></<span class="name">h1</span>></span><span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="comment"><!-- 多重判断 --></span></span><br><span class="line"> <span class="comment"><!-- v-if、v-else-if、v-else --></span></span><br><span class="line"> <span class="comment"><!-- 循环的时候也可以加上判断 --></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">show</span>:<span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h4 id="3-2-5-计算属性和侦听器"><a href="#3-2-5-计算属性和侦听器" class="headerlink" title="3.2.5 计算属性和侦听器"></a>3.2.5 计算属性和侦听器</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>计算属性和侦听器<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 计算属性 --></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>西游记；价格：{{xyjPrice}},数量:<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">v-model</span>=<span class="string">"xyjNum"</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>水浒传；价格：{{shzPrice}},数量:<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">v-model</span>=<span class="string">"shzNum"</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>总价:{{totalPrice}}<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> {{msg}}</span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="comment"><!-- 侦听器,监听属性值的变化 --></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xyjPrice</span>: <span class="number">99.98</span>, <span class="comment">//西游记价格</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">shzPrice</span>: <span class="number">99.00</span>, <span class="comment">//水浒传价格</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xyjNum</span>: <span class="number">0</span>, <span class="comment">//西游记的数量</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">shzNum</span>: <span class="number">0</span>, <span class="comment">//水浒传的数量</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">msg</span>: <span class="string">""</span> <span class="comment">//提示的消息</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">computed</span>: {<span class="comment">//计算属性</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">totalPrice</span>(<span class="params"></span>) {<span class="comment">//计算总价</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">xyjPrice</span> * <span class="variable language_">this</span>.<span class="property">xyjNum</span> + <span class="variable language_">this</span>.<span class="property">shzPrice</span> * <span class="variable language_">this</span>.<span class="property">shzNum</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">watch</span>: {<span class="comment">//监听器</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//newVal：新值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//oldVal：旧值</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//下面的这个方法是监听当购买的数量超出了3，就提示超库存了，并把输入框的值设置为最大的3</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">xyjNum</span>: <span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) {<span class="comment">//监听西游记数量的变化</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"newVal:"</span> + newVal + <span class="string">" | "</span> + <span class="string">"oldVal:"</span> + oldVal)</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (newVal >= <span class="number">3</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">msg</span> = <span class="string">"库存超出了限制"</span></span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">xyjNum</span> = <span class="number">3</span></span></span><br><span class="line"><span class="language-javascript"> } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">msg</span> = <span class="string">""</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h4 id="3-2-6-过滤器"><a href="#3-2-6-过滤器" class="headerlink" title="3.2.6 过滤器"></a>3.2.6 过滤器</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>过滤器<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- 过滤器常用来处理文本格式化的操作，过滤器可以用在两个地方：插值表达式和v-bind表达式 --></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"user in userList"</span>></span></span><br><span class="line"> <span class="comment"><!-- 显示性别的时候不用代号显示，使用男女显示 --></span></span><br><span class="line"> <span class="comment"><!-- 方式一:通过三元运算符的形式显示 --></span></span><br><span class="line"> <span class="comment"><!-- 姓名:{{user.name}} | 性别:{{user.gender== 1?"男":"女"}} --></span></span><br><span class="line"> <span class="comment"><!-- 方式二:使用过滤器的方式 其中 | 是管道符 genderFilter是过滤器 --></span></span><br><span class="line"> 姓名:{{user.name}} | 性别:{{user.gender | genderFilter}}</span><br><span class="line"> <span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">"gFilter"</span>, <span class="keyword">function</span> (<span class="params">val</span>) {<span class="comment">//全局过滤器</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (val == <span class="number">1</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="string">"男··"</span></span></span><br><span class="line"><span class="language-javascript"> } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="string">"女··"</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">userList</span>: [</span></span><br><span class="line"><span class="language-javascript"> { <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">"jacky"</span>, <span class="attr">gender</span>: <span class="number">1</span> },</span></span><br><span class="line"><span class="language-javascript"> { <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">"peter"</span>, <span class="attr">gender</span>: <span class="number">0</span> },</span></span><br><span class="line"><span class="language-javascript"> ]</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">filters</span>: {<span class="comment">//局部的过滤器</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">genderFilter</span>(<span class="params">val</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (val == <span class="number">1</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="string">"男"</span></span></span><br><span class="line"><span class="language-javascript"> } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="string">"女"</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="3-3-组件化"><a href="#3-3-组件化" class="headerlink" title="3.3 组件化"></a>3.3 组件化</h3><p> 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是每个页面都都独自开发，这无疑增加了开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同的页面就可以共享这些组件，避免重复开发。</p>
|
||
<img src="/pictures/image-20230527215736955.png" alt="image-20230527215736955" style="zoom:150%;" />
|
||
|
||
<h4 id="3-3-1-全局组件"><a href="#3-3-1-全局组件" class="headerlink" title="3.3.1 全局组件"></a>3.3.1 全局组件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>组件化<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"count++"</span>></span>我被点击了{{count}}次<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 组件的使用 --></span></span><br><span class="line"> <span class="tag"><<span class="name">counter</span>></span><span class="tag"></<span class="name">counter</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//1.全局声明一个组件</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">"counter"</span>, {<span class="comment">//counter是组件的名称，可以随便起名，见名知意就行</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">`<button @click="count++">我被点击了{{count}}次</button>`</span>,<span class="comment">//模板</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">data</span>(<span class="params"></span>) { <span class="comment">//模板中的属性信息，这里的data必须是一个函数</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">count</span>: <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">count</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<img src="/pictures/image-20230527220905922.png" alt="image-20230527220905922" style="zoom:150%;" />
|
||
|
||
<h4 id="3-3-2-局部组件"><a href="#3-3-2-局部组件" class="headerlink" title="3.3.2 局部组件"></a>3.3.2 局部组件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>组件化<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"count++"</span>></span>我被点击了{{count}}次<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 局部组件的使用 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button-counter</span>></span><span class="tag"></<span class="name">button-counter</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//声明一个局部的组件</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> buttonCounter = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">`<button @click="count++">我被点击了{{count}}次</button>`</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">data</span>(<span class="params"></span>) { </span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">count</span>: <span class="number">1</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">"#app"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">count</span>: <span class="number">0</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//声明一个局部的组件</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">components</span>:{</span></span><br><span class="line"><span class="language-javascript"> <span class="string">'button-counter'</span>:buttonCounter</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
|
||
|
||
<h3 id="3-3-生命周期和钩子函数"><a href="#3-3-生命周期和钩子函数" class="headerlink" title="3.3 生命周期和钩子函数"></a>3.3 生命周期和钩子函数</h3><p><strong>生命周期图</strong></p>
|
||
<p><img src="/pictures/image-20230527221756442.png" alt="image-20230527221756442"></p>
|
||
<h3 id="3-4-Vue模块化开发"><a href="#3-4-Vue模块化开发" class="headerlink" title="3.4 Vue模块化开发"></a>3.4 Vue模块化开发</h3><p><strong>1.全局安装webpack</strong></p>
|
||
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack -g</span><br></pre></td></tr></table></figure>
|
||
|
||
<p><strong>2.全局安装vue脚手架</strong></p>
|
||
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @vue/cli-init</span><br></pre></td></tr></table></figure>
|
||
|
||
<p><strong>3.初始化vue的项目</strong></p>
|
||
<p>创建一个文件夹，打开cmd，切换到这个文件夹，执行以下的命令</p>
|
||
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">vue脚手架使用webpacke模板初始化一个项目</span></span><br><span class="line">vue init webpack 项目名称 </span><br></pre></td></tr></table></figure>
|
||
|
||
<p><strong>4.启动vue的项目</strong></p>
|
||
<p>项目中的package.json中有scripts，代表我们能运行的命令</p>
|
||
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">启动项目</span></span><br><span class="line">npm start </span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">或者</span></span><br><span class="line">npm run dev </span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">将项目打包</span></span><br><span class="line">npm run build </span><br></pre></td></tr></table></figure>
|
||
|
||
<h2 id="4-Eelment-UI"><a href="#4-Eelment-UI" class="headerlink" title="4.Eelment-UI"></a>4.Eelment-UI</h2><p><strong>官方文档:<a target="_blank" rel="noopener" href="https://element.eleme.cn/#/zh-CN/component/quickstart">https://element.eleme.cn/#/zh-CN/component/quickstart</a></strong></p>
|
||
</article><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a></div><div class="post_share"><div class="social-share" data-image="/img/8.png" data-sites="wechat,weibo,qq"></div><link rel="stylesheet" href="/cdn/css/share.min.css" media="print" onload="this.media='all'"><script src="/cdn/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="/img/wechat.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="/img/alipay.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><br/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="far fa-comment-alt fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="gitalk-container"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/avatar.jpg" onerror="this.onerror=null;this.src='/img/loading.gif'" alt="avatar"/></div><div class="author-info__name">Jason</div><div class="author-info__description">Debug the World！</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">60</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">39</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><a id="card-info-btn"><i class="fab fa-microsoft"></i><span>Ctrl + D 收藏</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/JasonsGong" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2602183349&website=www.oicqzone.com" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="mailto:2602183349@qq.com" target="_blank" title="Email"><i class="fas fa-envelope-open-text"></i></a><a class="social-icon" href="https://github.com/JasonsGong?tab=repositories" target="_blank" title="代码仓库"><i class="fas fa-database"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">本网站是静态网站,更新页面资源请使用Ctrl+F5;若网站内文章对你有帮助,请使用Ctrl+D收藏该网站！</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%80-VSCode%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-text">一.VSCode的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6"><span class="toc-text">常用插件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8C-ES6"><span class="toc-text">二. ES6</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="toc-text">1.简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95"><span class="toc-text">2.基础语法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-%E5%A3%B0%E6%98%8E%E5%8F%98%E9%87%8F"><span class="toc-text">2.1 声明变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-%E8%A7%A3%E6%9E%84%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%92%8C%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-text">2.2 解构表达式和模板字符串</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-%E5%87%BD%E6%95%B0%E4%BC%98%E5%8C%96"><span class="toc-text">2.3 函数优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-%E5%AF%B9%E8%B1%A1%E4%BC%98%E5%8C%96"><span class="toc-text">2.4 对象优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-%E6%95%B0%E7%BB%84%E7%9A%84map%E3%80%81reduce%E6%96%B9%E6%B3%95"><span class="toc-text">2.5 数组的map、reduce方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-promise%E5%BC%82%E6%AD%A5%E7%BC%96%E6%8E%92"><span class="toc-text">2.6 promise异步编排</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-text">3.模块化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-%E4%BB%80%E4%B9%88%E6%98%AF%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-text">3.1 什么是模块化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-export"><span class="toc-text">3.2 export</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-import"><span class="toc-text">3.3 import</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4-%E6%B3%A8%E6%84%8F"><span class="toc-text">3.4 注意</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%89-Vue"><span class="toc-text">三.Vue</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-MVVM%E6%80%9D%E6%83%B3"><span class="toc-text">1.MVVM思想</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-vue%E7%9A%84%E7%AE%80%E4%BB%8B"><span class="toc-text">2.vue的简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E8%AF%AD%E6%B3%95%E5%9F%BA%E7%A1%80"><span class="toc-text">3.语法基础</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8"><span class="toc-text">3.1 快速入门</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-%E5%9F%BA%E6%9C%AC%E7%9A%84%E8%AF%AD%E6%B3%95%E5%92%8C%E6%8F%92%E4%BB%B6%E7%9A%84%E5%AE%89%E8%A3%85"><span class="toc-text">3.2 基本的语法和插件的安装</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-1%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9Av-model"><span class="toc-text">3.2.1双向绑定v-model</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-2%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="toc-text">3.2.2事件处理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-3VUE%E4%BB%A3%E7%A0%81%E6%8F%90%E7%A4%BA%E6%8F%92%E4%BB%B6%E5%92%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6"><span class="toc-text">3.2.3VUE代码提示插件和浏览器插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-4%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4"><span class="toc-text">3.2.4常用指令</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#v-html-%E5%92%8C-v-text"><span class="toc-text">v-html 和 v-text</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#v-bind%E5%8D%95%E5%90%91%E7%BB%91%E5%AE%9A"><span class="toc-text">v-bind单向绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#v-model-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="toc-text">v-model 双向绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#v-on-%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-text">v-on 事件绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#v-for-%E5%BE%AA%E7%8E%AF%E6%98%BE%E7%A4%BA"><span class="toc-text">v-for 循环显示</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#v-if-%E5%92%8C-v-show"><span class="toc-text">v-if 和 v-show</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-5-%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%92%8C%E4%BE%A6%E5%90%AC%E5%99%A8"><span class="toc-text">3.2.5 计算属性和侦听器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-6-%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-text">3.2.6 过滤器</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-%E7%BB%84%E4%BB%B6%E5%8C%96"><span class="toc-text">3.3 组件化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-1-%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6"><span class="toc-text">3.3.1 全局组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-2-%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6"><span class="toc-text">3.3.2 局部组件</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%92%8C%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0"><span class="toc-text">3.3 生命周期和钩子函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4-Vue%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91"><span class="toc-text">3.4 Vue模块化开发</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-Eelment-UI"><span class="toc-text">4.Eelment-UI</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最近更新</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/8957.html" title="Linux从入门到进阶"><img src="/img/8.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Linux从入门到进阶"/></a><div class="content"><a class="title" href="/posts/8957.html" title="Linux从入门到进阶">Linux从入门到进阶</a><time datetime="2024-05-10T05:31:11.691Z" title="更新于 2024-05-10 13:31:11">2024-05-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/35630.html" title="接口测试工具"><img src="/img/2.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="接口测试工具"/></a><div class="content"><a class="title" href="/posts/35630.html" title="接口测试工具">接口测试工具</a><time datetime="2024-05-10T05:31:11.686Z" title="更新于 2024-05-10 13:31:11">2024-05-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/32246.html" title="SpringBoot中整合Swagger2"><img src="/img/3.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SpringBoot中整合Swagger2"/></a><div class="content"><a class="title" href="/posts/32246.html" title="SpringBoot中整合Swagger2">SpringBoot中整合Swagger2</a><time datetime="2024-05-10T05:31:11.681Z" title="更新于 2024-05-10 13:31:11">2024-05-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/19306.html" title="Docker容器化技术"><img src="/img/1.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Docker容器化技术"/></a><div class="content"><a class="title" href="/posts/19306.html" title="Docker容器化技术">Docker容器化技术</a><time datetime="2024-05-10T05:31:11.675Z" title="更新于 2024-05-10 13:31:11">2024-05-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/20683.html" title="Linux中开发环境的搭建"><img src="/img/8.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Linux中开发环境的搭建"/></a><div class="content"><a class="title" href="/posts/20683.html" title="Linux中开发环境的搭建">Linux中开发环境的搭建</a><time datetime="2024-05-10T05:31:11.669Z" title="更新于 2024-05-10 13:31:11">2024-05-10</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comment-alt"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/cdn/js/medium-zoom.min.js"></script><script src="/cdn/js/instantpage.min.js" type="module"></script><script src="/cdn/js/snackbar.min.js"></script><div class="js-pjax"><script>function loadGitalk () {
|
||
function initGitalk () {
|
||
var gitalk = new Gitalk(Object.assign({
|
||
clientID: '00fb27b1e484536359c2',
|
||
clientSecret: 'be41a12281c68b6e228d1a27e8d08aeb91541145',
|
||
repo: 'BlogComment',
|
||
owner: 'JasonsGong',
|
||
admin: ['JasonsGong'],
|
||
id: '89ccc086846dc571cbe018e9b2a2a1d6',
|
||
updateCountCallback: commentCount
|
||
},null))
|
||
|
||
gitalk.render('gitalk-container')
|
||
}
|
||
|
||
if (typeof Gitalk === 'function') initGitalk()
|
||
else {
|
||
getCSS('/cdn/css/gitalk.min.css')
|
||
getScript('/cdn/js/gitalk.min.js').then(initGitalk)
|
||
}
|
||
}
|
||
|
||
function commentCount(n){
|
||
let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
|
||
if (isCommentCount) {
|
||
isCommentCount.textContent= n
|
||
}
|
||
}
|
||
|
||
if ('Gitalk' === 'Gitalk' || !true) {
|
||
if (true) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk)
|
||
else loadGitalk()
|
||
} else {
|
||
function loadOtherComment () {
|
||
loadGitalk()
|
||
}
|
||
}</script></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><br/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><!-- hexo injector body_end start --><script data-pjax>
|
||
function butterfly_swiper_injector_config(){
|
||
var parent_div_git = document.getElementById('recent-posts');
|
||
var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/19306.html" alt=""><img width="48" height="48" src="/img/1.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-04-21</span><a class="blog-slider__title" href="posts/19306.html" alt="">Docker容器化技术</a><div class="blog-slider__text">Docker</div><a class="blog-slider__button" href="posts/19306.html" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/47003.html" alt=""><img width="48" height="48" src="/img/5.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-03-10</span><a class="blog-slider__title" href="posts/47003.html" alt="">常用正则表达式大全</a><div class="blog-slider__text">正则表达式</div><a class="blog-slider__button" href="posts/47003.html" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/20683.html" alt=""><img width="48" height="48" src="/img/8.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-05</span><a class="blog-slider__title" href="posts/20683.html" alt="">Linux中开发环境的搭建</a><div class="blog-slider__text">环境搭建</div><a class="blog-slider__button" href="posts/20683.html" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/63333.html" alt=""><img width="48" height="48" src="/img/10.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-06-03</span><a class="blog-slider__title" href="posts/63333.html" alt="">开发环境的搭建</a><div class="blog-slider__text">环境搭建</div><a class="blog-slider__button" href="posts/63333.html" alt="">详情 </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
|
||
if (parent_div_git !== null && typeof parent_div_git !== 'undefined') {
|
||
parent_div_git.insertAdjacentHTML("afterbegin",item_html)
|
||
}
|
||
}
|
||
var elist = 'undefined'.split(',');
|
||
var cpage = location.pathname;
|
||
var epage = 'all';
|
||
var flag = 0;
|
||
|
||
for (var i=0;i<elist.length;i++){
|
||
if (cpage.includes(elist[i])){
|
||
flag++;
|
||
}
|
||
}
|
||
|
||
if ((epage ==='all')&&(flag == 0)){
|
||
butterfly_swiper_injector_config();
|
||
}
|
||
else if (epage === cpage){
|
||
butterfly_swiper_injector_config();
|
||
}
|
||
</script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><!-- hexo injector body_end end --></body></html> |