[JavaScript知识库]周报6＞＞＞

JavaScript

js是弱类型的语言，所有类型的变量都是用var关键字定义，并且参数的类型可以随时转换。

js运算符：

如果两边比较的值不是同一种数据类型，===比较时直接返回false。

如果是同一种数据类型，==和===比较没有区别。

由于js中字符串是基本数据类型，比较字符串相等相等通过==进行！

typeof运算符：

用于返回变量或者表达式的数据类型

注意：js中的语句，判断条件可以不是boolean类型，因为js中会自动进行数据类型的转换

js数组：

js数组用于在单个的变量中存储多个值（其实就是一个容器）

js中的数组可以存储：数值，字符串，布尔值，undefined，null，对象，函数等。

js数组的声明方式：

方式一：var a = new Array();//声明一个空数组

方式二：var b = [ ];//声明一个空数组

数组需要足以的细节

1.js数组中可以存放任意的数据类型

2.js中的数组长度可以被改变

js函数：

函数就是一个具有功能的代码块，可以反复调用

函数就是包裹在花括号中的代码块，前面使用关键字function

声明：

方式一：function 函数名称(参数列表){函数体}

方式二：通过函数直接量声明函数

var 函数名称 = function(参数列表){函数体}

调用：函数名称（参数列表）

注意：在js中调用函数时，传递的参数个数如果与声明的参数个数不相同，也不会报错，但是最好按声明的个数来传递，因为个数不符，可能会引发一些问题。

js对象：

利用function关键字声明对象，用new关键字创建对象。

内置对象：

String/Array/Number/Math/JSON

Document对象代表整个HTML文档，可用来访问页面中的所有元素。

自定义对象：

方式一：

声明对象：function Student（）{}

创建对象：var s = new Student()

绑定对象：s.name="...";

? ? ? ? ? ? ? ? ? s.hobby="...";

绑定函数：s.sing=function(){

? ? ? ? ? ? ? ? ? console.log("solo...");

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ?console.log(s);

? ? ? ? ? ? ? ? ? ? s.sing();

方式二：

创建新的js对象：var car={

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?color:"red",

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?price:9.9,

绑定函数：run:function(){

? ? ? ? ? ? ? ? ? console.log(....)

? ? ? ? ? ? ? ? ? }

DOM技术：

全称是文档对象模型，用来利用document对象提供的各种属性和方法，方便快速的定位网页中的所有元素。

获取document对象：window.document

常用方法：

1.按照id的值获取元素：getElementById(id的属性)---只会获取到一个元素。

2.按照name的值获取元素：getElementByName(name属性的值)---获取到多个元素，存入数组

3.按照class的值获取元素：getElementByClassName(class属性的值)---获取到多个元素，存入数组。

4.按照标签名的值湖区元素：getElementByTagName(标签的名字)---获取到读个元素，存入数组

5.直接向网页输出：write();

常用属性：

title---返回网页的标题

id---设置或返回元素的id

innerHTML---设置或返回元素的内容

onclick---给元素设置鼠标点击事件，调用指定函数

document对象提供的innerHTML和innerText属性的区别？

前者可以解析HTML代码

JSON：

就是一个字符串，作用就是用来完成浏览器和服务器之间的数据的交换，规定了浏览器和服务器自减的数据格式

用来完成前后端数据交互的格式

是一种轻量级的数据交换格式，而且数据格式看起来很简洁

JSON对象：可以把json字符串和js对象互转

1.json字符串转成js对象：方便的通过对象，调用属性、函数

JSON.parse(json字符串)：接收一个json字符串作为参数，返回js对象

2.js对象转成json字符串：方便对字符串操作（拼接、长度、截取....）

JSON.stringify(js对象)：接收一个js对象，返回一个json字符串

Vue:

是一个轻量级，渐进式的前端框架

特点：数据驱动、MVVM、组件化

好处：封装了DOM操作元素的API

MVVM

M是Model,用来封装数据的模型层

V是view，用来展示数据

VM是Vue对象，把M和V连接起来

好处：实现了代码的松耦合

引入外部文件的路径问题：

1.如果你想要引入的资源，和你在同级目录，直接写vue.js

2.如果你想要引入的资源，和你不在同一级目录，就先写同级的目录，再继续写资源名称.js

Vue指令：

使用方式：就是在HTML的标签上，加一些v-的指令

v-model:实现数据驱动，双向绑定

数据驱动，双向绑定：改Model会影响View,改View会影响Model

v-if:用来判断，不满足判断条件就不展示

v-show:用来判断，不满足判断条件就不展示（通过CSS实现）

v-else-if/v-else:执行的顺序类似于Java

v-cloak：用来解决闪现问题（网页展示了差值表达式）

v-html:获取数据，也可以解析HTML标签

v-on指令用来给HTML元素添加vue事件

指定事件的触发方式v-on:可以简写成一个@

v-bind指令用来获取变量的值

Vue组件：

当想要扩展HTML的功能时，使用vue定义一些组件

1.全局组件：vue.component(组件名，组件的功能)

2.局部组件：在vue对象里，再加一个属性components

3.使用组件：在数据渲染区，直接把组件名当做HTML标签名来用

区别：全局组件可以被多个vue对象使用

? ? ? ? ? ?局部组件只能在当前vue对象中使用

Vue.component(1,2)---1是组件名，2是组件的显示效果

Vue项目的使用：

src文件夹：写自己的业务

src/components文件夹：定义组件

src/router文件夹：定义路由

src/App.vue文件：注册组件

src/main.js文件：入口js文件

index.html:作为项目的主页

一、自定义组件：新建XXX.Vue文件（放在src/components文件夹）

1.写HTML代码

2.写js代码（准备数据）

3.写CSS代码

二、修改App.vue文件（注册组件）

1.导入自定义组件

import 组件名 from'路径'

2.注入组件（类似于局部组件的语法）

components:{

组件名 //使用了第一步的名字

}

4.使用自定义的组件，其实就当做HTML标签用。

测试（启动项目）

1.启动项目：在你的项目文件夹目录下执行：npm run dev

2.打开浏览器测试效果

Element ui

是一套漂亮的网页，有各种元素，直接用现成的代码

一、安装

1.进入你的项目目录中

2.执行安装命令：npm i element -ui -D

二、修改main.js

1.导入下载好的element ui

2.导入下载好的elementUI.CSS

3.使用element ui

三、修改自定义组件文件

四、测试

总结：

1.安装elementUI

2.修改main.js 引入element ui

3.使用各种组件（标签）

1）图标：i标签，配置class属性，属性的值是图标的名字

2）布局：el-row标签表示行元素，el-col标签表示列元素，默认一行有24分栏，：span属性可以自由组合

3）按钮：el-button标签表示按钮，type属性用来指定元素颜色，icon属性可以给按钮添加图标

4）输入框：el-input标签是输入框，必须指定v-model属性才能实现输入的效果

5）表格：el-table标签表示表格，el-table-column表示表格里的列，通过：data属性获取数组里的数据，通过label属性指定表格里的表头，通过prop属性绑定要获取的值

6)表单：el-form标签是表单，el-form-item表示表单项，通过label属性指定表单项的名字，通过：v-model属性获取表单数据

Maven

1.在idea里创建Maven工程

File-->New-->Project-->输入工程名称和Groupld-->Finish

2.修改pom.xml,添加jar包的坐标，然后刷新下载