01-前端開發(fā)和前端開發(fā)工具
一、前端開發(fā)
PRD（產品原型-產品經理） - PSD（視覺設計-UI工程師） - HTML/CSS/JavaScript（PC/移動端網頁，實現網頁端的視覺展示和交互-前端工程師）
二、下載和安裝VS Code
1、下載地址
https://code.visualstudio.com/
2、安裝
三、初始設置
1、中文界面配置
首先安裝中文插件：Chinese (Simplified) Language Pack for Visual Studio Code
????右下角彈出是否重啟vs，點擊“yes”
????有些機器重啟后如果界面沒有變化，則 點擊?左邊欄Manage -> Command Paletet...【Ctrl+Shift+p】
????在搜索框中輸入“configure display language”，回車
????打開locale.json文件，修改文件下的屬性 "locale":"zh-cn"
????重啟vs
2、插件安裝
為方便后續(xù)開發(fā)，建議安裝如下插件（紅色矩形框標記的插件）
3、創(chuàng)建項目
vscode本身沒有新建項目的選項，所以要先創(chuàng)建一個空的文件夾，如project_xxxx。
然后打開vscode，再在vscode里面選擇 File -> Open Folder 打開文件夾，這樣才可以創(chuàng)建項目。
4、保存工作區(qū)
打開文件夾后，選擇“文件 -> 將工作區(qū)另存為...”，為工作區(qū)文件起一個名字，存儲在剛才的文件夾下即可
5、新建文件夾和網頁
6、預覽網頁
以文件路徑方式打開網頁預覽
需要安裝“open in browser”插件：
文件右鍵 -> Open In Default Browser
以服務器方式打開網頁預覽
需要安裝“Live Server”插件：
文件右鍵 -> Open with Live Server
http://127.0.0.1:5500/vs1010/demo01/01.html
7、設置字體大小
左邊欄Manage -> settings?->?搜索?“font”?->?Font size
8、開啟完整的Emmet語法支持
設置中搜索 Emmet：啟用如下選項，必要時重啟vs
02-ES6入門
自學參考：http://es6.ruanyifeng.com/
一、ECMAScript 6 簡介
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發(fā)布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言。
1、ECMAScript 和 JavaScript 的關系
一個常見的問題是，ECMAScript 和 JavaScript 到底是什么關系？
要講清楚這個問題，需要回顧歷史。1996 年 11 月，JavaScript 的創(chuàng)造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標準。次年，ECMA 發(fā)布 262 號標準文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript，這個版本就是 1.0 版。
因此，ECMAScript 和 JavaScript 的關系是，前者是后者的規(guī)格，后者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）
2、ES6 與 ECMAScript 2015 的關系
ECMAScript 2015（簡稱 ES2015）這個詞，也是經?？梢钥吹降?。它與 ES6 是什么關系呢？
2011 年，ECMAScript 5.1 版發(fā)布后，就開始制定 6.0 版了。因此，ES6 這個詞的原意，就是指 JavaScript 語言的下一個版本。
ES6 的第一個版本，在 2015 年 6 月發(fā)布，正式名稱是《ECMAScript 2015 標準》（簡稱 ES2015）。
2016 年 6 月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期發(fā)布，這個版本可以看作是 ES6.1 版，因為兩者的差異非常小，基本上是同一個標準。根據計劃，2017 年 6 月發(fā)布 ES2017 標準。
因此，ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年發(fā)布的正式版本的語言標準。本書中提到 ES6 的地方，一般是指 ES2015 標準，但有時也是泛指“下一代 JavaScript 語言”。
二、基本語法
ES標準中不包含 DOM 和 BOM的定義，只涵蓋基本數據類型、關鍵字、語句、運算符、內建對象、內建函數等通用語法。
本部分只學習前端開發(fā)中ES6的最少必要知識，方便后面項目開發(fā)中對代碼的理解。
1、let聲明變量
創(chuàng)建 let.html
<script>
????//?var?聲明的變量沒有局部作用域
????//?let?聲明的變量??有局部作用域
????//es6定義變量，使用關鍵字let
????//1?創(chuàng)建代碼塊，定義變量
????{
????????var?a?=?10
????????let?b?=?20
????}
????//2?在代碼塊外面輸出
????console.log(a)
????console.log(b) //ReferenceError: b is not defined
</script>
<script>
????//?var?可以聲明多次
????//?let?只能聲明一次
????var?m?=?1
????var?m?=?2
????let?n?=?3
????let?n?=?4
????console.log(m)
????console.log(n)?//Uncaught?SyntaxError:?Identifier?'n'?has?already?been?declared
</script>
2、const聲明常量（只讀變量）
創(chuàng)建 const.html
<script>
????//定義常量
????const?PI?=?"3.1415926"
????//?1、聲明之后不允許改變??
????PI?=?3?//Uncaught?TypeError:?Assignment?to?constant?variable.
????//2、一但聲明必須初始化，否則會報錯
????//const?MY_AGE?//Uncaught?SyntaxError:?Missing?initializer?in?const?declaration
</script>
3、解構賦值
創(chuàng)建 解構賦值.html
解構賦值是對賦值運算符的擴展。
他是一種針對數組或者對象進行模式匹配，然后對其中的變量進行賦值。
在代碼書寫上簡潔且易讀，語義更加清晰明了；也方便了復雜對象中數據字段獲取。
<script>
????//1、數組結構
????//傳統(tǒng)寫法
????let?a?=?1,?b?=?2,?c?=?3
????console.log(a,?b,?c)
????//ES6寫法
????let?[x,?y,?z]?=?[10,20,30]
????console.log(x,?y,?z)
</script>
<script>
????//2、對象解構
????let?user?=?{name:"Helen",?age:18}
????//傳統(tǒng)寫法
????let?name1?=?user.name
????let?age1?=?user.age
????console.log(name1,age1)
????//ES6寫法
????let?{name,?age}?=?user?//注意：結構的變量必須是user中的屬性
????console.log(name,age)
</script>
4、模板字符串
創(chuàng)建 模板字符串.html
模板字符串相當于加強版的字符串，用反引號?`,除了作為普通字符串，還可以用來定義多行字符串，還可以在字符串中加入變量和表達式。
<script>
????//1、多行字符串
????let?string1?=?`Hey,
????can?you?stop?angry?now?`
????console.log(string1)
</script>
<script>
????//2、字符串插入變量和表達式。變量名寫在?${}?中，${}?中可以放入?JavaScript?表達式。
????let?name?=?"Mike"
????let?age?=?28
????let?info?=?`My?name?is?${name},?I?am?${age+1}?years?old?next?year.`
????console.log(info)
</script>
<script>
????//?3、字符串中調用函數
????function?f(){
????????return?"have?fun!"
????}
????let?string2?=?`Game?start,${f()}`
????console.log(string2);??//?Game?start,have?fun!
</script>
5、聲明對象簡寫
創(chuàng)建 聲明對象簡寫.html
<script>
????//聲明對象簡寫
????const?age?=?12
????const?name?=?"Amy"
????//?傳統(tǒng)
????const?person1?=?{age:?age,?name:?name}
????console.log(person1)
????//?ES6
????const?person2?=?{age,?name}
????console.log(person2)?//{age:?12,?name:?"Amy"}
</script>
6、定義方法簡寫
創(chuàng)建 定義方法簡寫.html
<script>
????//定義方法簡寫
????//傳統(tǒng)
????const?person1?=?{
????????sayHi:function(){
????????????console.log("Hi");
????????}
????}
????person1.sayHi();
????//ES6
????const?person2?=?{
????????sayHi(){
????????????console.log("Hi")
????????}
????}
????person2.sayHi();
</script>
7、對象拓展運算符
創(chuàng)建 對象拓展運算符.html
拓展運算符（...）用于取出參數對象所有可遍歷屬性然后拷貝到當前對象。
<script>
????//?1、拷貝對象
????let?person1?=?{name:?"Amy1",age:?15}
????let?someone?=?{...person1}
????console.log(someone)
????//2、合并對象
????let?age?=?{age:?16}
????let?name?=?{name:"Amy2"}
????let?person2?=?{...age,...name}
????console.log(person2)
</script>
8、箭頭函數
創(chuàng)建 箭頭函數.html
箭頭函數提供了一種更加簡潔的函數書寫方式。基本語法是：
參數 => 函數體
<script>
????//傳統(tǒng)
????var?f1?=?function(a){
????????return?a
????}
????console.log(f1(1))
????//ES6
????var?f2?=?a?=>?a
????console.log(f2(2))
</script>
<script>
????//?當箭頭函數沒有參數或者有多個參數，要用?()?括起來。
????//?當箭頭函數函數體有多行語句，用?{}?包裹起來，表示代碼塊，
????//?當只有一行語句，并且需要返回結果時，可以省略?{}?,?結果會自動返回。
????var?f3?=?(a,b)?=>?{
????????let?result?=?a+b
????????return?result
????}
????console.log(f3(6,2))??//8
????//前面的代碼相當于
????var?f4?=?(a,b)?=>?a+b
????console.log(f4(4,3))? //7
</script>
箭頭函數多用于匿名函數的定義
03-Vue
一、介紹
1、Vue.js 是什么
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。
Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
官方網站：https://cn.vuejs.org
2、初始Vue.js
創(chuàng)建 demo.html
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
</head>
<body>
????<!--?id標識vue作用的范圍?-->
????<div?id="app">
????????<!--?{{}}?插值表達式，綁定vue中的data數據?-->
????????{{message}}
????</div>
????<!--?導入包?-->
????<script?src="vue.min.js"></script>
????<script>
????????//?創(chuàng)建一個vue對象
????????new?Vue({
????????????//綁定vue作用的范圍
????????????el:?'#app',
????????????//定義頁面中顯示的模型數據
????????????data:{?
????????????????message:"Hello?Vue!"
????????????}
????????})
????</script>
</body>
</html>
這就是聲明式渲染：Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統(tǒng)
這里的核心思想就是沒有繁瑣的DOM操作，例如jQuery中，我們需要先找到div節(jié)點，獲取到DOM對象，然后進行一系列的節(jié)點操作
在vs code中創(chuàng)建代碼片段：
文件 => ?首選項 => 用戶代碼片段 => 新建全局代碼片段/或文件夾代碼片段：vue-html.code-snippets
注意：制作代碼片段的時候，字符串中如果包含文件中復制過來的“Tab”鍵的空格，要換成“空格鍵”的空格
{
????????"vue?htm":?{
????????????"scope":?"html",
????????????"prefix":?"vuehtml",
????????????"body":?[
????????????????"<!DOCTYPE?html>",
????????????????"<html?lang=\"en\">",
????????????????"",
????????????????"<head>",
????????????????"????<meta?charset=\"UTF-8\">",
????????????????"????<meta?name=\"viewport\"?content=\"width=device-width,?initial-scale=1.0\">",
????????????????"????<meta?http-equiv=\"X-UA-Compatible\"?content=\"ie=edge\">",
????????????????"????<title>Document</title>",
????????????????"</head>",
????????????????"",
????????????????"<body>",
????????????????"????<div?id=\"app\">",
????????????????"",
????????????????"????</div>",
????????????????"????<script?src=\"vue.min.js\"></script>",
????????????????"????<script>",
????????????????"????????new?Vue({",
????????????????"????????????el:?'#app',",
????????????????"????????????data:?{",
????????????????"????????????????$1",
????????????????"????????????}",
????????????????"????????})",
????????????????"????</script>",
????????????????"</body>",
????????????????"",
????????????????"</html>",
????????????],
????????????"description":?"my?vue?template?in?html"
????????}
????}
輸入vue?htm即可引用模板。
二、基本語法
1、基本數據渲染和指令
創(chuàng)建 01-基本數據渲染和指令.html
你看到的?v-bind?特性被稱為指令。指令帶有前綴?v-
除了使用插值表達式{{}}進行數據渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
</head>
<body>
????<div?id="app">
????????<!--?如果要將模型數據綁定在html屬性中，則使用?v-bind?指令
????????????此時title中顯示的是模型數據
????????-->
????????<h1?v-bind:title="content">
????????????{{message}}
????????</h1>
????????<!--?v-bind?指令的簡寫形式：?冒號（:）?-->
????????<h1?:title='content'>
????????????{{message}}
????????</h1>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????content:'我是標題',
????????????????message:'頁面加載于'?+?new?Date().toLocaleString()
????????????}
????????})
????</script>
</body>
</html>
2、雙向數據綁定
創(chuàng)建 02-雙向數據綁定.html
雙向數據綁定和單向數據綁定：使用?v-model?進行雙向數據綁定
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
</head>
<body>
????<div?id="app">
????????<!--?v-bind:value只能進行單向的數據渲染?-->
????????<input?type="text"?v-bind:value="searchMap.keyWord"></input>
????????<!--?v-model?可以進行雙向的數據綁定??-->
????????<input?type="text"?v-model="searchMap.keyWord"></input>
????????<p>您要查詢的是：{{searchMap.keyWord}}</p>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????searchMap:{
????????????????????keyWord:'尚硅谷'
????????????????}
????????????}
????????})
????</script>
</body>
</html>
單向綁定：
雙向綁定：
3、事件
創(chuàng)建 03-事件.html
需求：點擊查詢按鈕，按照輸入框中輸入的內容查找公司相關信息
在前面的例子基礎上，data節(jié)點中增加 result，增加 methods節(jié)點 并定義 search方法。
html中增加 button 和 p
使用?v-on?進行事件處理，v-on:click?表示處理鼠標點擊事件，事件調用的方法定義在?vue對象聲明的?methods?節(jié)點中。
完善search方法。
<body>
????<div?id="app">
????????<!--?v-on?指令綁定事件，click指定綁定的事件類型，事件發(fā)生時調用vue中methods節(jié)點中定義的方法?-->
????????<button?v-on:click='search()'>查詢</button>
????????<!--?v-on?指令的簡寫形式?@?-->
????????<button?@click="search()">查詢1</button>
????????<p>您要查詢的是：{{searchMap.keyWord}}</p>
????????<p><a?v-bind:href="result.site"?target="_blank">{{result.title}}</a></p>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????searchMap:{
????????????????????keyWord:?'尚硅谷'
????????????????},
????????????????result:{}
????????????},
????????????methods:{
????????????????search(){
????????????????????console.log('search')
????????????????????this.result?=?{
????????????????????????"title":"尚硅谷",
????????????????????????"site":"http://www.atguigu.com"
????????????????????}
????????????????}
????????????}
????????})
????</script>
</body>
</html>
簡寫
?????????<!--?v-on?指令的簡寫形式?@?-->
????????<button?@click="search()">查詢1</button>
4、修飾符
創(chuàng)建 04-修飾符.html
修飾符 (Modifiers) 是以半角句號（.）指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調用 event.preventDefault()：
即阻止事件原本的默認行為
<body>
????<div?id="app">
????????<form?action="save"?v-on:submit.prevent="onSubmit">
????????????<label?for="username">
????????????????<input?type="text"?id="username"?v-model="user.username"></input>
????????????????<button?type="submit">保存</button>
????????????</label>
????????</form>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????user:{}
????????????},
????????????methods:{
????????????????onSubmit(){
????????????????????if(this.user.username){
????????????????????????console.log('提交表單')
????????????????????}else{
????????????????????????alert('請輸入用戶名')
????????????????????}
????????????????}
????????????}
????????})
????</script>
</body>
<body>
????<div?id="app">
????????<form?action="save"?v-on:submit.prevent="onSubmit">
????????????????<input?type="text"?id="name"?v-model="user.username"></input>
????????????????<button?type="submit">保存</button>
????????</form>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????user:{}
????????????},
????????????methods:{
????????????????onSubmit(){
????????????????????if(this.user.username){
????????????????????????console.log('提交表單')
????????????????????}else{
????????????????????????alert('請輸入用戶名')
????????????????????}
????????????????}
????????????}
????????})
????</script>
</body>
5、條件渲染
創(chuàng)建 05-條件渲染.html
v-if：條件指令
注意：單個復選框綁定到布爾值
<body>
????<div?id="app">
????????<input?type="checkbox"?v-model="ok">同意許可協(xié)議</input>
????????<!--?v:if條件指令：還有v-else、v-else-if?切換開銷大?-->
????????<h1?v-if="ok">if：Lorem?ipsum?dolor?sit?amet.</h1>
????????<h1?v-else>no</h1>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????ok:false
????????????}
????????})
????</script>
</body>
v-show：條件指令
使用v-show完成和上面相同的功能
<!-- v:show 條件指令 初始渲染開銷大 -->
<h1v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1v-show="!ok">no</h1>
????v-if?是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當地被銷毀和重建。
????v-if?也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。
????相比之下，v-show?就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
????一般來說，v-if?有更高的切換開銷，而?v-show?有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用?v-show?較好；如果在運行時條件很少改變，則使用?v-if?較好。
6、列表渲染
創(chuàng)建 06-列表渲染.html
v-for：列表循環(huán)指令
例1：簡單的列表渲染
<body>
????<div?id="app">
????????<!--?1、簡單的列表渲染?-->
????????<ul>
????????????<li?v-for="n?in?10">{{n}}</li>
????????</ul>
????????<ol>
????????????<!--?如果想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在后面?-->
????????????<li?v-for="(n,index)?in?5">{{n}}------{{index}}</li>
????????</ol>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????}
????????})
????</script>
</body>
例2：遍歷數據列表
<body>
????<div?id="app">
????????<!--?2、遍歷數據列表?-->
????????<table?border="1">
????????????<!--?<tr?v-for="item?in?userList"></tr>?-->
????????????<tr?v-for="(user,index)?in?userList">
????????????????<td>{{index}}</td>
????????????????<td>{{user.id}}</td>
????????????????<td>{{user.username}}</td>
????????????????<td>{{user.age}}</td>
????????????</tr>
????????</table>
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????userList:[
????????????????????{?id:?1,?username:?'helen',?age:?18?},
????????????????????{?id:?2,?username:?'peter',?age:?28?},
????????????????????{?id:?3,?username:?'andy',?age:?38?}
????????????????]
????????????}
????????})
????</script>
</body>
04-Vue.js進階
一、組件（重點）
組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
組件系統(tǒng)讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹：
1、局部組件
創(chuàng)建 01-1-局部組件.html
定義組件
?<script>
????????new?Vue({
????????????el:?'#app',
????????????//?定義局部組件，這里可以定義多個局部組件
????????????components:?{
????????????????//組件的名字
????????????????'Navbar':?{
????????????????????//組件的內容
????????????????????template:?'<ul><li>首頁</li><li>學員管理</li></ul>'
????????????????}
????????????}
????????})
????</script>
使用組件
?<div?id="app">
????????<Navbar></Navbar>
????</div>
2、全局組件
創(chuàng)建 01-2-全局組件.html
定義全局組件：components/Navbar.js
//?定義全局組件
Vue.component('Navbar',{
????template:?'<ul><li>首頁</li><li>學員管理</li><li>講師管理</li></ul>'
}
)
<body>
????<div?id="app">
????????<Navbar></Navbar>
????</div>
????<script?src="vue.min.js"></script>
????<script?src="components/Navbar.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app'
????????})
????</script>
</body>
二、實例生命周期
重點兩個方法：created(在頁面渲染之前執(zhí)行)、mounted(在頁面渲染之后執(zhí)行)
創(chuàng)建 03-vue實例的生命周期.html
data: {
message:'床前明月光'
},
methods: {
show() {
console.log('執(zhí)行show方法')
? ? },
update() {
this.message='玻璃好上霜'
? ? }
},
<button@click="update">update</button>
<h3 id="h3">{{ message }}</h3>
分析生命周期相關方法的執(zhí)行時機
//===創(chuàng)建時的四個事件
beforeCreate() {// 第一個被執(zhí)行的鉤子方法：實例被創(chuàng)建出來之前執(zhí)行
console.log(this.message)//undefined
this.show()//TypeError: this.show is not a function
// beforeCreate執(zhí)行時，data 和 methods 中的 數據都還沒有沒初始化
},
created() {// 第二個被執(zhí)行的鉤子方法
console.log(this.message)//床前明月光
this.show()//執(zhí)行show方法
// created執(zhí)行時，data 和 methods 都已經被初始化好了！
// 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作
},
beforeMount() {// 第三個被執(zhí)行的鉤子方法
console.log(document.getElementById('h3').innerText)//{{ message }}
// beforeMount執(zhí)行時，模板已經在內存中編輯完成了，尚未被渲染到頁面中
},
mounted() {// 第四個被執(zhí)行的鉤子方法
console.log(document.getElementById('h3').innerText)//床前明月光
// 內存中的模板已經渲染到頁面，用戶已經可以看見內容
},
//===運行中的兩個事件
beforeUpdate() {// 數據更新的前一刻
console.log('界面顯示的內容：'+document.getElementById('h3').innerText)
console.log('data 中的 message 數據是：'+this.message)
// beforeUpdate執(zhí)行時，內存中的數據已更新，但是頁面尚未被渲染
},
updated() {
console.log('界面顯示的內容：'+document.getElementById('h3').innerText)
console.log('data 中的 message 數據是：'+this.message)
// updated執(zhí)行時，內存中的數據已更新，并且頁面已經被渲染
}
<body>
????<div?id="app">
????</div>
????<script?src="vue.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????},
????????????created(){
????????????????debugger? //斷點
????????????????//在頁面渲染之前執(zhí)行
????????????????console.log('created...')
????????????},
????????????mounted(){
????????????????debugger
????????????????//在頁面渲染之后執(zhí)行
????????????????console.log('mounted...')
????????????}
????????})
????</script>
</body>
四、路由
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。
Vue.js 路由需要載入?vue-router 庫
創(chuàng)建 04-路由.html
1、引入js
????//有順序關系，先引入vue再引入router，否則效果出不來
????<script?src="vue.min.js"></script>
????<script?src="vue-router.min.js"></script>
2、編寫html
??<div?id="app">
????????<h1>Hello?App!</h1>
????????<p>
????????????<!--?使用?router-link?組件來導航.?-->
????????????<!--?通過傳入?`to`?屬性指定鏈接.?-->
????????????<!--?<router-link>?默認會被渲染成一個?`<a>`?標簽?-->
????????????<router-link?to="/">首頁</router-link>
????????????<router-link?to="/student">會員管理</router-link>
????????????<router-link?to="/teacher">講師管理</router-link>
????????</p>
????????<!--?路由出口?-->
????????<!--?路由匹配到的組件將渲染在這里?-->
????????<router-view></router-view>
????</div>
3、編寫js
<script>
????????//?1.?定義（路由）組件。
????????//?可以從其他文件?import?進來
????????const?Welcome?=?{?template:?'<div>歡迎</div>'}
????????const?Student?=?{?template:?'<div>student?list</div>'?}
????????const?Teacher?=?{?template:?'<div>teacher?list</div>'?}
????????//?2.?定義路由
????????//?每個路由應該映射一個組件。
????????const?routes?=?[
????????????{?path:'/',component:Welcome},?//設置默認指向的路徑
????????????{?path:?'/student',?component:?Student?},
????????????{?path:?'/teacher',?component:?Teacher?}
????????]
?????????//?3.?創(chuàng)建?router?實例，然后傳?`routes`?配置
?????????const?router?=?new?VueRouter({
?????????????routes?//?（縮寫）相當于?routes:?routes
?????????})
?????????//?4.?創(chuàng)建和掛載根實例。
?????????//?從而讓整個應用都有路由功能
?????????const?app?=?new?Vue({
?????????????el:'#app',
?????????????router
?????????})
?????????//?現在，應用已經啟動了！
????</script>
五、axios
axios是獨立于vue的一個項目，基于promise用于瀏覽器和node.js的http客戶端
在瀏覽器中可以幫助我們完成 ajax請求的發(fā)送
在node.js中可以向遠程接口發(fā)送請求
獲取數據：
? ?? <script?src="vue.min.js"></script>
????<script?src="axios.min.js"></script>
注意：測試時需要開啟后端服務器，并且后端開啟跨域訪問權限
創(chuàng)建一個json文件用于測試：data.json
{
????"success":true,
????"code":20000,
????"message":"成功",
????"data":{
????????"items":[
????????????{"name":"lucy","age":20},
????????????{"name":"mary","age":30},
????????????{"name":"jack","age":40}
????????]
????}
}
2、顯示數據
可在控制臺查看輸出
<body>
????<div?id="app">
????????<div?v-for="user?in?userList">
????????????{{user.name}}-----{{user.age}}
????????</div>
????</div>
????<script?src="vue.min.js"></script>
????<script?src="axios.min.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????//固定的結構
????????????data:?{//在data中定義變量和初始值
????????????????//定義變量，值空數組
????????????????userList:[]
????????????},
????????????created(){//頁面渲染之前執(zhí)行
????????????????//調用定義的方法
????????????????this.getUserList()
????????????},
????????????methods:{//編寫具體的方法
????????????????//創(chuàng)建方法
????????????????getUserList(){
????????????????????//使用axios發(fā)送ajax請求
????????????????????//axios.提交方式（"請求接口路徑"）.then(箭頭函數).catch(箭頭函數)
????????????????????//axios.get('http://localhost:8081/admin/ucenter/member')
????????????????????axios.get("data.json")
?????????????????????????.then(response?=>?{
????????????????????????????//response就是請求之后返回數據
????????????????????????????//??console.log("******"+response)
????????????????????????????//?console.log(response)
????????????????????????????//通過response獲取具體的數據，賦值給定義的空數組
????????????????????????????this.userList?=?response.data.data.items
????????????????????????????console.log(this.userList)
?????????????????????????})//請求成功執(zhí)行then方法
?????????????????????????.catch(error?=>?{
?????????????????????????})//請求失敗執(zhí)行catch方法
????????????????}
????????????}
????????})
????</script>
</body>
六、element-ui：
element-ui 是餓了么前端出品的基于 Vue.js的 后臺組件庫，方便程序員進行頁面快速布局和構建
官網：?http://element-cn.eleme.io/#/zh-CN
創(chuàng)建 06-element-ui.html
將element-ui引入到項目
1、引入css
<!-- import CSS -->
<linkrel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
2、引入js
<!-- import Vue before Element -->
<scriptsrc="vue.min.js"></script>
<!-- import JavaScript -->
<scriptsrc="element-ui/lib/index.js"></script>
3、編寫html
<div id="app">
????<el-button @click="visible = true">Button</el-button>
????<el-dialog:visible.sync="visible" title="Hello world">
????????<p>Try Element</p>
????</el-dialog>
</div>
關于.sync的擴展閱讀
http://www.itdecent.cn/p/d42c508ea9de
4、編寫js
<script>
newVue({
? ? el:'#app',
? ? data:function() {//定義Vue中data的另一種方式
????????????return {visible:false}
? ? ? }
? ? })
</script>
測試
其他ui組件我們在項目中學習
05-Node
一、簡介
1、什么是Node.js
簡單的說 Node.js 就是運行在服務端的 JavaScript。
Node.js是一個事件驅動I/O服務端JavaScript環(huán)境，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非?？?，性能非常好。
2、Node.js有什么用
如果你是一個前端程序員，你不懂得像PHP、Python或Ruby等動態(tài)編程語言，然后你想創(chuàng)建自己的服務，那么Node.js是一個非常好的選擇。
Node.js 是運行在服務端的 JavaScript，如果你熟悉Javascript，那么你將會很容易的學會Node.js。
當然，如果你是后端程序員，想部署一些高性能的服務，那么學習Node.js也是一個非常好的選擇。
二、安裝
1、下載
LTS：長期支持版本
Current：最新版
2、安裝
3、查看版本
node-v
三、快速入門
1、創(chuàng)建文件夾nodejs
2、控制臺程序
創(chuàng)建 01-控制臺程序.js
console.log('Hello?Node.js')
打開命令行終端：Ctrl + Shift + y
進入到程序所在的目錄，輸入
瀏覽器的內核包括兩部分核心：
????DOM渲染引擎；
????js解析器（js引擎）
js運行在瀏覽器中的內核中的js引擎內部
Node.js是脫離瀏覽器環(huán)境運行的JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）
3、服務器端應用開發(fā)（了解）
創(chuàng)建 02-server-app.js
const?http?=?require('http');
http.createServer(function?(request,?response)?{
????//?發(fā)送?HTTP?頭部?
????//?HTTP?狀態(tài)值:?200?:?OK
????//?內容類型:?text/plain
????response.writeHead(200,?{'Content-Type':?'text/plain'});
????//?發(fā)送響應數據?"Hello?World"
????response.end('Hello?Server');
}).listen(8888);
//?終端打印如下信息
console.log('Server?running?at?http://127.0.0.1:8888/');
運行服務器程序
服務器啟動成功后，在瀏覽器中輸入：http://localhost:8888/?查看webserver成功運行，并輸出html頁面
停止服務：ctrl + c
4、在vscode工具中打開cmd窗口，進行js代碼的執(zhí)行
nodejs問題說明
