本文主要讲解了 JavaScript 和 Vue 的基本使用。资料请自行下载。

参考链接：https://www.bilibili.com/video/BV1m84y1w7Tb/

第一章 JavaScript介绍

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

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

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

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

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

第二章 js引入方式

通过下面的2种引入方式：

**第一种方式：**内部脚本，将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<script>
    alert("Hello JavaScript")
</script>

**第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中

  • 外部JS文件中，只包含JS代码，不包含&ltscript>标签
  • 引入外部js的<script>标签，必须是双标签

例子：

<script src="js/demo.js"></script>

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

第三章 基础语法

3.1 书写语法

js的书写语法，语法规则如下：

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 大括号表示代码块

  • 注释：

    • 单行注释：// 注释内容

    • 多行注释：/* 注释内容 */

js中3钟输出语句，来演示书写语法

api描述
window.alert()警告框
document.write()在HTML 输出内容
console.log()写入浏览器控制台

3.2 变量

js中主要通过如下3个关键字来声明变量的：

关键字解释
var早期ECMAScript5中用于变量声明的关键字【全局变量，可重复定义相同名字的变量】
letECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效【局部变量，不可重复定义相同名字的变量】
const声明常量的，常量一旦声明，不能修改

在js中声明变量还需要注意如下几点：

  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
  • 变量名需要遵循如下规则：
    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名

3.3 数据类型

js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型

数据类型描述
number数字（整数、小数、NaN(Not a Number)）
string字符串，单双引皆可
boolean布尔。true，false
null对象为空
undefined当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof函数可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型

3.4 运算符

运算符如下：

运算规则运算符
算术运算符+ , - , * , / , % , ++ , –
赋值运算符= , += , -= , *= , /= , %=
比较运算符> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符&& , || , !
三元运算符条件表达式 ? true_value: false_value

在js中，绝大多数的运算规则和java中是保持一致的，但是js中的**和=是有区别的**。

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

类型转换：

  • 字符串类型转为数字：

将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。

  • 其他类型转为boolean：

Number：0 和 NaN为false，其他均转为true。

String：空字符串为false，其他均转为true。

Null 和 undefined ：均转为false。

3.5 流程控制

  • if…else if …else…
  • switch
  • for
  • while
  • do … while

第四章 JS函数

JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法。

4.1 第一种定义格式

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

  • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
  • 返回值也不需要声明类型，直接return即可

如下示例：

function add(a, b){
    return a + b;
}

上述只是定义函数，**函数需要被调用才能执行！**所以接下来我们需要调用函数

第二步：因为定义的add函数有返回值，所以我们可以接受返回值，并且输出到浏览器上，添加如下代码：

let result = add(10,20);
alert(result);

4.2 第二种定义格式

var functionName = function (参数1,参数2..){   
	//要执行的代码
}

接下来我们按照上述的格式，修改代码如下：只需要将第一种定义方式注释掉，替换成第二种定义方式即可，函数的调用不变

<script>

    //定义函数-1
    // function add(a,b){
    //    return  a + b;
    // }

    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }


    //函数调用
    var result = add(10,20);
    alert(result);
    
</script>

我们在调用add函数时，再添加2个参数，修改代码如下：

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

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。【函数调用可以传递任意个实参】

第五章 JS对象

5.1 基本对象

5.1.1 Array对象

语法格式

Array对象用来定义数组语法格式有如下2种：

  • 方式1：
var 变量名 = new Array(元素列表); 
//例如：
var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）
  • 方式2：
var 变量名 = [ 元素列表 ]; 
//例如：
var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

数组定义好了,需要通过索引来获取数组中的值。语法如下：

arr[索引] = 值;

接下来，我们在VS Code中创建名为02. JS-对象-Array.html的文件，按照上述的语法定义数组，并且通过索引来获取数组中的值。

<script>
    //定义数组
     var arr = new Array(1,2,3,4);
     var arr = [1,2,3,4];
	//获取数组中的值，索引从0开始计数
     console.log(arr[0]);
     console.log(arr[1]);
</script>
特点:

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

//特点: 长度可变 类型可变
var arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);
属性和方法

属性：

属性描述
length设置或返回数组中元素的数量。

方法：

方法方法描述
forEach()遍历数组中的每个有值得元素，并调用一次传入的函数
push()将新元素添加到数组的末尾，并返回新的长度
splice()从数组中删除元素

  • forEach()函数

    这是用来遍历的,这个方法的参数需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值。修改之前的遍历代码如下：

    //e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})

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

    arr.forEach((e) => {
     console.log(e);
})

  • push()函数

push()函数是用于向数组的末尾添加元素的，其中函数的参数就是需要添加的元素，编写如下代码：向数组的末尾添加3个元素

//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);
  • splice()函数

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

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

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

如下代码表示：从索引2的位置开始删，删除2个元素

//splice: 删除元素
arr.splice(2,2);
console.log(arr);

5.1.2 String对象

语法格式

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

方式1：

var 变量名 = new String("…") ; //方式一
//例如：
var str = new String("Hello String");

方式2：

var 变量名 = "…" ; //方式二
//例如：
var str = 'Hello String';
属性和方法

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

属性描述
length字符串的长度。

方法：

方法描述
charAt()返回在指定位置的字符。
indexOf()检索字符串。
trim()去除字符串两边的空格
substring()提取字符串中两个指定的索引号之间的字符。

  • length属性：

    length属性可以用于返回字符串的长度，添加如下代码：

    //length
console.log(str.length);

  • charAt()函数：

    charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：

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

  • indexOf()函数

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

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

  • trim()函数

    trim()函数用于去除字符串两边的空格的。添加如下代码：

    var s = str.trim();
console.log(s.length);

  • substring()函数

    substring()函数用于截取字符串的，函数有2个参数。

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

    参数2：表示到那个索引位置结束。不包含

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

5.1.3 JSON对象

自定义对象

在 JavaScript 中自定义对象，其语法格式如下：

var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.函数名()
json对象

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

{
    "key":value,
    "key":value,
    "key":value
}

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

json字符串转json对象

借助如下函数来进行json字符串和json对象的转换。**添加代码如下：

var obj = JSON.parse(jsonstr);
alert(obj.name);
json对象转json字符串

通过如下函数将json对象再次转换成json字符串。添加如下代码：

alert(JSON.stringify(obj));

5.2 BOM对象

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

对象名称描述
Window浏览器窗口对象
Navigator浏览器对象
Screen屏幕对象
History历史记录对象
Locationd地址栏对象

5.2.1 window对象

  • window对象提供了获取其他BOM对象的属性：
属性描述
history用于获取history对象
location用于获取location对象
Navigator用于获取Navigator对象
Screen用于获取Screen对象
  • window也提供了一些常用的函数，如下表格所示：
函数描述
alert()显示带有一段消息和一个确认按钮的警告框。
comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。【有返回值】
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。【周期性的执行某一函数】
setTimeout()在指定的毫秒数后调用函数或计算表达式。【延迟时间执行一次】

5.2.2 Location对象

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

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

5.3 DOM对象

5.3.1 DOM介绍

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

封装的对象分为

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

左边是 HTML 文档内容，右边是 DOM 树

在这里插入图片描述

学习DOM技术主要作用如下：

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

总而达到动态改变页面效果目的

5.3.2 获取DOM对象

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

函数描述
document.getElementById()根据id属性值获取，返回单个Element对象
document.getElementsByTagName()根据标签名称获取，返回Element对象数组
document.getElementsByName()根据name属性值获取，返回Element对象数组
document.getElementsByClassName()根据class属性值获取，返回Element对象数组
  • 操作属性

通过div标签对象的innerHTML属性来修改标签的内容。此时我们想把页面中的传智教育替换成传智教育666，所以要获取2个div中的第一个，所以可以通过下标0获取数组中的第一个div，注释之前的代码，编写如下代码：

var divs = document.getElementsByClassName('cls');
var div1 = divs[0];

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

第六章 JS事件监听

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

  • 按钮被点击
  • 鼠标移到元素上
  • 输入框失去焦点
  • …

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。

6.1 JS绑定事件

JavaScript对于事件的绑定提供了2种方式：

  • 方式1：通过html标签中的事件属性进行绑定
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<!--很明显没有on函数，所以我们需要创建该函数，代码如下：-->
<script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>
  • 方式2：通过DOM中Element元素的事件属性进行绑定
<input type="button" id="btn2" value="事件绑定2">
<!--通过id属性获取按钮对象，然后操作对象的onclick属性来绑定事件，代码如下：-->
<script>
document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}
</script>

需要注意的是：事件绑定的函数，只有在事件被触发时，函数才会被调用。

6.2 常用事件

常用的事件属性

事件属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

几个常用事件的具体效果：

  • onfocus:获取焦点事件，鼠标点击输入框，输入框中光标一闪一闪的，就是输入框获取焦点了
  • onblur:失去焦点事件，前提是输入框获取焦点的状态下，在输入框之外的地方点击，光标从输入框中消失了，这就是失去焦点。
  • 其他事件的效果，同学们可以通过提供好的代码去演示，亲身体会事件在什么时候触发。

第7章 Vue模型

7.1 概述

MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：

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

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

在这里插入图片描述

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

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

7.2 快速入门

第一步：将资料/vue.js文件目录下得vue.js拷贝到js目录，

第二步：然后编写<script>标签来引入vue.js文件，代码如下：

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

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

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

在创建vue对象时，有几个常用的属性：

  • el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
  • data: 用来定义数据模型
  • methods: 用来定义函数。

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

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

7.3 Vue指令

**指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

在vue中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习vue的常用指令，如下表所示：

指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性

7.3.1 v-bind和v-model

指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
  • v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<a v-bind:href="url">链接1</a>
//v-bind指令是可以省略的，但是:不能省略，所以第二个超链接的代码编写如下：
<a :href="url">链接2</a>

注意：html属性前面有:表示采用的vue的属性绑定！

  • v-model： 在表单元素上创建双向数据绑定。什么是双向？
    • vue对象的data属性中的数据变化，视图展示会一起变化
    • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

只有表单项标签！所以双向绑定一定是使用在表单项标签上的。

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

7.3.2 v-on

v-on: 用来给html标签绑定事件的。需要注意的是如下2点：

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

  • v-on语法绑定事件时，事件名相比较js中的事件名，没有on

  • 例如：

    <!--在js中，事件绑定demo函数-->
<input onclick="demo()">
<!--vue中，事件绑定demo函数 -->
<input v-on:click="demo()">

在vue对象的methods属性中定义事件绑定时需要的handle()函数，代码如下：

 methods: {
        handle: function(){
           alert("你点我了一下...");
        }
}

然后我们给第一个按钮，通过v-on指令绑定单击事件，代码如下：

 <input type="button" value="点我一下" v-on:click="handle()">

同样，v-on也存在简写方式，即v-on: 可以替换成@，所以第二个按钮绑定单击事件的代码如下：

<input type="button" value="点我一下" @click="handle()">

7.3.4 v-if和v-show

指令描述
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else
v-else
v-show根据条件展示某元素，区别在于切换的是display属性的值

7.3.5 v-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

7.4 Vue的生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
|
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |

7.3.5 v-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

7.4 Vue的生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

# javascript # vue.js # 开发语言
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

别让你的 Agent 一口吃成胖子：AI Agent 任务拆分的工程实践指南

avatar AI Agent技术社区
cover

AI Agent律师行业智能体的实践步骤

avatar AI Agent技术社区

MCP + 企业IM架构：AI Agent调用OA、ERP、MES时，身份和权限如何传递？

<think>我们只需要根据内容生成摘要，不超过150字。先理解文章核心：MCP+企业IM架构，AI Agent调用OA/ERP/MES时身份和权限传递。要点：IM从消息入口变任务入口；MCP解决连接，但不解决权限；需要五层身份映射；权限分层（可见性、调用、数据范围、确认）；建议组合MCP+API网关。摘要需简洁。 参考生成： "本文探讨MCP与企业IM集成中AI Agent调用业务系统时的身份权

avatar AI Agent技术社区