avaScript 是一門編程語言，可為網站添加交互功能（例如：游戲、動態樣式、動畫以及在按下按鈕或收到表單數據時做出的響應等）。本文介紹了 JavaScript 的精彩之處和主要用途。

JavaScript 到底是什么？

JavaScript（縮寫：JS）是一門完備的 動態編程語言)。當應用于HTML文檔時，可為網站提供動態交互特性。由布蘭登·艾克（ Brendan Eich，Mozilla 項目、Mozilla 基金會和 Mozilla 公司的聯合創始人）發明。

JavaScript 的應用場合極其廣泛，簡單到幻燈片、照片庫、浮動布局和響應按鈕點擊，復雜到游戲、2D/3D 動畫、大型數據庫驅動程序等等。

JavaScript 相當簡潔，卻非常靈活。開發者們基于 JavaScript 核心編寫了大量實用工具，可以使 開發工作事半功倍。其中包括：

1、瀏覽器應用程序接口（API）—— 瀏覽器內置的 API 提供了豐富的功能，比如：動態創建 HTML 和設置 CSS 樣式、從用戶的攝像頭采集處理視頻流、生成3D 圖像與音頻樣本等等。

2、第三方 API —— 讓開發者可以在自己的站點中整合其它內容提供者（Twitter、Facebook 等）提供的功能。

3、第三方框架和庫 —— 用來快速構建網站和應用。

本節是一篇 JavaScript 簡介，因此這個階段不會對 JavaScript 語言和上述工具做過多的介紹。之后可以到 JavaScript 學習區 和 MDN 的其它地方學習更多細節。

下面對語言核心做一個不完整介紹，期間還可以接觸到一些瀏覽器 API 特性。

“Hello World!”示例

讀到這里你一定很激動，誠然 —— JavaScript 是最振奮人心的 Web 技術之一，而且在嫻熟駕馭之后，你的網站在功能和創新力上將達到一個新的維度。

然而，JavaScript 比 HTML 和 CSS 學習起來更加復雜一點，所以必須一步一個腳印地學習。首先，來看看如何在頁面中添加一些基本的信息 JavaScript 腳本來建造一個 “Hello world!” 示例

重要的是：如果你沒有完成之前的課程實踐，可聯系我獲取資料包繼續跟著練習哦，如果你要實踐，前兩篇筆記就是html和css階段的內容哦。

0. 首先，打開你的測試站點，創建一個名為 scripts 的文件夾。然后在其中創建一個名為 main.js 的文件。
1. 下一步，在index.html文件</body>標簽前的新行添加以下代碼。

<script src="scripts/main.js" defer></script>

0. 與 CSS <link>的元素類似，它將** JavaScript**引入頁面以作用于 HTML（以及 CSS 等頁面上所有內容）;
1. 現在將以下代碼添加到main.js文件中：

let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

0. 最后，保存HTML和JavaScript 文件，用瀏覽器打開 index.html。可以看到如下內容：

注：我們將 <script> 放在HTML文件的底部附近的原因是瀏覽器會按照代碼在文件中的順序加載 HTML。如果先加載的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加載而失效。因此，將 JavaScript 代碼放在 HTML頁面的底部附近通常是最好的策略。

發生了什么？

JavaScript 把頁面的標題改成了 “Hello world!” 。首先用 querySelector() 函數獲取標題的引用，并把它儲存在 myHeading 變量中。這與 CSS 選擇器的用法非常相像：若要對某個元素進行操作，首先得選擇它。

之后，把 myHeading 變量的屬性 textContent （標題內容）修改為 “Hello world!” 。

注：上面用到的兩個函數都來自文檔對象模型 (DOM) API， 均用于控制文檔。

JavaScript 快速入門

我們來學習一些 JavaScript 的核心特性，從而更好地理解它的運行機制。學習這些知識很有意義，因為這些原理普遍適用于所有編程語言，掌握好它們，可以做到融會貫通。

重要：學習本節時，請嘗試將示例代碼輸入到 JavaScript 控制臺里看看會發生什么。 JavaScript 控制臺的更多信息請查看 瀏覽器開發者工具。

變量（Variable）

變量 (en-US) 是存儲能量的容器。要聲明一個變量，先輸入關鍵字 let 或 var，然后輸入合適的名稱：

let myVariable;

注：行末的分號表示當前語句結束，不過只有在單行內需要分割多條語句時，這個分號才是必須的。然而，一些人認為每條語句末尾加分號是一種好的風格。

注：幾乎任何內容都可以作為變量名，但還是有一些限制（請參閱 變量命名規則）。如果你不確定，還可以 驗證變量名 是否有效。

注：JavaScript 對大小寫敏感，myVariable 和 myvariable 是不同的。如果代碼出現問題了，先檢查一下大小寫！

注：想要了解更多關于 var 和 let 的不同點，可以參閱 var 與 let 的區別。

變量定義后可以進行賦值：

myVariable = '李雷';

也可以將定義、賦值操作寫在同一行：

let myVariable = '李雷';

可以直接通過變量名取得變量的值：

myVariable;

變量在賦值后是可以更改的：

let myVariable = '李雷';
myVariable = '韓梅梅';

注意變量可以有不同的 數據類型 ：

那么變量有什么用呢？我們說，編程時它們無所不在。如果知道無法改變，那么就無法做任何動態的工作，比如發送個性化的問候，或是改變在圖片庫當前展示的圖片。

注釋

類似于 CSS，JavaScript 中間可以添加注釋。

/*
這里的所有內容
都是注釋。
*/

如果注釋只有一行，可以更簡單地將注釋放在兩個斜杠之后，就像這樣：

// 這是一條注釋。

運算符

運算符 (en-US)是一類數學符號，可以根據兩個值（或變量）產生結果。以下表格中介紹了一些最簡單的運算符，可以在瀏覽器控制臺里嘗試一下后面的示例。

譯注：這里說“根據兩個值（或變量）產生結果”是不嚴謹的，計算兩個變量的運算符稱為“二元運算符”，還有一元運算符和三元運算符，下表中的“取非”就是一元運算符。

運算符種類遠不止這些，不過目前上表已經夠用了。完整列表請參閱 表達式和運算符。

注：不同類型數據之間的計算可能出現奇怪的結果，因此必須正確引用變量，才能得出預期結果。比如在控制臺輸入 "35" + "25"，為什么不能得到 60？因為引號將數字轉換成了字符串，所以結果是連接兩個字符串而不是把兩個數字相加。輸入 35 + 25 才能得到正確結果。

條件語句

條件語句是一種代碼結構，用來測試表達式的真假，并根據測試結果運行不同的代碼。一個常用的條件語句是 if ... else。下面是一個示例：

let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('我最喜歡巧克力冰激淋了。');
} else {
  alert('但是巧克力才是我的最愛呀……');
}

if ( ... ) 中的表達式進行測試，用（上文所提到的）等于運算符來比較變量 iceCream 與字符串 'chocolate' 是否相等。 如果返回 true，則運行第一個代碼塊；如果返回 false，則跳過第一塊直接運行 else 之后的第二個代碼塊。

函數（Function）

函數 用來封裝可復用的功能。如果沒有函數，一段特定的操作過程用幾次就要重復寫幾次，而使用函數則只需寫下函數名和一些簡短的信息。之前已經涉及過一些函數，比如：

let myVariable = document.querySelector('h1');
alert('hello!');

document.querySelector 和 alert 是瀏覽器內置的函數，隨時可用。

如果代碼中有一個類似變量名后加小括號 () 的東西，很可能就是一個函數。函數通常包括參數，參數中保存著一些必要的數據。它們位于括號內部，多個參數之間用逗號分開。

比如， alert() 函數在瀏覽器窗口內彈出一個警告框，還應為其提供一個字符串參數，以告訴它警告框里要顯示的內容。

好消息是：人人都能定義自己的函數。下面的示例是為兩個參數進行乘法運算的函數：

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

嘗試在控制臺運行這個函數，不妨多試幾組參數，比如：

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

注：return語句告訴瀏覽器當前函數返回 result 變量。這是一點很有必要，因為函數內定義的變量只能在函數內使用。這叫做變量的 作用域。（詳見 變量作用域。）

事件

事件能為網頁添加真實的交互能力。它可以捕捉瀏覽器操作并運行一些代碼做為響應。最簡單的事件是 點擊事件，鼠標的點擊操作會觸發該事件。 可嘗試將下面的代碼輸入到控制臺，然后點擊頁面的任意位置：

document.querySelector('html').onclick = function() {
    alert('別戳我，我怕疼。');
}

Copy to Clipboard

將事件與元素綁定有許多方法。在這里選用了<html>元素，把一個匿名函數（就是沒有命名的函數，這里的匿名函數包含單擊鼠標時要運行的代碼）賦值給了html的onclick (en-US) 屬性。

請注意：

document.querySelector('html').onclick = function() {};

等價于

let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

只是前者更簡潔。

完善示例網頁

現在你已經具備了一些 JavaScript 基礎，下面來為示例網頁添加一些更酷的特性。

添加一個圖像切換器

這里將用新的 DOM API 為網頁添加另一張圖片，并用 JavaScript 使圖片在點擊時進行切換。

0. 首先，找到另一張你想要在你的頁面上展示的圖片，且尺寸與第一張圖片盡可能相同。
1. 將這張圖片儲存在你的images目錄下。
2. 將圖片重命名為'firefox2.png'（去掉引號）。
3. 打開main.js文件，輸入下面的JavaScript 代碼 ( 請刪除剛才的 "hello world" 腳本)：

let myImage = document.querySelector('img');
myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

5、保存所有文件并用瀏覽器打開 index.html 。點擊圖片可以發現它能夠切換了！

這里首先把<img> 元素的引用存放在myImage變量里。然后將這個變量的onclick事件與一個匿名函數綁定。每次點擊圖片時：

0. 獲取這張圖片的 src 屬性值。
1. 用一個條件句來判斷src的值是否等于原始圖像的路徑:
0. 如果是，則將 src 的值改為第二張圖片的路徑，并在 `` 內加載該圖片。
1. 如果不是（意味著它已經修改過）, 則把 src 的值重新設置為原始圖片的路徑，即原始狀態。

添加個性化歡迎信息

下面來添加另一段代碼，在用戶初次進入站點時將網頁的標題改成一段個性化歡迎信息（即在標題中添加用戶的名字）。名字信息會由 Web Storage API 保存下來，即使用戶關閉頁面之后再重新打開，仍可得到之前的信息。還會添加一個選項，可以根據需要改變用戶名字以更新歡迎信息。

1、打開index.html， 在<script>標簽前添加以下代碼，將在頁面底部顯示一個“切換用戶”字樣的按鈕：

<button>切換用戶</button>

2、將以下 JavaScript 代碼原封不動添加到main.js文件底部，將獲取新按鈕和標題的引用，并保存至變量中：

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

3、然后添加以下函數來設置個性化歡迎信息。（函數需要在調用后生效，下文中提供了兩種對該函數的調用方式）

function setUserName() {
  let myName = prompt('請輸入你的名字。');
  localStorage.setItem('name', myName);
  myHeading.textContent = '跟著艾編程學習，太有成就感了，' + myName;
}

該函數首先調用了prompt()函數， 與alert()類似會彈出一個對話框。但是這里需要用戶輸入數據，并在確定后將數據存儲在myName變量里。接下來將調用localStorageAPI ，它可以將數據存儲在瀏覽器中供后續獲取。這里用localStorage的setItem()函數來創建一個'name'數據項，并把myName變量復制給它。最后將textContent屬性設置為一個歡迎字符串加上這個新設置的名字。

4、接下來，添加以下的if ... else 塊。我們可以稱之為初始化代碼，因為它在頁面初次讀取時進行構造工作：

if(!localStorage.getItem('name')) {
setUserName();
} else {
let storedName = localStorage.getItem('name');
myHeading.textContent = '跟著艾編程學習，太有成就感了，' + storedName;
}

5、Copy to Clipboard這里首次使用了取非運算符（邏輯非，用!表示）來檢測'name'數據是否存在。若不存在，調用setUserName()創建。若存在（即用戶上次訪問時設置過），調用getItem()獲取保存的名字，像上文的setUserName()那樣設置textContent。

0. 最后，為按鈕設置 onclick 事件處理器。按鈕按下時運行 setUserName() 函數。這樣用戶就可以通過按這個按鈕來自由設置新名字了：

myButton.onclick = function() {
setUserName();
}

第一次訪問網頁時，頁面將詢問用戶名并發出一段個性化的信息。可隨時點擊按鈕來改變用戶名 。告訴你一個額外的福利，因為用戶名是保存在 localStorage 里的，網頁關閉后也不會丟失，所以重新打開瀏覽器時所設置的名字信息將依然存在:)

用戶名為 null

運行示例代碼，彈出輸入用戶名的對話框，試著按下 取消 按鈕。此時標題會顯示為 “跟著艾編程學習太有成就感了，null”。這是因為取消提示對話框后值將設置為 null，這是 JavaScript 中的一個特殊值，表示引用不存在。

也可以不輸入任何名字直接按 確認，你的標題會顯示為“跟著艾編程學習太有成就感了，”，原因么顯而易見。要避免這些問題，應該更新 setUserName() 來檢查用戶是否輸入了 null 或者空名字：

function setUserName() {
  let myName = prompt('請輸入你的名字。');
  if(!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.innerHTML = '跟著艾編程學習太有成就感了，' + myName;
  }
}

用人話說就是：如果 myName 沒有值或值為 null，就再次從頭運行setUserName()。如果有值（上面的表達式結果不為真），就把值存儲到 localStorage 并且設置標題。

小結

如果你按部就班完成本文的實踐，那么最終可以得到以下頁面

相關推薦：

1. 前端新手看過來，手把手帶你輕松上手html的實操
2. 前端新手看過來，教你從零CSS做漂亮網頁，這樣學習太有成就感了

ue (讀音 /vju?/，類似于 View) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

一、MVVM模式和第一個Vue程序

1.什么是 MVVM

• 該層向上與視圖層進行雙向數據綁定
• 向下與 Model 層通過接口請求進行數據交互

• Vue的安裝方式：

??1.1 使用CDN方法(初學者使用)
??也可以直接使用CDN的方式引入，代碼如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2Vue-cli腳手架
??利用Vue-cli 腳手架構建Vue項目，在后面第七點詳細講解。(中大型項目中推薦使用)。

2.第一個Vue程序

?1、創建一個 HTML 文件

?2、引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

完整示例：

<!DOCTYPE html>
  <html>
<head lang="en">
    <meta charset="UTF-8">
    <title>貝西說</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view視圖-->
 <div id="app">
     <input type="text" v-model="message"/>
     {{message}}
 </div>
 <script>
     var vue=new Vue({
        el:"#app",
         /*model數據*/
         data:{
             message:"hello,vue"
         }
     });
 </script>
</body>
</html>

演示效果：（視圖驅動數據，數據驅動視圖）

二、基礎語法

v-bind

v-bind就是用于綁定數據和元素屬性的
完整示例：

<body>
  <div class="app">
        <a v-bind:href="url">點我</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>

注意：
? v-bind后面是：屬性名=，我的理解是表示綁定這個屬性，綁定之后，對應的值要去vue的數據里面找。
? 當我們在控制臺改變url時，對應也會變化。

相同的，我們還可以綁定圖片src屬性、超鏈接的class

<body>
    <div class="app">
      <a v-bind:href="url">點我</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

注意：

<div class="app">
	  <a v-bind:href="url">點我</a>
</div>  

通常我們可以將v-bind：簡寫成：

<div class="app">
<a :href="url">點我</a>
</div>

v-if,v-else

v-if,v-else

完整示例：

<body>
    <div id="app">
      <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>

v-if,v-else-if,v-else

<body>
    <div id="app">
      <div v-if="role=='beixi'|| role=='admin'">您好，admin</div>
        <div v-else-if="role=='jzj'">賈志杰</div>
        <div v-else>您無權訪問！</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 role:"admin",
             }
         });
     </script>
</body>

v-for

?1、v-for循環普通數組

<body>
  <div id="app">
        <p v-for="(item,index) in list">{{item}}----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>

2、v-for循環對象數組

<body>
<div id="app">
        <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'beixi'},
                    {id:2,name:'jzj'},
                    {id:3,name:'賈志杰'}
                ],
             }
         });
     </script>
</body>

3、v-for循環對象

<body>
  <div id="app">
        <p v-for="(val,key,index) in user">值：{{val}}---鍵：{{key}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"beixi",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>

?4、v-for循環數字

<body>
  <div id="app">
        <p v-for="count in 5">這是第{{count}}次循環</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{ }
         });
     </script>
</body>

三、Vue綁定事件

語法：

??v-on:事件名 = “方法名”
??簡寫： @事件名 = “方法名”
??事件名： click|keydown|keyup|mouseover|mouseout|自定義事件名

v-on事件監聽，完整示例：

<!DOCTYPE html>
  <html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>貝西說</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {{count}}
        <button v-on:click="count+=1">點我加1</button>
        <button v-on:click="sub">點我減1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>

注意：v-bind可以簡寫為 ： v-on: 可以簡寫@

四、Vue：表單雙綁、組件

1.什么是雙向數據綁定

Vue.js 是一個 MVVM 框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟著同步變化。這也算是 Vue.js 的精髓之處了。

值得注意的是，我們所說的數據雙向綁定，一定是對于 UI 控件來說的，非 UI 控件不會涉及到數據雙向綁定。單向數據綁定是使用狀態管理工具的前提。如果我們使用 vuex，那么數據流也是單項的，這時就會和雙向數據綁定有沖突。

2.在表單中使用雙向數據綁定

??你可以用 v-model 指令在表單 、 及 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。

??注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值!
示例1：

<body>
  <div id="app">
        <input type="text"  v-model="message"/>{{message}}
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{message:'' }
         });
     </script>
</body>

完成效果：

示例2：

  <div id="app">
    <input type="radio" name="sex" value="男" v-model="gender"/>男
        <input type="radio" name="sex" value="女" v-model="gender"/>女
        <p>{{gender}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{gender:'' }
         });
     </script>

示例3：

<body>
  <div id="app">
        <select v-model="selected">
            <option value="">--請選擇--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>
</body>

3.什么是組件

??組件是可復用的 Vue 實例，說白了就是一組可以重復使用的模板，跟 JSTL 的自定義標簽、Thymeleaf 的 th:fragment 等框架有著異曲同工之妙。
??通常一個應用會以一棵嵌套的組件樹的形式來組織：

例如，你可能會有頁頭、側邊欄、內容區等組件，每個組件又包含了其它的像導航鏈接、博文之類的組件。

4.簡單定義一個組件

注意：在實際開發中，我們并不會用以下方式開發組件，而是采用 vue-cli 創建 .vue 模板文件的方式開發，以下方法只是為了讓大家理解什么是組件。

  <div id="app">
    <beixi></beixi>
    </div>
     <script>
 	    //注冊組件
         Vue.component("beixi",{
             template:'<li>hello</li>'
         });
         var app = new Vue({
             el:"#app",
         });
     </script>

說明：

• Vue.component()：注冊組件
• beixi：自定義組件的名字
• template：組件的模板

5.使用props屬性動態傳遞參數

<body>
  <div id="app">
        <!--組件：使用props把值傳遞給組件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{{value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['beixi','jzj','賈志杰']
             }
         });
     </script>
</body>

說明：

v-for=“item in items”：遍歷 Vue 實例中定義的名為 items 的數組，并創建同等數量的組件

v-bind:value=“item”：將遍歷的 item 項綁定到組件中 props 定義的名為 value屬性上；= 號左邊的 value 為 props 定義的屬性名，右邊的為 item in items 中遍歷的 item 項的值

五、Axios異步通信

1.什么是Axios

??Axios 是一個開源的可以用在瀏覽器端和 NodeJS 的異步通信框架，她的主要作用就是實現 AJAX 異步通信，其功能特點如下：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API [JS中鏈式編程]
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防御 XSRF（跨站請求偽造）

??GitHub：https://github.com/axios/axios

??中文文檔：http://www.axios-js.com/

2.為什么要使用 Axios

??由于 Vue.js 是一個 視圖層框架 并且作者（尤雨溪）嚴格準守 SoC （關注度分離原則），所以 Vue.js 并不包含 AJAX 的通信功能，為了解決通信問題，作者單獨開發了一個名為 vue-resource 的插件，不過在進入 2.0 版本以后停止了對該插件的維護并推薦了 Axios 框架。少用jQuery，因為它操作Dom太頻繁！

3.第一個 Axios 應用程序

??咱們開發的接口大部分都是采用 JSON 格式，可以先在項目里模擬一段 JSON 數據，數據內容如下：創建一個名為 data.json 的文件并填入上面的內容，放在項目的根目錄下

{
  "name": "貝西說",
  "url": "https://blog.csdn.net/beixishuo",
    "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "太谷",
    "city": "山西晉中",
    "country": "中國"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/474668932"
    },
    {
      "name": "貝西說",
      "url": "https://blog.csdn.net/beixishuo"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

完整示例：

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
	<!--在線引入axios。在項目開發中會安裝axios組件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">貝西說</a>
</div>
<script>
    var app=new Vue({
        el:"#app",
        //data: 屬性
        data:function(){//需要處理(返回)后臺數據在頁面上渲染時使用
            return{
                //請求的返回參數格式必須和json字符串一樣
                info:{
                    name:null,//相當于形參占位，實際參數data.json會賦予
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted:function(){//mounted鉤子函數，相當于java中main函數。可以調用methods中定義的函數
        // axios.get('data.json').then(resp=>(console.log(resp.data)));
            axios.get('data.json').then(resp=>(this.info=resp.data));
        }
    })
</script>
</body>

注意:
讀取本地json文件中的數據時讀取失敗，如圖

解決方式就是右擊瀏覽器快捷方式，更改屬性，在目標后面加上

–allow-file-access-from-files

說明:

1. 在這里使用了 v-bind 將 a:href 的屬性值與 Vue 實例中的數據進行綁定
2. 使用 axios 框架的 get 方法請求 AJAX 并自動將數據封裝進了 Vue 實例的數據對象中
3. 我們在data中的數據結構必須要和Ajax響應回來的數據格式匹配！

4.axios API

可以通過將相關配置傳遞給 axios 來進行請求。

axios(config)

// 發送一個 POST 請求
axios({
	method: 'post',
	url: '/user/12345',
	data: {
	firstName: 'Fred',
	lastName: 'Flintstone'
	}
});

axios(url[, config])

// 發送一個 GET 請求 (GET請求是默認請求模式)
	axios('/user/12345');

請求方法別名
為了方便起見，已經為所有支持的請求方法提供了別名。

• axios.request（config）
• axios.get（url [，config]）
• axios.delete（url [，config]）
• axios.head（url [，config]）
• axios.post（url [，data [，config]]）
• axios.put（url [，data [，config]]）
• axios.patch（url [，data [，config]]）

注意

當使用別名方法時，不需要在config中指定url，method和data屬性。

5.Vue的生命周期

六、計算屬性

1.什么是計算屬性

??當一些數據需要根據其它數據變化時,需要進行處理才能去展示,雖然vue提供了綁定數據表達式綁定的方式,但是設計它的初衷只是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護,對于一些比較復雜和特殊的計算有可能就捉襟見肘了,而且計算的屬性寫在模板里也不利于項目維護

computed主要的作用:

• ??分離邏輯(模板和數據分離)
• 緩存值
• ??雙向綁定(getter,setter)

簡單理解為：把計算的結果當作屬性返回去

2.完整示例

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text"  v-model="num1"/><input type="text" v-model="num2"/>
    <p>求和結果{{result}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{num1:1,num2:2},
        computed:{//計算屬性
           result:function(){
               return parseInt(this.num1)+parseInt(this.num2);
           }
        }
    })
</script>
</body>

3、methods方法與computed計算屬性區別

1. 兩者的執行結果是完全相同的
2. 計算屬性是基于他們的依賴進行緩存的，只有在相關依賴發生改變時，他們才會重新求值，也就是說，只要他的依賴沒有發生變化，那么每次訪問的時候計算屬性都會立即返回之前的計算結果，不再執行函數
3. 每次觸發重新渲染時，調用方法將總會再次執行函數

七、前端工程化 vue-cli

Vue腳手架指的是vue-cli，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程序而且可用于自動生成vue和webpack的項目模板。

利用vue-cli腳手架來構建Vue項目需要先安裝Node.js和NPM環境。
1.Node.js的安裝

Node.js的安裝比較簡單，大家需要在node.js官網(https://nodejs.org/en/download/)下載并安裝node.js環境，windows的推薦下載Windows Installer (.msi)。同時，大家會得到一個附送的NPM工具。

a，安裝Node.js，雙擊下載好的node文件，如圖所示。

安裝過程比較簡單，一直“下一步”即可。
b，環境變量配置：安裝完成后需要設置環境變量：即Path中添加安裝目錄(例如：D:\java\nodejs)，如圖所示。

c，點擊開始=》運行=》輸入"cmd" => 輸入node -v如圖所示，驗證安裝是否成功。

2.npm安裝
由于node.js已經集成了npm，所以之前npm也一并安裝好了。所以在cmd終端輸入npm -v 來測試是否安裝成功。命令如圖 所示，出現版本提示表示安裝成功。

3基本使用

步驟如下：
①　搭建第一個完整的Vue-cli 腳手架構建的項目。

②　安裝完成，輸入Vue -V，如果出現相應的版本號，則說明安裝成功。如圖7-6所示。

③　我們可以使用vue-cli來快速生成一個基于webpack模板構建的項目，如圖所示，項目名為vue-project。

④　配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創建的一個基于 webpack 的 vue.js 項目。
然后進入項目目錄（如：cd vue-project），使用 npm install安裝依賴，如圖所示。

• 依賴安裝完成后，我們來看一下項目的目錄結構，如下所示：

.
|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- node_modules		   //所需要依賴資源
|-- src                              // 源碼目錄
|   |--  assets                   	   //存放資產文件
|   |-- components                   // vue公共組件
|   |-- router                   	//存放路由js文件，用于頁面的跳轉
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各種公共組件
|-- static                           // 靜態文件，比如一些圖片，json數據等
|   |-- data                           // 群聊分析得到的數據用于數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息

對于開發者更多操作的是src目錄：

|-- src                              // 源碼目錄
|   |--  assets                   	   //存放資產文件
|   |-- components                   // vue公共組件
|   |-- router                   	//存放路由js文件，用于頁面的跳轉
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js   

④　輸入npm run dev命令來啟動項目，如圖所示。

運行成功后在瀏覽器輸入：http://localhost:8080，訪問項目結果如圖所示。