2023-09-22 21:57:28 +08:00
<!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， ， ， >
< meta property = "og:type" content = "article" >
< meta property = "og:title" content = "前端基础知识" >
2024-05-10 10:21:35 +08:00
< meta property = "og:url" content = "https://qingling.icu/posts/432.html" >
2023-09-22 21:57:28 +08:00
< meta property = "og:site_name" content = "The Blog" >
< meta property = "og:description" content = "一.VSCode的使用常用插件 二. ES6菜鸟ES6教程教程 1.简介 ES6， ， ， >
< meta property = "og:locale" content = "zh_CN" >
2024-06-14 22:00:25 +08:00
< meta property = "og:image" content = "https://qingling.icu/img/8.png" >
2023-09-22 21:57:28 +08:00
< 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" >
2024-06-14 22:00:25 +08:00
< 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 > c o n s t G L O B A L _ C O N F I G = {
2023-09-22 21:57:28 +08:00
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',
2023-12-09 14:21:01 +08:00
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#006650","bgDark":"#006650","position":"top-center"},
2023-09-22 21:57:28 +08:00
source: {
justifiedGallery: {
2023-09-30 18:36:25 +08:00
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'
2023-09-22 21:57:28 +08:00
}
},
isPhotoFigcaption: false,
islazyload: false,
2023-12-10 21:57:00 +08:00
isAnchor: true,
2023-09-22 21:57:28 +08:00
percent: {
toc: true,
rightside: false,
},
2023-12-09 19:59:36 +08:00
autoDarkmode: true
2023-09-22 21:57:28 +08:00
}< / script > < script id = "config-diff" > v a r G L O B A L _ C O N F I G _ S I T E = {
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 > ( w i n = > {
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')
2023-12-09 19:59:36 +08:00
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()
2023-09-22 21:57:28 +08:00
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()
2024-06-14 22:00:25 +08:00
})(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"
2023-09-22 21:57:28 +08:00
< 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 > ， ， ， < / 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 > < /sp
< 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" > < spa
< 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 cl
< 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< /spa
< 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
< 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 > ， ， ， ， （ ） ， ， ， ； ， （ ） ， ， ， < / 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 > ， ： ， ， < / 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不仅可以导出对象， < / 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 > ， ， ， ， ， < / p >
< h2 id = "2-vue的简介" > < a href = "#2-vue的简介" class = "headerlink" title = "2.vue的简介" > < / a > 2.vue的简介< / h2 > < p > / vjuː / ，类似 < strong > view< / strong > ) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建， ， ， < / 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的依赖， ， < / 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 cla
< 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 > < s
< 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 cl
< 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 > 直接解压， ， ， < / 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
< 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" >
< 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" >
< 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 >
< 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 clas
< 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 > < spa
< 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 > 西游记；价格：{ { xyjPric
< 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" > < !-- 过滤器常用来处理文本格式化的操作， ： > < / 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" > " use
< 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" <
< 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 >
< 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 > 创建一个文件夹， ， ， < / 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 >
2024-06-14 22:00:25 +08:00
< / 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
2024-01-13 16:32:52 +08:00
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 {
2024-01-13 17:50:17 +08:00
getCSS('/cdn/css/gitalk.min.css')
getScript('/cdn/js/gitalk.min.js').then(initGitalk)
2024-01-13 16:32:52 +08:00
}
}
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 >
2023-09-22 21:57:28 +08:00
function butterfly_swiper_injector_config(){
2024-01-13 22:42:28 +08:00
var parent_div_git = document.getElementById('recent-posts');
2024-06-14 22:00:25 +08:00
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 > ';
2024-01-13 22:42:28 +08:00
if (parent_div_git !== null & & typeof parent_div_git !== 'undefined') {
parent_div_git.insertAdjacentHTML("afterbegin",item_html)
}
2023-09-22 21:57:28 +08:00
}
var elist = 'undefined'.split(',');
var cpage = location.pathname;
2023-10-28 10:47:20 +08:00
var epage = 'all';
2023-09-22 21:57:28 +08:00
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();
}
2024-01-13 22:10:58 +08:00
< / 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 >
