本文详细介绍了JavaScript的基础知识，包括变量、数据类型、运算符、语句、数组、方法，以及JavaScript对象分类和前端设计模式。同时，讲解了Vue框架的工作流程和常见指令，提供了JavaScript在HTML中的使用方法和Vue的两种使用方式，帮助读者理解JavaScript和Vue的基本应用。
目录
一，JavaScript
作用：给页面添加动态效果
其语言特点如下：
基于面向对象的语言
属于弱类型语言
属于脚本语言, 不需要编译由浏览器解析执行.
安全性强：JS 语言只能访问浏览器内部的数据，浏览器以外的禁止访问
交互性强：由于 JS 语言是嵌入到 HTML 页面中,最终执行在客户端的浏览器中的语言，和用户是直接接触，Java 语言是运行在服务器的语言，用户需要进行交互的话必须通过网络才可以，所以JS 语言的交互性会更强.
1，变量,数据类型,运算符,各种语句,数组,方法,
1.1，变量
JS 语言属于弱类型语言,声明变量的时候不需要指定类型
通过 let 或 var 声明变量
let 声明的变量，作用域和 java 语言类似
var 声明的变量，作用域是全局的
//JS-let:
for(let i=0;i<10;i++){
let j = i+1;
}
let x = i+j; // 运行时访问不到 i 和 j 因为超出作用域
// JS-var:
for(var i=0;i<10;i++){
var j = i+1;
}
var x = i+j; // 此时可以访问到 i 和 j 的值,因为 var 声明的变量相当于是全局的1.2，数据类型
JavaScript 中只有对象类型
常见的对象类型：
number 数值：相当于 Java 中所有数值类型的总和
string 字符串：可以用单引号或双引号修饰
boolean 布尔值：true/false
undefined 未定义：当变量只声明不赋值的时候变量为未定义类型
typeof 变量：获取变量类型
1.3，运算符
算术运算符：+ - * / %，运算规则和Java相同，但是除法和 java 不一样, JS 语言会自动根据结果转换整数或小数
关系运算符： > < >= <= != == ===
==和===区别：
==先统一等号两边变量的类型 再比较值
===先比较两个变量的类 型,类型一致后再比较值. "666"==666 true "666"===666 false
逻辑运算符：&& || !
赋值运算符：=，+= ，-=， *= ，/= ，%=
三目运算符：条件?值 1：值 2
各种语句：
if else
while
for
switch case
1.4，如何在 HTML 页面中添加 JS 代码
三种添加方式：
内联：在标签的事件属性中添加 js 代码，事件触发时执行
内部：在页面的任意位置写 script 标签，标签体内写 js 代码
外部：在单独的 js 文件中写 js 代码，在 html 页面中通过 script 标签的 src 属性引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--内联:在标签的事件属性中添加js代码-->
<input type="button" value="按钮" onclick="alert('点击了')">
<script>
console.log("内部代码执行成功！！！1")
</script>
<!--引入外部s文件，script标签引入文件后不能写js代码-->
<script src="my.js"></script>
</body>
</html>1.5，方法
function 方法名(参数列表){方法体}
let 方法名 = function(参数列表){方法体}
let 方法名 = new Function("参数 1","参数 2","参数 3","方法体");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1，无参无返回值方法
function f1() {
console.log("f1");
}
f1();
//2，有参无返回值
function f2(name,age) {
console.log(name+":"+age);
}
f2("zs",10086);
//无参有返回值
function f3() {
return "返回值";
}
console.log(f3());
//有参有返回值
function f4(x,y) {
return x*y;
}
let a = f4(9,9);
console.log(a);
let f5 = function (name,age) {
console.log(name+":"+age);
}
f5("ls",28);
let f6 = new Function("name","age","console.log(name+':'+age)");
f6("ww",99);
</script>
</body>
</html>1.6，和页面相关的方法
-
通过选择器找到页面中的元素对象 let 元素对象 = document.querySelector("选择器");
-
获取和修改元素的文本内容 元素对象.innerText = "xxxx"; 修改 元素对象.innerText 获取
-
获取和修改控件的值 文本框对象.value = "xxx"; 修改 文本框对象.value 获取
1.7，NaN
Not a Number, 代表不是一个数字
isNaN(变量) 返回值 true 代表是 NaN false 代表不是 NaN
NaN 和任何数值进行任何运算 结果都是 NaN
1.8，JavaScript 对象分类
内置对象：包括 string , number,boolean 等
BOM：浏览器对象模型
DOM：文档对象模型
1.8.1，BOM
Browser Object Model: 浏览器对象模型, 包含和浏览器相关的内容.
window 对象: 此对象里面的属性和方法称为全局属性和全局方法, 访问时可以省略 window.
window 中常见的方法：
isNaN(); 判断变量是否是 NaN
parseInt()/parseFloat(); 将字符串转成整数或小数, 还可以将小数转成整数
alert(); 弹出提示框
confirm();弹出确认框
prompt(); 弹出文本框
let timer = setInterval(方法,时间间隔); 开启定时器
clearInterval(timer); 停止定时器
setTimeout(方法,时间间隔); 开启只执行一次的定时器
window 中常见的属性:
location: 位置
location.href 获取和修改浏览器的请求地址
location.reload() 重新加载/刷新
history: 历史
history.length 得到历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
1.8.2，DOM
Document Object Model 文档对象模型, 包含和页面相关的内容
通过选择器找到页面中的元素对象 let 元素对象 = document.querySelector("选择器");
获取和修改元素的文本内容 元素对象.innerText = "xxxx"; 修改 元素对象.innerText 获取
获取和修改控件的值 文本框对象.value = "xxx"; 修改 文本框对象.value 获取
创建元素对象 let 元素对象 = document.createElement("标签名");
添加元素对象 已经在页面中显示的元素对象.append(元素对象);
获取页面 body 元素对象 document.body
1.9，前端 MVC 设计模式
MVC 设计模式就是将实现一个业务的所有代码划分为 3 部分.
M: Model 模型, 数据模型 指和数据相关的代码
V:View 视图, 指和页面相关的代码
C:Controller 控制器, 指将数据展示到页面中的过程代码
MVC 设计模式的 Controller 中需要频繁的进 DOM 操作(查找页面中元素,创建元素等),会浪 费资源,MVVM 设计模式可以解决此问题
2.0，前端 MVVM 设计模式
MVVM 设计模式也是将实现一个业务的所有代码划分为 3 部分.
M:Model 模型, 数据模型 指和数据相关的代码
V:View 视图, 指和页面相关的代码
VM: ViewModel 视图模型, 负责将页面中可能发生改变的元素和变量在内存中进行绑定, 当需要改变页面中元素时,只需要修改变量, 视图模型会不断监听变量值的改变, 当值发生改变 时会从内存中找到对应元素让其跟着改变
二，VUE
目前最流行的前端框架, 此框架基于 MVVM 设计模式
两种使用方式:
1， vue.js 文件引入 html 页面中使用
2， 脚手架环境下使用
引入外部的 js 文件两种方式:
1，把 js 文件下载到本地 然后引入的到自己的页面中
2，直接引入一个 CDN 服务的地址
国外比较稳定的两个 CDN
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
1，VUE 框架的工作流程
VUE 框架中创建的 Vue 对象相当于是 MVVM 设计模式中的 VM 视图模型，该对象会将页面 中可能发生改变的元素和变量在内存中进行绑定，并且会一直监听变量值的改变， 当值发生改变时会从内存中的对应关系找到对应的页面元素，并对其进行修改，以后需要改变页面时只需要找到页面对应的变量，让变量改动页面会自动跟着改变
2，VUE 框架中的各种指令
{{变量}}：用于插值: 让此处的文本和变量进行绑定，不写在标签里面也可以使用
v-text="变量"：让元素的文本内容和变量进行绑定
v-html="变量"：让元素的 html 标签内容 和变量进行绑定
v-bind:属性名="变量"：让元素某个属性的值和变量进行绑定，可以省略
v-bind 直接写：属 性名进行绑定
v-model="变量"：让控件的值和变量进行双向绑定，控件的值改变变量的值会跟着改变，同时变量的值改变也会影响控件的值，
应用场景: 当需要获取控件的值的时候使用双向绑定
v-for="(对象,下标) in 数组" 让显示的元素内容和数组进行绑定
v-if="变量" 让元素是否显示和变量进行绑定，true 显示, false 不显示(删除元素)
v-else 让元素的显示状态和 v-if 元素的状态相反
v-show="变量" 让元素是否显示和变量进行绑定，true 显示, false 不显示(隐藏)
v-on:事件名="方法" 事件绑定，绑定的方法必须写在 Vue 对象中的 methods 属性里面， @ 事件名="方法" 简写
扫一扫
1651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
