第十七天 JavaScript、Vue详细总结
目录
JavaScript、Vue
1. JavaScript常用对象
1.1 Array对象
1.2 String对象
1.3 自定义对象
1.4 JSON
1.5 BOM
1.6 DOM
2. 事件监听
2.1 事件绑定
2.2 常见事件
2.3 案例
3. Vue
3.1 概述
3.2 快速入门
3.3 常用指令
3.4 生命周期
JavaScript、Vue
今日目标：
- 熟悉JavaScript常见对象及事件监听
- 掌握Vue的基本指令
上一次课程，我们讲解了W3C 标准规定的组成网页的三个部分：
- 结构：对应的是 HTML 语言
- 表现：对应的是 CSS 语言
- 行为：对应的是 JavaScript 语言
那今天我们继续来讲解JavaScript的内容，今天课程的主要内容包括：
- JavaScript对象
- JavaScript事件监听
- Vue
- Ajax
1. JavaScript常用对象
JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类
- 基本对象
- BOM 对象
- DOM对象
DOM 中的对象就比较多了，下图只是截取部分
这小节我们先学习基本对象，而我们先学习 Array 数组对象和 String 字符串对象。
1.1 Array对象
JavaScript Array对象用于定义数组
1.1.1 定义格式
数组的定义格式有两种：
- 方式1
var 变量名 = new Array(元素列表);
例如：
- 方式2
var 变量名 = [元素列表];
例如：
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）
注意：Java中的数组静态初始化使用的是{ }定义，而 JavaScript 中使用的是 [] 定义
1.1.2 元素访问
访问数组中的元素和 Java 语言的一样，格式如下：
arr[索引] = 值;
代码演示：
// 方式一
var arr = new Array(1,2,3);
// alert(arr);
// 方式二
var arr2 = [1,2,3];
//alert(arr2);
// 访问
arr2[0] = 10;
alert(arr2)1.1.3 特点
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
例如如下代码：
// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]); //undefined上面代码在定义数组中给了三个元素，又给索引是 10 的位置添加了数据 10，那么 索引3 到 索引9 位置的元素是什么呢？我们之前就介绍了，在 JavaScript 中没有赋值的话，默认就是 undefined。
如果给 arr3 数组添加字符串的数据，也是可以添加成功的
arr3[5] = "hello";
alert(arr3[5]); // hello1.1.4 属性
Array 对象提供了很多属性，如下图是官方文档截取的
而我们只讲解 length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了
var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
alert(arr[i]);
}1.1.5 方法
Array 对象同样也提供了很多方法，如下图是官方文档截取的
而我们在课堂中只演示以下几个方法。
| 方法 |
描述 |
| push() |
将新元素添加到数组的末尾，并返回新的长度。 |
| splice() |
从数组中添加/删除元素。 |
| sort() |
对数组的元素进行排序。 |
| indexOf() |
在数组中搜索元素并返回其位置。 |
| reverse() |
反转数组中元素的顺序。 |
- push 函数：给数组添加元素，也就是在数组的末尾添加元素
参数表示要添加的元素
var arr1 = [10,20,30,40]; //定义数组
arr1.push('A'); //往数组末尾添加一个元素
arr1.push('B','C','D','E'); //往数组的末尾添加多个元素
console.log(arr1);- splice 函数：删除元素
参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素
// splice:删除元素
var arr1 = [10,20,30,40]; //定义数组
arr1.splice(0,2); //从 0 索引位置开始删除，删除2个元素
alert(arr1); // [30,40]- sort函数：对数组元素排序
// sort : 排序
var arr1 = [10,30,40,20,5];
//对数组进行排序
arr1.sort(function(a,b){
return a - b;
});
console.log(arr1);- indexOf函数：数组中搜索指定项目，并返回其位置。第一项的位置为 0，第二项的位置为 1，依此类推。
// indexOf : 获取指定元素索引位置
var arr1 = [10,30,40,20,5];
var i = arr1.indexOf(20);
console.log(i);- reverse函数： 反转数组中元素的顺序。
// reverse: 数组反转
var arr1 = [10,30,40,20,5];
arr1.reverse();
console.log(arr1);1.2 String对象
String对象的创建方式有两种
- 方式1：
var 变量名 = new String(s);
- 方式2：
var 变量名 = "数组";
属性：
String对象提供了很多属性，下面给大家列举了一个属性 length ，该属性是用于动态的获取字符串的长度
| 属性 |
描述 |
| length |
字符串的长度。 |
函数：
String对象提供了很多函数（方法），下面给大家列举了四个方法。
| 方法 |
描述 |
| charAt() |
返回在指定位置的字符。 |
| indexOf() |
检索字符串。 |
| trim() |
去除字符串两边的空格 |
| substring() |
提取字符串中两个指定的索引号之间的字符。 |
代码演示：
var str = "Hello String "
console.log(str);
console.log(str.length); //获取字符串长度
console.log(str.charAt(4)); //获取索引位置为3的字符
console.log(str.indexOf("ing")); //获取 ing 在字符串中的索引位置
console.log(str.trim()); //去除字符串两侧空格
console.log(str.substring(6,12)); //提取字符串中两个指定索引号之间的字符trim() 函数在以后开发中还是比较常用的，例如下图所示是登陆界面
用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在我们后端程序中判断用户名和密码是否正确，结果肯定是失败。所以我们一般都会对用户输入的字符串数据进行去除前后空格的操作。
1.3 自定义对象
在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};
- 调用属性的格式：
对象名.属性名
- 调用函数的格式：
对象名.函数名()
接下来通过代码演示一下，让大家体验一下 JavaScript 中自定义对象
var user = {
name:"Tom",
age:20,
gender:"male",
eat: function(){
alert("用膳~");
}
};
console.log(user.name + ":" + user.age + ":" + user.gender);
user.eat();其实呢，上面user对象中的function函数关键字是可以省略的，省略后，简写为：
var user = {
name:"Tom",
age:20,
gender:"male",
eat(){
alert("用膳~");
}
};
console.log(user.name + ":" + user.age + ":" + user.gender);
user.eat();1.4 JSON
1.4.1 介绍
概念：JavaScript Object Notation。JavaScript 对象标记法
如下是 JavaScript 对象的定义格式：
{
name:"Tom",
age:20,
gender:"male"
}接下来我们再看看 JSON 的格式：
{
"name":"Tom",
"age":20,
"gender":"male"
}通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的属性名可以使用引号（可以是单引号，也可以是双引号）；而 json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。json 格式的数据有什么作用呢？
作用：由于其语法格式简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
1.4.2 定义格式
JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。 定义格式如下：
var 变量名 = '{"key":value,"key":value,...}';JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下
- 数字（整数或浮点数）
- 字符串（使用双引号括起来）
- 逻辑值（true或者false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
示例：
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'1.4.3 代码演示
创建一个页面，在该页面的