元素选择器：标签名 { … }id选择器：#id属性值 { … }类选择器：.class属性值 { … }优先级：id选择器 > 类选择器 > 元素选择器

3.4 盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

4.3.1 书写语法

除了分号可有可无，其他地方和 Java 基本类似

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的每行结尾的分号可有可无（建议加上）注释：

单行注释：// 注释内容多行注释：/* 注释内容 */ 大括号表示代码块

JS 的三种输出语句：

4.3.2 变量

变量的声明和 Java 有很大的不同，JS 主要使用以下三种关键字来声明变量

注意：在 JS 中，被 const 修饰的简单类型（或者说是基本类型）是不能发生改变的，但是被 const 修饰的引用数据类型的内容是可以被修改的，因为 const 仅限制了指向的值不可更改，而不限制其指向的对象内容不可更改。

JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）数字不能开头建议使用驼峰命名

<script>

//同一变量可以存放不同类型的值

var a = 10;

a = "张三";

alert(a);

//var：全局变量，可以重复定义

{ -- -->

var x = 1;

var x = "A";

}

alert(x);

//let：局部变量，只在代码块内有效，不能重复定义

{

let x = 1;

}

alert(x); //报错

//const：常量，一旦声明，常量的值就不能改变

const pi = 3.14;

pi = 3.15; //报错

alert(pi);

</script>

4.3.3 数据类型

JavaScript中分为：原始类型 和 引用类型。

原始类型：

number：数字（整数、小数、NaN(Not a Number)）

string：字符串，单双引号都可以

boolean：布尔。true，false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是 undefined

既然 JavaScript 中的变量不声明类型，我们怎么知道数据是什么类型呢？我们可以使用 typeof 运算符可以获取数据类型：

var a = 20;

alert(typeof a);

4.3.4 运算符

算术运算符：+ , - , * , / , % , ++ , –

赋值运算符：= , += , -= , *= , /= , %=

比较运算符：> , < , >= , <= , != , == , ===

逻辑运算符：&& , || , !

三元运算符：条件表达式 ? true_value: false_value

运算符和 Java 几乎完全一致，== === 值得注意一下

==：只比较值是否相等，不区分数据类型，哪怕类型不一致，也会自动转换类型进行值得比较===：不光比较值，还要比较数据类型，如果类型不一致，直接返回 false

var age = 20;

var _age = "20";

var $age = 20;

alert(age == _age);//true ，只比较值

alert(age === _age);//false ，类型不一样

alert(age === $age);//true ，类型一样，值一样

在 JavaScript 中虽然不区分数据类型，但有时涉及数值运算，我们希望得到数值类型，可以进行类型转换，JS 为我们提供了这样的函数。

字符串类型转为数字：parseInt()将字符串字面值转为数字。 如果字面值不是数字，则转为 NaN。

// 类型转换 - 其他类型转为数字

alert(parseInt("12")); //12

alert(parseInt("12A45")); //12 识别到不是数字停止

alert(parseInt("A45"));//NaN (not a number)

在 JS 中，还有非常重要的一点是：0, NaN, null, undefined, "",可以理解成 false,反之理解成 true。

Number：0 和 NaN 为 false，其他均转为 true。String：空字符串为 false，其他均转为 true。null 和 undefined ：均转为 false。

if(NaN){ //false

alert("NaN 转换为false");

}

4.3.5 流程控制语句

流程控制语句与 Java 中完全一样，此处不再赘述

if…else if …else…switchforwhiledo … while

4.4 JS 函数

Java 中通过方法提高代码的复用性，在 JavaScript 中可以使用函数完成类似的事情，JavaScript 使用 function 关键字定义函数，有两种定义语法：

//方式一

function functionName(参数1,参数2..){

//要执行的代码

}

//方式二

var functionName = function (参数1,参数2..){

//要执行的代码

}

需要注意与 Java 中不同的 JS 函数特性

形式参数不需要类型。因为 JavaScript 是弱类型语言返回值也不需要类型，可以在函数内部直接使用 return 返回即可

在函数的调用上与 Java 类似，直接 函数名(参数列表) ，但是在 JavaScript 中，函数的调用只需要名称正确即可，函数调用可以传递任意个数的参数。

function add( a, b) {

return a + b;

}

var res = add(10, 20, 30, 40);

alert(res); //结果为30，多余的参数直接忽略

4.5 JS 对象

JavaScript 中有很多对象，可以参考官方文档 JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)

这些对象大致可以分为三类，分别是：

基本对象，在这里主要学习 Array 和 JSON 和 StringBOM 对象，主要是和浏览器相关的几个对象DOM对象，JavaScript 中将 html 的每一个标签都封装成一个对象

4.5.1 基本对象

4.5.1.1 Array 对象

JavaScript 中 Array 对象用于定义数组，相当于 Java 中集合，但数组的长度是可变的，JavaScript 又是弱类型语言，所以可以存储任意类型的数据。

常用定义语法有以下两种：

//方式一

var arr = new Arrary( 1, "喝喝", true, 10);

//方式二，更简洁

var arr = [1, "喝喝", true, 10];

数组定义好了，该如何获取数组里面的值呢？和 Java 一样通过索引 arr[1] 来获取值。

需要注意与 Java 不同的特点：

长度可变存储任意类型

var arr = [1,2,3,4];

arr[10] = 50; //长度可变

console.log(arr[9]); //未定义的部分是 undefined

arr[9] = "A"; //添加不同类型的值

arr[8] = true;

console.log(arr);

作为一个对象，官方文档中提供了许多 Array 的属性和函数，在这里只列出最常用的属性和函数。

length 属性

length 属性可以用来获取数组的长度，我们可以用来遍历数组中的元素：

var arr = [1,2,3,4];

arr[10] = 50;

for (let i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

还有一种遍历方式，可以使用以下语法：

for(const i in arr) {

console.log(i); // i仅仅是索引

console.log(arr[i]); // arr[i]才是数组值

}

forEach() 函数

这个函数是用来遍历的，那么遍历的目的是做什么？所以这个方法的参数，需要传递一个函数，每次遍历都会执行这个函数，而且这个函数接受一个参数，就是遍历时数组元素的值。修改之前的遍历代码如下：

//e是形参，接收的是数组遍历时元素的值

//每次遍历都将数组元素传给 function 函数并执行

arr.forEach(function(e){

console.log(e);

})

在 ES6 中，为了简化函数定义的语法，引入箭头函数的写法，语法类似 Java 中 lambda 表达式，具体形式为: (…) => { … } ，如果需要给箭头函数起名字： var xxx = (…) => { … }，修改上述代码如下：

arr.forEach((e) => {

console.log(e);

})

既然都是遍历，那么 forEach() 函数和 for 循环遍历结果一致吗？答案是不一致，对于 forEach() 函数来说，没有元素的内容是不会输出的，forEach() 只会遍历有值的元素；而 for 循环会遍历数组中的每一个值，具体使用哪一个要看使用场景是否需要空值元素。

push() 函数

这个函数用于向数组的末尾添加元素，其中函数的参数就是需要添加的元素

arr.push(7,8,9);

console.log(arr);

splice() 函数

这个函数用来删除数组中的元素，函数中填入2个参数。

参数1：表示从哪个索引位置删除

参数2：表示删除元素的个数

//从索引2的位置开始删，删除2个元素

arr.splice(2,2);

console.log(arr);

4.5.1.2 String 对象

JavaScript 中 String 对象用于定义字符串，和 Java 类似。

常用定义语法有以下两种：

//方式一

var str = new String("Hello String");

//方式二，更加简洁

var str = "Hello String";

String 对象也提供了许多属性和函数，在这里我们介绍一些最常用的：

length 属性

可以用于返回字符串的长度

console.log(str.length);

charAt() 函数

用于返回在指定索引位置的字符，函数的参数就是索引

console.log(str.charAt(4));

indexOf() 函数

用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容

console.log(str.indexOf("llo"));

trim() 函数

用于去除字符串两边的空格的，返回一个新字符串

var str = " Hello String ";

var s = str.trim();

console.log(s.length);

sustring() 函数

用于截取字符串的，函数有2个参数。和 Java 一样包头不包尾。

参数1：表示从哪个索引位置开始截取。

参数2：表示到哪个索引位置结束。

console.log(s.substring(0,5));

4.5.1.3 JSON 对象

介绍 JSON 之前我们需要先来介绍一下 JavaScript 的自定义对象，类似 Java 的类或 C++ 的结构体，在 JS 中自定义对象非常简单，其语法格式如下：

var 对象名 = {

属性名1: 属性值1,

属性名2: 属性值2,

属性名3: 属性值3,

函数名称: function(形参列表){ }

};

我们可以通过 对象名.属性名 获取属性，通过 对象名.函数名() 调用函数，下面是一个自定义对象示例：

var user = {

name: "Tom",

age: 10,

gender: "male",

// eat: function(){

// console.log("用膳~");

// }

//函数定义语法可以简化成这样，类似 C++ 中的函数

eat() {

console.log("用膳~");

}

}

了解了 JS 的自定义对象，接下来有请我们的 JSON 隆重登场。

JavaScript Object Notation，JavaScript对象标记法。是通过 JavaScript 对象标记法书写的文本。其格式如下：

{

"key":value,

"key":value,

"key":value

}

需要注意的是，key 必须使用双引号标记，value可以是任意数据类型。在互联网中有许多 JSON 在线解析网站，大家可以在搜索引擎中搜索试试。

那么 JSON 这种数据格式的文本应用在什么地方呢？经常用作前后台交互的数据载体。

如下图所示：前后台交互时，我们需要传输数据，但是 Java 中的对象我们该怎么去描述呢？我们可以使用如图所示的 xml 格式，可以清晰的描述 Java 中需要传递给前端的 Java 对象。

很明显 xml 格式存在如下问题：

标签需要编写双份，标签甚至比数据还多，占用带宽，浪费资源解析繁琐

所以我们可以使用 JSON 来替代，相比 xml，JSON是一种非常高效的数据格式，如下图所示：

我们可以采用如下方式定义 JSON

更多的事件在文档中查阅 HTML DOM 事件 (w3school.com.cn)

5. Vue

5.0 引言

通过上述学习的 HTML + CSS + JS 已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？一个完整的 HTML 页面包括了视图和数据，数据是通过请求从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，这就需要我们使用 DOM 操作。正因为这种开发流程，所以我们引入了一种叫做 MVVM(Model-View-ViewModel) 的前端开发思想，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？

MVVM：Model-View-ViewModel 的缩写

Model: 数据模型，特指前端中通过请求从后台获取的数据View: 视图，用于展示数据的页面，可以理解成我们的 HTML + CSS 搭建的页面，但是没有数据ViewModel: 数据绑定到视图，负责将数据（Model）通过 JavaScript 的 DOM 技术，将数据展示到视图（View）上

如图所示就是 MVVM 开发思想的含义：

基于上述的 MVVM 思想，其中的 Model 我们可以通过 Ajax 来发起请求从后台获取；对于 View 部分，我们在下一个章节会学习一款 ElementUI 框架替代 HTML + CSS 来更加方便的搭建 View；而接下来我们要学习的就是侧重于 ViewModel 部分开发的 Vue 前端框架，用来替代 JavaScript 的 DOM 操作，让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢？可以参考下图对比：

在更加复杂的 DOM 操作中，Vue 只会变得更加的简单！在上述的代码中，我们看不到之前的DOM操作，因为 Vue 全部帮我们封装好了。

5.1 Vue 简介

接下来正式开始学习 Vue，目前最新版本为 Vue3，但目前企业大多还在使用 Vue2，所以在这里我们仍然学习 Vue2。

官网：Vue.js (vuejs.org)

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 基于 MVVM 思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

5.2 Vue 初体验

第一步：将官方提供的 vue.js 文件放在专门存放 js 文件的 js 目录下第二步：编写 <script> 标签来引入 vue.js 文件，代码如下：

<code><script src="../js/vue.js"></script>code>

第三步：在 js 代码区定义 Vue 对象,代码如下：

el: 用来指定哪些标签被 Vue 管理，类似 CSS 标签选择器。data: 用来定义数据模型。methods: 用来定义函数。

new Vue({ -- --> //里面是一个对象，所以使用 {}

el: "#app", // app 是受管理的标签的 id 属性值

data:{ // 数据模型

message: "Hello Vue"

}

})

第四步：编写视图，其中 { {}} 是插值表达式，用来将 Vue 对象中定义的 data 展示到页面上的

<div id="app">code>

<input type="text" v-model="message">code>

{ -- -->{message}}

</div>

插值表达式：{ { 表达式 }}。

内容可以是：变量 算术运算 三元运算符 函数调用