JavaWeb之JavaScript-Vue --黑马笔记

什么是JavaScript？

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。

ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。

ECMA：

ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

JavaScript引入方式：

第一种是内部脚本：

这里注意：

可以放在任意地方，比如放到<html></html>标签外面也是可以的。

第二种是外部脚本：

将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中。

1.外部JS文件中，只包含JS代码，不包含<script>标签

2.<script>标签不能自闭合

引入示例： ---放在head标签里就行

注意：demo.js中只有js代码，没有<script>标签。

demo.js代码示例：

JS基本语法

语法规则：

输出语句：

变量：

注意，JavaScript 是一门弱类型语言，变量可以存放不同类型的值。

例如：

说明：在js中，我们var声明的变量可以接受任何数据类型的值，允许重复声明。并且var声明的变量的作用于是全局的，在代码块外依然能访问到x的值。

数据类型

分为原始类型和引用类型。

原始类型：

使用 typeof 运算符可以获取数据类型：

代码示例：

其中：null的数据类型是object。

运算符：

这里涉及到类型转换：

js中可以通过 parseInt()函数来进行将其他类型转换成数值类型：

代码示例：

这里注意：第三行遇到A，转不了数值了，直接转成12，第四行一开始就遇到A，直接就转不了。

流程控制语句：

流程控制语句if，switch，for等和java保持一致，此处不再演示。

函数：

函数（方法）是被设计为执行特定任务的代码块。

第一种语法格式：

注意：形式参数不需要类型。因为JavaScript是弱类型语言。

返回值也不需要定义类型，可以在函数内部直接使用return返回即可。

调用：函数名称(实际参数列表)

第二种语法格式：

两种语法格式的代码示例：

特别注意：JS中，函数调用可以传递任意个数的参数，多余的参数抛弃。

JS对象：

可以大体分为3大类：

第一类：基本对象,我们主要学习Array和JSON和String

第二类：BOM对象,主要是和浏览器相关的几个对象

第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象

基本对象

Array：

Array对象是用来定义数组的。

常用语法格式有如下2种：

取值和赋值很简单，直接用索引就行了。

注意：与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且 JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。

所以它的特点：长度可变，类型也可变。

代码示例：

控制台输出：

Array的属性和方法：

属性：

属性代码示例：

控制台输出：

注意：索引10前面好几个位置没有初始化，所以输出undefined。

方法：

方法代码示例：

当然了，在ES6中，引入箭头函数的写法，语法类似java中lambda表达式，修改上述代码如下：

这里注意：

箭头函数(ES6)：是用来简化函数定义语法的。具体形式为: (…) => { … } ，如果需要给箭头函数起名字： var xxx = (…) => { … }

splice()函数：

String

String对象的创建方式有2种：

属性：

用法都是类似的，不用过多举例。

方法：

注意：

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

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

trim()函数用于去除字符串两边的空格的。

JSON

先看一下JavaScript自定义对象：

注意：函数定义的语法可以简化。

代码举例：

JSON介绍

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

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

那么json这种数据格式的文本到底应用在企业开发的什么地方呢？-- 经常用来作为前后台交互的数据载体。-----用XML已经很少了，更多的是使用JSON了。

主要是xml格式存在如下问题：标签需要编写双份，占用带宽，浪费资源，解析繁琐。

接下来我们通过代码来演示json对象，编写代码如下：

浏览器输出结果如下：

为什么呢？因为上述是一个json字符串，不是json对象，所以我们需要借助如下函数来进行json字符串和json对象的转换。

此时浏览器输出结果如下：

当然了，我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码：

alert(JSON.stringify(obj));

浏览器输出结果如图所示：

BOM对象

BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

例如：我们想要将浏览器的地址改为 http://www.baidu.com , 我们就可以通过BOM中提供的location对象的href属性来完成，代码如下： location.href='http://www.baidu.com'

BOM中提供了如下5个对象：

上述5个对象与浏览器各组成对应的关系如下图所示：

Window

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert() 函数其实是属于window对象的,其完整的代码如下：

window.alert('hello');

其可以省略window. 所以可以简写成：

alert('hello')

window对象提供了获取其他BOM对象的属性：

也就是说我们要使用location对象，只需要通过代码 window.location或者简写location 即可使用。

window也提供了一些常用的函数，如下表格所示：

confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

添加如下代码：

confirm("您确认删除该记录吗?");

浏览器打开效果如图所示：

但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false

var flag = confirm("您确认删除该记录吗?");
alert(flag);

setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数： fn:函数，需要周期性执行的功能代码毫秒值：间隔时间，添加代码如下：

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述 setInterval一致，添加代码如下：

//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){
 alert("JS");
},3000);

Location

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

浏览器效果：首先弹框展示浏览器地址栏信息，然后点击确定后，因为我们设置了地址栏信息，所以浏览器跳转到传智首页。

DOM对象

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

上面是 HTML 文档内容，下面是 DOM 树 ---JavaScript将html文档转换成DOM树

那么我们学习DOM技术有什么用呢？主要作用如下：

获取DOM对象：HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。 document对象提供的用于获取Element元素对象的api如下表所示：

document.getElementById()：根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。

document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。

document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组。

document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组。

那么获取到标签了，我们如何操作标签的属性呢？

我们可以通过div标签对象的innerHTML属性来修改标签的内容。

注意：这个属性是div标签对象。 ---属性操作大同小异，这里就简单演示以下怎么写就行了：

div1.innerHTML = "传智教育666";

这里还有一个要注意的是：双引号里面可以写html语法，比如font标签设置颜色等等。

JavaScript事件

事件：HTML事件是发生在HTML元素上的 “事情”。比如：

1.按钮被点击

2.鼠标移动到元素上

3.按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定：

两种方法：

常见事件：

Vue：

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

官网： Vue.js

MVVM解释：

基于上述的MVVM思想，其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分，我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。

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

快速入门：

vue.js文件：

链接：https://pan.baidu.com/s/1Rzr_A94b5CCzZfnCRL1QXg?pwd=8888
提取码：8888

在项目中，可以先创建一个文件夹，然后把vue.js文件拖到项目中你创建的文件夹中。

（在电脑中找到我们的项目文件夹，进去找到你创建的文件夹，拖进去就行了）

讲解上面的代码：

上面的代码运行，浏览器打开效果如图所示：

在输入框里继续输入：

就会发现外面的与里面的数据会同步。------很明显 v-model实现双向绑定，插值表达式获得也是同步后的值。

常用指令：

我们首先来学习v-bind指令和v-model指令。

定义Vue对象：

v-bind使用：

<a v-bind:href="url">链接1</a>

v-model使用：

data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：

<input type="text" v-model="url">

双向绑定的作用：可以获取表单的数据的值，然后提交给服务器。

v-on

用来给html标签绑定事件的。

v-on语法给标签的事件绑定的函数，必须是vue对象中声明的函数。

绑定的两种写法： v-on:click可以简写为@click

v-if和v-show

这个简单，直接去代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

浏览器打开测试效果如下图：