var a=1 + 3;

var a=1 + 3 ; var b='abc';

;;;

1 + 3;'abc';

var a=1;

var a;
a=1;

var a;
a // undefined

var a=1;// 基本等同a=1;

x// ReferenceError: x is not defined

var a, b;

var a=1;
a='hello';

var x=1;var x;
x // 1

var x=1;var x=2;// 等同于var x=1;var x;
x=2;

console.log(a);var a=1;

var a;console.log(a);
a=1;

arg0
_tmp
$elem
π

1a // 第一個字符不能是數(shù)字
23 // 同上
*** // 標識符不能包含星號
a+b // 標識符不能包含加號
-d // 標識符不能包含減號或連詞線

var 臨時變量=1;

// 這是單行注釋/*
 這是
 多行
 注釋
*/

x=1; <!-- x=2;
--> x=3;

function countdown(n) { 
while (n --> 0) console.log(n);
}
countdown(3)// 2// 1// 0

{ var a=1;
}
a // 1

if (布爾值)
 語句;
// 或者if (布爾值) 語句;

if (m===3)
 m=m + 1;

if (m===3) {
 m +=1;
}

var x=1;var y=2;
if (x=y) { console.log(x);
}// "2"

if (x=2) {
 // 不報錯
if (2=x) { 
 // 報錯

if (m===3) { 
// 滿足條件時，執(zhí)行的語句
}
 else { 
 // 不滿足條件時，執(zhí)行的語句
}

if (m===0) { 
// ...} 
else if (m===1) { 
 // ...} 
 else if (m===2) { 
 // ...} 
 else { // ...}

var m=1;
var n=2;
if (m !==1)
if (n===2) 
console.log('hello');
else console.log('world');

if (m !==1) { 
if (n===2) 
{ console.log('hello');	
 }
 else { console.log('world');
 }
}

if (m !==1) { 
if (n===2) { 
console.log('hello');	
 }
} 
else { console.log('world');
}// world

switch (fruit) { 
case "banana": // ...
 break; 
case "apple": // ...
 break; 
default: // ...}

var x=1;
switch (x) { 
case 1: 
console.log('x 等于1'); 
case 2: 
console.log('x 等于2'); 
default: console.log('x 等于其他值');
}// x等于1// x等于2// x等于其他值

switch (x) { 
case 1: console.log('x 等于1'); 
 break; 
 case 2: console.log('x 等于2'); 
 break; 
 default: console.log('x 等于其他值');
}

switch (1 + 3) { case 2 + 2:
 f(); break; default:
 neverHappens();
}

var x=1;
switch (x) { 
case true: console.log('x 發(fā)生類型轉(zhuǎn)換'); 
break; 
default: console.log('x 沒有發(fā)生類型轉(zhuǎn)換');
}// x 沒有發(fā)生類型轉(zhuǎn)換

(條件) ? 表達式1 : 表達式2

var even=(n % 2===0) ? true : false;

var even;if (n % 2===0) {
 even=true;
} else {
 even=false;
}

var myVar;console.log(
 myVar ? 'myVar has a value' : 'myVar does not have a value')
// myVar does not have a value

var msg='數(shù)字' + n + '是' + (n % 2===0 ? '偶數(shù)' : '奇數(shù)');

while (條件)
 語句;// 或者while (條件) 語句;

while (條件) {
 語句;
}

var i=0;while (i < 100) { console.log('i 當前為：' + i);
 i=i + 1;
}

while (true) { console.log('Hello, world');
}

for (初始化表達式; 條件; 遞增表達式)
 語句// 或者for (初始化表達式; 條件; 遞增表達式) {
 語句
}

var x=3;for (var i=0; i < x; i++) { console.log(i);
}// 0// 1// 2

var x=3;var i=0;while (i < x) { console.log(i);
 i++;
}

for ( ; ; ){ console.log('Hello World');
}

do
 語句while (條件);// 或者do {
 語句
} while (條件);

var x=3;var i=0;do { console.log(i);
 i++;
} while(i < x);

var i=0;while(i < 100) { console.log('i 當前為：' + i);
 i++; if (i===10) break;
}

for (var i=0; i < 5; i++) { console.log(i); if (i===3) break;
}// 0// 1// 2// 3

var i=0;while (i < 100){
 i++; if (i % 2===0) continue; console.log('i 當前為：' + i);
}

label:
 語句

top: for (var i=0; i < 3; i++){ 
 for (var j=0; j < 3; j++){ 
 if (i===1 && j===1) break top; 
 console.log('i=' + i + ', j=' + j);
 }
 }// i=0, j=0// i=0, j=1// i=0, j=2// i=1, j=0

foo: { console.log(1); 
break 
foo; console.log('本行不會輸出');
}console.log(2);// 1// 2

top: 
for (var i=0; i < 3; i++){ 
for (var j=0; j < 3; j++){ 
 if (i===1 && j===1) continue top; 
console.log('i=' + i + ', j=' + j);
 }
 }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2

讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。

本篇文章成哥繼續(xù)帶大家來學習前端教程之VUE，它是一個前端框架具有高效、簡單及易用等特點。下面我們就一起來學習內(nèi)容吧！

01 VUE簡介

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。

與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。

Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。

另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。

該框架的作者是一位中國人叫尤雨溪，畢業(yè)于上海復旦附中，在美國完成大學學業(yè)，本科畢業(yè)于上 Colgate University，后在 Parsons 設計學院獲得 Design & Technology 藝術碩士學位，任職于紐約 Google Creative Lab。

目前作者以技術顧問的身份加入了阿里巴巴的 Weex 團隊來做 Vue 和 Weex 的 JavaScript runtime 整合，目標是讓大家能用 Vue 的語法跨三端。

02 VUE安裝

VUE可以像我們之前jQuery教程一樣將VUE.js下載下來進行引用，也可以通過CDN方式引用，還可以通過VUE-CLI來安裝（VUE-CLI需要通過NPM安裝，在后面的教程中成哥將專門推出一篇NPM入門教程，在這邊就不詳細講解了），在這邊我們登陸到VUE官網(wǎng)來下載VUE.js然后進行引用，具體操作如下：

1.登陸VUE官網(wǎng)下載vue.js文件

2.在HTML文件中引用vue.js文件

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>VUE基礎教程</title>  
6.     <!-- 引用vue.js文件   -->  
7.     <script src="vue.js"></script>  
8. </head>  
9. <body>  
10.   
11. </body>  
12. </html>  

03 VUE使用

（1）VUE實例

每個 Vue 應用都是通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實例開始的

1. var vm = new Vue({  
2.   // 選項  
3. })  

當創(chuàng)建一個 Vue 實例時，你可以傳入一個選項對象，下面我們就來看看怎么通過實例將選項對象渲染在頁面的

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>VUE基礎教程</title>  
6.     <!-- 引用vue.js文件   -->  
7.     <script src="vue.js"></script>  
8. </head>  
9. <body>  
10.     <!-- 這邊的{{msg}}中的msg就是變量,vue會根據(jù)變量名到data數(shù)據(jù)對象中找到其對應的值然后渲染 -->  
11.     <div id="app">{{msg}}</div>  
12.     <script>  
13.       var vm = new Vue({  
14.           el: '#app',  // dom的掛載點,這邊將dom掛載到id為app的標簽上  
15.           data: {  // 數(shù)據(jù)對象  
16.             msg: "hello vue"  // 定義變量值  
17.           }  
18.       })  
19.     </script>  
20. </body>  
21. </html>  

上述代碼渲染結(jié)果如下

每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。比如 created 鉤子可以用來在一個實例被創(chuàng)建之后執(zhí)行代碼

1. new Vue({  
2.   data: {  
3.     a: 1  
4.   },  
5.   created: function () {  
6.     // `this` 指向 vm 實例  
7.     console.log('a is: ' + this.a)  
8.   }  
9. })  
10. // 在實例創(chuàng)建后會輸出"a is: 1"  

也有一些其它的鉤子，在實例生命周期的不同階段被調(diào)用，如 mounted、updated 和 destroyed。生命周期鉤子的 this 上下文指向調(diào)用它的 Vue 實例。VUE實例的整個生命周期如下圖所示

（2）模板語法

Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。在底層的實現(xiàn)上，Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應系統(tǒng)，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。

1）插值

a.文本

數(shù)據(jù)綁定最常見的形式就是使用"Mustache"語法 (雙大括號) 的文本插值：

1. <span>Message: {{ msg }}</span>  

Mustache 標簽將會被替代為對應數(shù)據(jù)對象上 msg對應的值。無論何時，綁定的數(shù)據(jù)對象上 msg值發(fā)生了改變，插值處的內(nèi)容都會更新。通過使用 v-once 指令，也能執(zhí)行一次性地插值，當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但請留心這會影響到該節(jié)點上的其它數(shù)據(jù)綁定

1. <span v-once>這個將不會改變: {{ msg }}</span>  

b.原始HTML

雙大括號會將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令，示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>VUE基礎教程</title>  
6.     <!-- 引用vue.js文件   -->  
7.     <script src="vue.js"></script>  
8. </head>  
9. <body>  
10.     <div id="app">  
11.       <!-- 這邊沒有用v-html所以標簽渲染出來直接是文本 -->  
12.       <p>{{msg}}</p>  
13.       <!-- 這邊使用了v-html所以渲染初始是標簽 -->  
14.       <p v-html="msg"></p>  
15.     </div>  
16.     <script>  
17.       var vm = new Vue({  
18.           el: '#app',  // dom的掛載點,這邊將dom掛載到id為app的標簽上  
19.           data: {  // 數(shù)據(jù)對象  
20.             msg: "<h4>我是h4標簽</h4>"  // 定義變量值  
21.           }  
22.       })  
23.     </script>  
24. </body>  
25. </html>  

c.屬性

雙大括號語法不能作用在 HTML標簽屬性上，需要對標簽屬性操作，應該使用 v-bind 指令

1. <div v-bind:id="dynamicId"></div>  

現(xiàn)在通過v-bind來演示HTML標簽屬性的設置

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>VUE基礎教程</title>  
6.     <!-- 引用vue.js文件   -->  
7.     <script src="vue.js"></script>  
8. </head>  
9. <body>  
10.     <div id="app">  
11.       <!-- 這邊將button的disabled屬性值綁定到isButtonDisabled變量，如果為true那按鈕將變灰禁止點擊 -->  
12.       <button v-bind:disabled="isButtonDisabled">點我</button>  
13.     </div>  
14.     <script>  
15.       var vm = new Vue({  
16.           el: '#app',  // dom的掛載點,這邊將dom掛載到id為app的標簽上  
17.           data: {  // 數(shù)據(jù)對象  
18.             isButtonDisabled: true  
19.           }  
20.       })  
21.     </script>  
22. </body>  
23. </html>  

d. javascript 表達式

上面，我們只進行了綁定簡單的屬性鍵值。但實際上，對于所有的數(shù)據(jù)綁定，Vue.js 都提供了完全的 JavaScript 表達式支持

1. {{ number + 1 }}  
2.   
3. {{ ok ? 'YES' : 'NO' }}  
4.   
5. {{ message.split('').reverse().join('') }}  
6.   
7. <div v-bind:id="'list-' + id"></div>  

這些表達式會在所屬 Vue 實例的數(shù)據(jù)作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

1. <!-- 這是語句，不是表達式 -->  
2. {{ var a = 1 }}  
3.   
4. <!-- 流控制也不會生效，請使用三元表達式 -->  
5. {{ if (ok) { return message } }}  

2）指令

指令 (Directives) 是帶有v-前綴的特殊特性，指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應式地作用于 DOM。

a.參數(shù)

一些指令能夠接收一個"參數(shù)"，在指令名稱之后以冒號表示，下面我們通過v-on指令來演示動態(tài)改變DOM中渲染的值

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>VUE基礎教程</title>  
6.     <!-- 引用vue.js文件   -->  
7.     <script src="vue.js"></script>  
8. </head>  
9. <body>  
10.     <div id="app">  
11.       <p>{{msg}}</p>  
12.       <button v-on:click="changeContent">點我改變上面頁面內(nèi)容</button>  
13.     </div>  
14.     <script>  
15.       var vm = new Vue({  
16.           el: '#app',  // dom的掛載點,這邊將dom掛載到id為app的標簽上  
17.           data: {  // 數(shù)據(jù)對象  
18.             msg: "我還沒變"  
19.           },  
20.          methods: {  
21.            // v-on是綁定的方法所以在這邊要創(chuàng)建一個click的方法事件changeContent  
22.            changeContent(){  
23.              // 當被點擊后對msg進行重新賦值  
24.              this.msg = "我被改變了"  
25.            }  
26.          }  
27.       })  
28.     </script>  
29. </body>  
30. </html>  

b.

么是JavaScript？

JavaScript ( JS ) 是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的編程語言。

函數(shù)優(yōu)先：編程語言中的函數(shù)可以被當作參數(shù)傳遞給其他函數(shù)，可以作為另一個函數(shù)的返回值，還可以被賦值給一個變量。

解釋型：對標編譯型語言，編譯型需預先將源碼編成中間碼，再由解釋器解釋運行。解釋型不需要預先編譯，在程序在運行時才由解釋器翻譯運行。

JavaScript 的標準是ECMAScript截至 2012 年，所有的現(xiàn)代瀏覽器都完整的支持 ECMAScript 5.1，舊版本的瀏覽器至少支持 ECMAScript 3 標準。

我們所熟知的ES6是在2015年6月17日，由ECMA國際組織發(fā)布的ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources

使用場景

互聯(lián)網(wǎng)的興起，JavaScript的使用范圍已經(jīng)超出了瀏覽器。

1. 瀏覽器平臺。HTML5的出現(xiàn)，瀏覽器本身的功能越來越強，JavaScript 因此得以調(diào)用許多系統(tǒng)功能，如操作本地文件、操作圖片、調(diào)用攝像頭和麥克風，可以開發(fā)更多富客戶端產(chǎn)品。
2. 服務端應用。node的出現(xiàn)使得 JavaScript 可以用于開發(fā)服務器端應用，也使得JavaScript成為一門可以同時開發(fā)前后端的語言。
3. 移動應用。js也正在成為手機應用的開發(fā)語言，比如：React Native 項目則是將 JavaScript 寫的組件，編譯成原生組件。
4. 桌面應用。JavaScript甚至可以開發(fā)桌面應用，比如electronjs。
5. 數(shù)據(jù)庫操作。在一些Nosql數(shù)據(jù)都是支持JavaScript作為操作語言，像mongodb。

基本語法

變量是對值的引用，JavaScript 的變量名區(qū)分大小寫，A和a是兩個不同的變量。

var total; // 未賦值的變量是 undefined，它是個特殊的值，表示無定義。
total=1;
var a,b; // 一個var后可以聲明多個變量。

變量提升

你可能很奇怪，執(zhí)行下面代碼沒有報錯。由于JavaScript引擎工作方式是先解析代碼，獲取所有被聲明的變量，換句話說就是所有的變量的聲明語句，都被提升到代碼的頭部。

console.log(a);
var a=1;

變量規(guī)則

• 第一個字符任意 Unicode 字母（包括英文字母和其他語言的字母），以及美元符號（$）和下劃線（_）
• 第二個字符及后面的字符，除了 Unicode 字母、美元符號和下劃線，還可以用數(shù)字0-9。

另外中文也可以聲明變量，下面保留字除外

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

語句

JavaScript程序的執(zhí)行單位行，一般情況一行就是一條語句，如果一行要寫多個語句我們使用;表示語句結(jié)束。

var total=1 + 1; // 聲明了一個變量total，然后將1+1的運算結(jié)果賦值給它。

注釋

// 這是單行注釋

/*
 這是
 多行
 注釋
*/

區(qū)塊

JavaScript使用大括號將多條語句包裹起來表示一個區(qū)塊，注意var聲明的變量不構成單獨的作用域，這里區(qū)別于java。

{
  var a=1;
}
a // 1

條件語句

// if結(jié)構
if (m===1){ // 往往由一個條件表達式產(chǎn)生的
    console.log('ok')
}
// 或者
if (bool) console.log('ok');

// if/else結(jié)構
if (m===1){
  語句;
}else{
    語句;  
} 

// if/else if.../else 結(jié)構 m==1 m==2 其它
if (m===1) {
} else if(m===2){
}else {
}

switch 結(jié)構

switch (m) {
  case 1:
    // ...
    break;
  case 2:
    // ...
    break;
  default:
    // ...
}

注意區(qū)別 ==與===

使用==比較兩個變量時，會發(fā)生隱式類型轉(zhuǎn)換，例如，自動將字符串類型轉(zhuǎn)換為數(shù)字類型。

為了避免隱式轉(zhuǎn)換帶來的問題，我們都是用===進行嚴格進行比較。

三元運算符

三元運算符也可以用于邏輯判斷。

(條件) ? 表達式1 : 表達式2

循環(huán)語句

var i=0;
while (i < 100) {
  console.log('i 當前為：' + i);
  i=i + 1;
}
// 區(qū)別上面，它至少會執(zhí)行一次
var i=0;
do {
  console.log('i 當前為：' + i);
} while (i < 100);

for循環(huán)語句

• 初始化表達式：確定循環(huán)變量的初始值，只在循環(huán)開始時執(zhí)行一次。
• 條件表達式：每輪循環(huán)開始時，都要執(zhí)行這個條件表達式，只有值為真，才繼續(xù)進行循環(huán)。
• 遞增表達式：每輪循環(huán)的最后一個操作，通常用來遞增循環(huán)變量。

for (初始化表達式; 條件; 遞增表達式) {
  語句
}

break 和 continue

break語句用于跳出代碼塊或循環(huán)，continue是結(jié)束當前循環(huán)，跳到下一次。

數(shù)據(jù)類型

null和undefined

● 變量沒有初始化：undefined。

● 變量不可用：null。

數(shù)值

整數(shù)和浮點數(shù)，JavaScript 內(nèi)部，所有數(shù)字都是以64位浮點數(shù)形式儲存，即使整數(shù)也是如此。

1===1.0 // true

數(shù)值精度：根據(jù)國際標準 IEEE 754，JavaScript 浮點數(shù)的64個二進制位，從最左邊開始，是這樣組成的。

• 第1位：符號位，0表示正數(shù)，1表示負數(shù)
• 第2位到第12位（共11位）：指數(shù)部分
• 第13位到第64位（共52位）：小數(shù)部分（即有效數(shù)字）

數(shù)值范圍：64位浮點數(shù)的指數(shù)部分的長度是11個二進制位，意味著指數(shù)部分的最大值是2047（2的11次方減1）超出的范圍不能表示。

數(shù)值進制：

• 十進制：沒有前導0的數(shù)值。
• 八進制：有前綴0o或0O的數(shù)值，或者有前導0、且只用到0-7的八個阿拉伯數(shù)字的數(shù)值。
• 十六進制：有前綴0x或0X的數(shù)值。
• 二進制：有前綴0b或0B的數(shù)值。

NaN

NaN是 JavaScript 的特殊值，表示“非數(shù)字”（Not a Number），主要出現(xiàn)在將字符串解析成數(shù)字出錯的場合。

字符串

由單雙引號包裹在一起的字符，就是字符串。

單引號字符串的內(nèi)部，可以使用雙引號。雙引號字符串的內(nèi)部，可以使用單引號。

'abc' "abc" "'a'" // 字符串

// 字符串換行
var str='String \
String \
String';

轉(zhuǎn)義符：

• >\0< ：null（\u0000）
• \b ：后退鍵（\u0008）
• \f ：換頁符（\u000C）
• \n ：換行符（\u000A）
• \r ：回車鍵（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：單引號（\u0027）
• \" ：雙引號（\u0022）
• \ ：反斜杠（\u005C）

字符集：javaScript 使用 Unicode 字符集。JavaScript 引擎內(nèi)部，所有字符都用 Unicode 表示。

對象

var obj={ // 對象聲明
  a: '1',
  b: '2'
};

// 對象屬性讀取
obj.a 
obj['a']

// 刪除對象屬性
delete obj.a

// 判斷屬性是否存在
'a' in obj 

//對象遍歷
for (var i in obj) {
  console.log('鍵名：', i);
  console.log('鍵值：', obj[i]);
}

函數(shù)

function 關鍵字聲明。

function foo(s) {
  console.log(s);
}
// 表達式形式
var foo=function(s) {
  console.log(s);
};

Function 構造函數(shù)

var add=new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

函數(shù)名提升：JavaScript 引擎將函數(shù)名視同變量名，所以采用function命令聲明函數(shù)時，整個函數(shù)會像變量聲明一樣，被提升到代碼頭部。

foo();
function foo() {console('ok')}

JavaScript函數(shù)知識點還是蠻多的，后面針對函數(shù)這一塊單獨整理。

數(shù)組

數(shù)組屬于一種特殊的對象。

typeof [1, 2, 3] // "object"

length：JavaScript 使用一個32位整數(shù)，保存數(shù)組的元素個數(shù)。這意味著，數(shù)組成員最多只有 4294967295 個（2^32 - 1）個，也就是說length屬性的最大值就是 4294967295。

數(shù)組遍歷

var a=[1, 2, 3];
for (var i in a) {
  console.log(a[i]);
}

小結(jié)

本文要點回顧，歡迎留言交流。

• JavaScript介紹。
• JavaScript基本語法。
• 數(shù)據(jù)類型。