JavaScript常用的内置对象(json) JavaScript面向对象 Vue常用指令

本文链接：https://blog.csdn.net/m0_53636192/article/details/122480523

文章目录

2022.01.12 第二阶段 day12

JavaScript常用的内置对象

Global全局对象:只有名称,所以调用方法时,直接写方法名称即可.

eval(): 计算 JavaScript 字符串，并把它作为脚本代码来执行。
isNaN():检查某个值是否是数字。
parseInt():解析一个字符串并返回一个整数。
parseFloat():解析一个字符串并返回一个浮点数
decodeURI():解码某个编码的 URI。
encodeURI():把字符串编码为 URI。
Number():把字符串对象的值转换为数字。

Number数字对象

调用方法:直接使用Number调用方法

isNaN():检查某个值是否是数字。
parseFloat():解析一个字符串并返回一个浮点数
parseInt():解析一个字符串并返回一个整数。
Number():把字符串对象的值转换为数字。

Array数组对象

Array数组对象概述:Array可以保存任意类型任意长度的元素
调用方法:先创建数组对象，再调用方法
属性
length: 数组的长度
sort()：对数组的元素进行排序

String对象

String对象概述:表示字符串类型的对象
调用方法:先创建字符串对象，再调用方法
方法一: 与html相关的方法
字体变大: big();
字体加粗:bold();
方法二:与java类似的方法
indexOf(“字符”);获取某个字符在字符串中的位置(正着遍历),如果没有这个字符,返回-1
lastIndexOf(“字符”);获取某个字符在字符串中的位置(倒着遍历),如果没有这个字符,返回-1
substr(start,len);截取字符串,表示从索引start截取长度为len的字符串
substring(start,end);截取字符串表示从索引start截取索引为end(不包含end)的字符串
split(“字符”)： 把字符串分割为字符串数组。

Math对象.

Math对象概述:表示数学对象
调用方法:直接通过Math调用方法，和java中一样
常用方法:
max();求最大值
min();求最小值
floor();"地板方法"向下取整,比如: 5.9–>向下取整 5
ceil();"天花板方法"向上取整,比如:5.01–>向上取整6
random();随机数,范围[0,1);包含0,不包含1
round();四舍五入的方法

Date对象

Date对象概述:Date表示日期,可以表示年月日，时分秒
调用方法:先创建Date对象，再调用方法（和java一模一样）
常见的方法:
var longTime = date.getTime();//时间戳方法
var systemTime = date.toLocaleString();//系统时间

JSON对象.

作用: 前端和后端在数据交互,使用json
json定义: 1. 定义单个json 2. 定义json数组, 3. 复杂的json

json解析: json对象.key

JSON对象概述:JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
JSON作用：
方式一：客户端<--------------> 服务器端，进行数据交互
方式二：服务器端<-------------->服务器端，进行数据交互
总结：
json数据量级别少，传输速度快
json表示数据，描述的很清晰

//如果 json的key是自定义的: 获取时不加$ 			
//如果json的可以是vue规范的: 获取时加$

…

  <script>
			/**
			 * json概述:它是一种轻量级的数据格式,类似与map
			 * json特点:1. 数据量少
			 *      2. 描述数据,比较直观,清晰
			 * json作用:前端<----json----->后端
			 * json定义:第一类: 单个json对象
			 *      第二类: json数组对象
			 *      注意:
			 * 		  1.大括号外边不要加双引号
			 * 		  2.在大括号里面除了数字不加引号以外,其它值都加引号
			 *        3.不犯错:所有值都加引号
			 *json解析:第一类: 单个json对象: json对象.key;// map.get(key)
			 *        第二类: json数组对象
			 *                  步骤一: 从数组中拿到单个json
			 *                  步骤二: json对象.key
			 * 实际开发中: 还有复杂的json数据格式
			 */
			  // json的key : first
			  // json的value: {"id":111,"name":"jack"}
			  var casjson={
			  				"first":{"id":111,"name":"jack"}
			  			  };	
			 // 解析复杂的json格式
			 //var casUser = casjson.first;//{"id":111,"name":"jack"}
			 //var casUserID = casUser.id;
			 var casUserID =casjson.first.id;
			document.write(casUserID);
			//1.第一类: 单个json对象
			var user={"id":1,"name":"jack"};
			var id =  user.id;
			var name = user.name;
			//document.write(id+","+name);
			//2.第二类: json数组对象
			var users= [
							{"id":1,"name":"jack"},
							{"id":2,"name":"rose"},
							{"id":3,"name":"ship"}
					   ];//静态数组
			//3.遍历数组
			for(var i=0;i<users.length;i++){
				//步骤一: 从数组中拿到单个json
				var u = users[i];
			   //步骤二: json对象.key
			   //document.write(u.id+","+u.name+"<br/>");
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--	
				v-if条件指令: 条件表达式,用比较运算符,可以用逻辑运算符
				num>2: 条件成立,返回的结果是true
				num>20: 条件不成立,返回的结果是false,不显示数据
			-->
			<a href="index.html" v-if="num>20">1111</a>
		    <hr />
		   <a href="index.html" v-else-if="num>3">2222</a>
		  
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			//1.创建对象,传递json参数
			// 什么时候加逗号: 只要是key:value,就要加逗号
			// json中key: 可以不加引号,建议最好加上引号
			// json中value: 除数字以外.必须都得加引号
			new Vue({
				"el": "#app",
				"data":{
					"num":10,
					"name":"jack"
				},
				
			});
		</script>	
		
	</body>
</html>

JavaScript面向对象

类的定义和使用
定义格式:
class 类名{
   constructor(变量列表){
      变量赋值;
}
   方法名(参数列表){
   方法体;
   return 返回值;
   }
}
使用格式:let 对象名 = new 类名(实际变量值);
         对象名.方法名();

字面量定义类和使用
定义格式:
let 对象名 ={
    变量名:变量值,
    变量名:变量值,
    ......
    方法名:function(参数列表){
    方法体;
    return 返回值;
    },
    ......
};
使用格式:对象名.变量名
        对象名.方法名();

1.类的定义
class 类{} 字面量定义
2.类的使用
let 对象名 = new 类名(); 对象名.变量名 对象名.方法名()
3. 继承
让类和类产生子父类关系，提高代码的复用性和维护性。
子类 extends 父类
Object 顶级父类

在HTML网页里面引入JavaScript

方式一:
html网页里面,书写script标签,里面定义js代码
		 缺点:
		    js代码不能重复使用(不能在其它网页里面使用)
	        html标签和js代码耦合了,后期不便于修改和维护
	     优点:
		     html网页和js代码写在一起,便于阅读和调试.
			 小结: 在开发环境下(代码处于编码阶段),使用方式一.
方式二:
   在外部定义一个js文件
   在html网页里面,通过script标签的src属性引入外部的js文件
缺点:js代码是单独的一个文件,所以在html阅读起来麻烦.
优点:1.js代码可以重复使用
     2. js代码和html网页解耦合,便于修改和维护
小结: 在生产环境下(代码全部发完毕,上线),使用方式二

Vue

框架(framework)

前端框架:为开发前端代码服务的,如:vue.js, node.js, reactive.js等

后端框架:为开发后端代码服务的,如:spring,mybatis,springbot,springcloud

自定义框架

小结:框架是一个"半成品"的应用, 我们实际开发中,基于框架开发,提高开发效率

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

框架: vue前端框架,作用: 提高前端代码的开发效率
渐进式框架: 基于vue框架进行二次开发,满足我们公司项目的需求
视图层: 指的html+css,指的在html进行数据的展示,不关心前端业务逻辑的书写
业务逻辑: 可以这样理解在js代码里面写的判断以及循环这些代码.
特点: 1. 好学 2. 好用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--2. div指定vue的作用范围 -->
		<div id="app">
			{{msg}}
		</div>
		<!--1.在html引入vue.js-->
		<script src="js/vue.js" type="text/javascript"></script>
		<script>
			/*
			 * 如何使用vue
			 * 1.在网页里面引入vue.js
			 * 2.在html网页里面指定vue的作用范围,通常情况下使用div指定范围
			 * 3.创建vue对象,给vue对象赋值,那个值就是一个json数据
			 */
			//3.定义vue对象的参数
			var config = {
				"el":"#app",
				"data":{
					"msg":"hello vue!",
				 }
			}
			//4.创建vue对象
			new Vue(config);
		</script>
	</body>
</html>

vue小结:Vue是一套构建用户界面的渐进式前端框架。
Vue的程序包含视图和脚本两个核心部分。
脚本部分
Vue核心对象。
选项列表
el：接收获取的元素。
data：保存数据。
methods：定义方法。
视图部分
数据绑定：{{变量名}}

Vue常用指令

指令: 指的带 v-指令的名称, 不同的指令有不同的作用

指令使用的位置: 指令通常使用在标签的属性. 比如:<a 指令>xx

v-html:把文本解析为 HTML 代码。

v-bind:为 HTML 标签绑定属性值。

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

v-for:列表渲染，遍历容器的元素或者对象的属性。

v-on:为 HTML 标签绑定事件

v-model:在表单元素上创建双向数据绑定。

v-if v-else-if v-else
作用: 如果符合条件,显示数据,反之不显示内容
v-show
作用: 如果符合条件,显示数据,反之不显示内容
条件指令的区别:
v-if v-else-if v-else: 条件不成立时,删除标签
v-show : 条件不成立时,使用dispaly:none隐藏标签