「JavaScript 教程」入门篇-JavaScr

「JavaScript 教程」入门篇-JavaScript 的基本语法

、语句

JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。

语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。

var a=1 + 3;

这条语句先用var命令，声明了变量a，然后将1 + 3的运算结果赋值给变量a。

1 + 3叫做表达式（expression），指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。

语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。

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

分号前面可以没有任何内容，JavaScript 引擎将其视为空语句。

;;;

上面的代码就表示3个空语句。

表达式不需要分号结尾。一旦在表达式后面添加分号，则 JavaScript 引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。

1 + 3;'abc';

上面两行语句只是单纯地产生一个值，并没有任何实际的意义。

2、变量

2.1、概念

变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。

var a=1;

上面的代码先声明变量a，然后在变量a与数值1之间建立引用关系，称为将数值1“赋值”给变量a。以后，引用变量名a就会得到数值1。最前面的var，是变量声明命令。它表示通知解释引擎，要创建一个变量a。

注意，JavaScript 的变量名区分大小写，A和a是两个不同的变量。

变量的声明和赋值，是分开的两个步骤，上面的代码将它们合在了一起，实际的步骤是下面这样。

var a;
a=1;

如果只是声明变量而没有赋值，则该变量的值是undefined。undefined是一个 JavaScript 关键字，表示“无定义”。

var a;
a // undefined

如果变量赋值的时候，忘了写var命令，这条语句也是有效的。

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

但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。

如果一个变量没有声明就直接使用，JavaScript 会报错，告诉你变量未定义。

x// ReferenceError: x is not defined

上面代码直接使用变量x，系统就报错，告诉你变量x没有声明。

可以在同一条var命令中声明多个变量。

var a, b;

JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。

var a=1;
a='hello';

上面代码中，变量a起先被赋值为一个数值，后来又被重新赋值为一个字符串。第二次赋值的时候，因为变量a已经存在，所以不需要使用var命令。

如果使用var重新声明一个已经存在的变量，是无效的。

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

上面代码中，变量x声明了两次，第二次声明是无效的。

但是，如果第二次声明的时候还进行了赋值，则会覆盖掉前面的值。

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

2.2、变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

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

上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。

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

最后的结果是显示undefined，表示变量a已声明，但还未赋值。

3、标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

标识符有一套命名规则，不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符，就会报错。

简单说，标识符命名规则如下。

第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-9。

下面这些都是合法的标识符。

arg0
_tmp
$elem
π

下面这些则是不合法的标识符。

1a // 第一个字符不能是数字
23 // 同上
*** // 标识符不能包含星号
a+b // 标识符不能包含加号
-d // 标识符不能包含减号或连词线

中文是合法的标识符，可以用作变量名。

var 临时变量=1;

JavaScript 有一些保留字，不能用作标识符：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。

4、注释

源码中被 JavaScript 引擎忽略的部分就叫做注释，它的作用是对代码进行解释。Javascript 提供两种注释的写法：一种是单行注释，用//起头；另一种是多行注释，放在/*和*/之间。

// 这是单行注释/*
 这是
 多行
 注释
*/

此外，由于历史上 JavaScript 可以兼容 HTML 代码的注释，所以也被视为合法的单行注释。

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

上面代码中，只有x=1会执行，其他的部分都被注释掉了。

需要注意的是，-->只有在行首，才会被当成单行注释，否则会当作正常的运算。

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

上面代码中，n --> 0实际上会当作n-- > 0，因此输出2、1、0。

5、区块

JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。

对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）。

{ var a=1;
}
a // 1

上面代码在区块内部，使用var命令声明并赋值了变量a，然后在区块外部，变量a依然有效，区块对于var命令不构成单独的作用域，与不使用区块的情况没有任何区别。在 JavaScript 语言中，单独使用区块并不常见，区块往往用来构成其他更复杂的语法结构，比如for、if、while、function等。

6、条件语句

JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。

6.1、if 结构

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。

if (布尔值)
 语句;
// 或者if (布尔值) 语句;

上面是if结构的基本形式。需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中，表示对表达式求值。如果表达式的求值结果为true，就执行紧跟在后面的语句；如果结果为false，则跳过紧跟在后面的语句。

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

上面代码表示，只有在m等于3时，才会将其值加上1。

这种写法要求条件表达式后面只能有一个语句。如果想执行多个语句，必须在if的条件判断之后，加上大括号，表示代码块（多个语句合并成一个语句）。

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

建议总是在if语句中使用大括号，因为这样方便插入语句。

注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。

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

上面代码的原意是，当x等于y的时候，才执行相关语句。但是，不小心将严格相等运算符写成赋值表达式，结果变成了将y赋值给变量x，再判断变量x的值（等于2）的布尔值（结果为true）。

这种错误可以正常生成一个布尔值，因而不会报错。为了避免这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。

if (x=2) {
 // 不报错
if (2=x) { 
 // 报错

至于为什么优先采用“严格相等运算符”（===），而不是“相等运算符”（==），请参考《运算符》章节。

6.2、if...else 结构

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

if (m===3) { 
// 满足条件时，执行的语句
}
 else { 
 // 不满足条件时，执行的语句
}

上面代码判断变量m是否等于3，如果等于就执行if代码块，否则执行else代码块。

对同一个变量进行多次判断时，多个if...else语句可以连写在一起。

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

else代码块总是与离自己最近的那个if语句配对。

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

上面代码不会有任何输出，else代码块不会得到执行，因为它跟着的是最近的那个if语句，相当于下面这样。

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

如果想让else代码块跟随最上面的那个if语句，就要改变大括号的位置。

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

6.3、switch 结构

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。

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

上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

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等于其他值

上面代码中，case代码块之中没有break语句，导致不会跳出switch结构，而会一直执行下去。正确的写法是像下面这样。

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

switch语句部分和case语句部分，都可以使用表达式。

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

上面代码的default部分，是永远不会执行到的。

需要注意的是，switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符（===），而不是相等运算符（==），这意味着比较时不会发生类型转换。

var x=1;
switch (x) { 
case true: console.log('x 发生类型转换'); 
break; 
default: console.log('x 没有发生类型转换');
}// x 没有发生类型转换

上面代码中，由于变量x没有发生类型转换，所以不会执行case true的情况。这表明，switch语句内部采用的是“严格相等运算符”，详细解释请参考《运算符》一节。

6.4、三元运算符 ?:

JavaScript 还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2

上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。

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

上面代码中，如果n可以被2整除，则even等于true，否则等于false。它等同于下面的形式。

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

这个三元运算符可以被视为if...else...的简写形式，因此可以用于多种场合。

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

上面代码利用三元运算符，输出相应的提示。

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

上面代码利用三元运算符，在字符串之中插入不同的值。

7、循环语句

循环语句用于重复执行某个操作，它有多种形式。

7.1、while 循环

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件)
 语句;// 或者while (条件) 语句;

while语句的循环条件是一个表达式，必须放在圆括号中。代码块部分，如果只有一条语句，可以省略大括号，否则就必须加上大括号。

while (条件) {
 语句;
}

下面是while语句的一个例子。

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

上面的代码将循环100次，直到i等于100为止。

下面的例子是一个无限循环，因为循环条件总是为真。

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

7.2、for 循环

for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。它的格式如下。

for (初始化表达式; 条件; 递增表达式)
 语句// 或者for (初始化表达式; 条件; 递增表达式) {
 语句
}

for语句后面的括号里面，有三个表达式。

初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
递增表达式（increment）：每轮循环的最后一个操作，通常用来递增循环变量。

下面是一个例子。

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

上面代码中，初始化表达式是var i=0，即初始化一个变量i；测试表达式是i < x，即只要i小于x，就会执行循环；递增表达式是i++，即每次循环结束后，i增大1。

所有for循环，都可以改写成while循环。上面的例子改为while循环，代码如下。

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

for语句的三个部分（initialize、test、increment），可以省略任何一个，也可以全部省略。

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

上面代码省略了for语句表达式的三个部分，结果就导致了一个无限循环。

7.3、do...while 循环

do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

do
 语句while (条件);// 或者do {
 语句
} while (条件);

不管条件是否为真，do...while循环至少运行一次，这是这种结构最大的特点。另外，while语句后面的分号注意不要省略。

下面是一个例子。

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

7.4、break 语句和 continue 语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。

break语句用于跳出代码块或循环。

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

上面代码只会执行10次循环，一旦i等于10，就会跳出循环。

for循环也可以使用break语句跳出循环。

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

上面代码执行到i等于3，就会跳出循环。

continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。

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

上面代码只有在i为奇数时，才会输出i的值。如果i为偶数，则直接进入下一轮循环。

如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。

7.5、标签（label）

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。

label:
 语句

标签可以是任意的标识符，但不能是保留字，语句部分可以是任意语句。

标签通常与break语句和continue语句配合使用，跳出特定的循环。

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

上面代码为一个双重循环区块，break命令后面加上了top标签（注意，top不用加引号），满足条件时，直接跳出双层循环。如果break语句后面不使用标签，则只能跳出内层循环，进入下一次的外层循环。

标签也可以用于跳出代码块。

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

上面代码执行到break foo，就会跳出区块。

continue语句也可以与标签配合使用。

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

上面代码中，continue命令后面有一个标签名，满足条件时，会跳过当前循环，直接进入下一轮外层循环。如果continue语句后面不使用标签，则只能进入下一轮的内层循环。

01 VUE简介

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

该框架的作者是一位中国人叫尤雨溪，毕业于上海复旦附中，在美国完成大学学业，本科毕业于上 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官网来下载VUE.js然后进行引用，具体操作如下：

1.登陆VUE官网下载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 函数创建一个新的 Vue 实例开始的

1. var vm = new Vue({  
2.   // 选项  
3. })

当创建一个 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会根据变量名到data数据对象中找到其对应的值然后渲染 -->  
11.     <div id="app">{{msg}}</div>  
12.     <script>  
13.       var vm = new Vue({  
14.           el: '#app',  // dom的挂载点,这边将dom挂载到id为app的标签上  
15.           data: {  // 数据对象  
16.             msg: "hello vue"  // 定义变量值  
17.           }  
18.       })  
19.     </script>  
20. </body>  
21. </html>

上述代码渲染结果如下

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行代码

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. // 在实例创建后会输出"a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。VUE实例的整个生命周期如下图所示

（2）模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

1）插值

a.文本

数据绑定最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值：

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

Mustache 标签将会被替代为对应数据对象上 msg对应的值。无论何时，绑定的数据对象上 msg值发生了改变，插值处的内容都会更新。通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

1. <span v-once>这个将不会改变: {{ msg }}</span>

b.原始HTML

双大括号会将数据解释为普通文本，而非 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: {  // 数据对象  
20.             msg: "<h4>我是h4标签</h4>"  // 定义变量值  
21.           }  
22.       })  
23.     </script>  
24. </body>  
25. </html>

c.属性

双大括号语法不能作用在 HTML标签属性上，需要对标签属性操作，应该使用 v-bind 指令

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

现在通过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: {  // 数据对象  
18.             isButtonDisabled: true  
19.           }  
20.       })  
21.     </script>  
22. </body>  
23. </html>

d. javascript 表达式

上面，我们只进行了绑定简单的属性键值。但实际上，对于所有的数据绑定，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 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

1. <!-- 这是语句，不是表达式 -->  
2. {{ var a = 1 }}  
3.   
4. <!-- 流控制也不会生效，请使用三元表达式 -->  
5. {{ if (ok) { return message } }}

2）指令

指令 (Directives) 是带有v-前缀的特殊特性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

a.参数

一些指令能够接收一个"参数"，在指令名称之后以冒号表示，下面我们通过v-on指令来演示动态改变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">点我改变上面页面内容</button>  
13.     </div>  
14.     <script>  
15.       var vm = new Vue({  
16.           el: '#app',  // dom的挂载点,这边将dom挂载到id为app的标签上  
17.           data: {  // 数据对象  
18.             msg: "我还没变"  
19.           },  
20.          methods: {  
21.            // v-on是绑定的方法所以在这边要创建一个click的方法事件changeContent  
22.            changeContent(){  
23.              // 当被点击后对msg进行重新赋值  
24.              this.msg = "我被改变了"  
25.            }  
26.          }  
27.       })  
28.     </script>  
29. </body>  
30. </html>

么是JavaScript？

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

函数优先：编程语言中的函数可以被当作参数传递给其他函数，可以作为另一个函数的返回值，还可以被赋值给一个变量。
解释型：对标编译型语言，编译型需预先将源码编成中间码，再由解释器解释运行。解释型不需要预先编译，在程序在运行时才由解释器翻译运行。

JavaScript 的标准是ECMAScript截至 2012 年，所有的现代浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。

我们所熟知的ES6是在2015年6月17日，由ECMA国际组织发布的ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015。

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

使用场景

互联网的兴起，JavaScript的使用范围已经超出了浏览器。

浏览器平台。HTML5的出现，浏览器本身的功能越来越强，JavaScript 因此得以调用许多系统功能，如操作本地文件、操作图片、调用摄像头和麦克风，可以开发更多富客户端产品。
服务端应用。node的出现使得 JavaScript 可以用于开发服务器端应用，也使得JavaScript成为一门可以同时开发前后端的语言。
移动应用。js也正在成为手机应用的开发语言，比如：React Native 项目则是将 JavaScript 写的组件，编译成原生组件。
桌面应用。JavaScript甚至可以开发桌面应用，比如electronjs。
数据库操作。在一些Nosql数据都是支持JavaScript作为操作语言，像mongodb。

基本语法

变量是对值的引用，JavaScript 的变量名区分大小写，A和a是两个不同的变量。

var total; // 未赋值的变量是 undefined，它是个特殊的值，表示无定义。
total=1;
var a,b; // 一个var后可以声明多个变量。

变量提升

你可能很奇怪，执行下面代码没有报错。由于JavaScript引擎工作方式是先解析代码，获取所有被声明的变量，换句话说就是所有的变量的声明语句，都被提升到代码的头部。

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

变量规则

第一个字符任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）
第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字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程序的执行单位行，一般情况一行就是一条语句，如果一行要写多个语句我们使用;表示语句结束。

var total=1 + 1; // 声明了一个变量total，然后将1+1的运算结果赋值给它。

注释

// 这是单行注释

/*
 这是
 多行
 注释
*/

区块

JavaScript使用大括号将多条语句包裹起来表示一个区块，注意var声明的变量不构成单独的作用域，这里区别于java。

{
  var a=1;
}
a // 1

条件语句

// if结构
if (m===1){ // 往往由一个条件表达式产生的
    console.log('ok')
}
// 或者
if (bool) console.log('ok');

// if/else结构
if (m===1){
  语句;
}else{
    语句;  
} 

// if/else if.../else 结构 m==1 m==2 其它
if (m===1) {
} else if(m===2){
}else {
}

switch 结构

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

注意区别 ==与===
使用==比较两个变量时，会发生隐式类型转换，例如，自动将字符串类型转换为数字类型。
为了避免隐式转换带来的问题，我们都是用===进行严格进行比较。

三元运算符

三元运算符也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2

循环语句

var i=0;
while (i < 100) {
  console.log('i 当前为：' + i);
  i=i + 1;
}
// 区别上面，它至少会执行一次
var i=0;
do {
  console.log('i 当前为：' + i);
} while (i < 100);

for循环语句

初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。
条件表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
递增表达式：每轮循环的最后一个操作，通常用来递增循环变量。

for (初始化表达式; 条件; 递增表达式) {
  语句
}

break 和 continue

break语句用于跳出代码块或循环，continue是结束当前循环，跳到下一次。

数据类型

null和undefined

● 变量没有初始化：undefined。

● 变量不可用：null。

数值

整数和浮点数，JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。

1===1.0 // true

数值精度：根据国际标准 IEEE 754，JavaScript 浮点数的64个二进制位，从最左边开始，是这样组成的。

第1位：符号位，0表示正数，1表示负数
第2位到第12位（共11位）：指数部分
第13位到第64位（共52位）：小数部分（即有效数字）

数值范围：64位浮点数的指数部分的长度是11个二进制位，意味着指数部分的最大值是2047（2的11次方减1）超出的范围不能表示。

数值进制：

十进制：没有前导0的数值。
八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
十六进制：有前缀0x或0X的数值。
二进制：有前缀0b或0B的数值。

NaN

NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

字符串

由单双引号包裹在一起的字符，就是字符串。

单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。

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

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

转义符：

>\0< ：null（\u0000）
\b ：后退键（\u0008）
\f ：换页符（\u000C）
\n ：换行符（\u000A）
\r ：回车键（\u000D）
\t ：制表符（\u0009）
\v ：垂直制表符（\u000B）
\' ：单引号（\u0027）
\" ：双引号（\u0022）
\ ：反斜杠（\u005C）

字符集：javaScript 使用 Unicode 字符集。JavaScript 引擎内部，所有字符都用 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]);
}

函数

function 关键字声明。

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

Function 构造函数

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

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

函数名提升：JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

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

JavaScript函数知识点还是蛮多的，后面针对函数这一块单独整理。

数组

数组属于一种特殊的对象。

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

length：JavaScript 使用一个32位整数，保存数组的元素个数。这意味着，数组成员最多只有 4294967295 个（2^32 - 1）个，也就是说length属性的最大值就是 4294967295。

数组遍历

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

小结

本文要点回顾，欢迎留言交流。

JavaScript介绍。
JavaScript基本语法。
数据类型。

在线咨询

上一篇：电商图片处理方法
下一篇：剖析一个html5实例-风车

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商