javaweb

学习b站黑马的教程所做的记录：黑马程序员2023新版JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili

二、Day2——JS

二、JS的基础语法——变量

弱数据类型语言：是通过给的数据确定变量的数据类型的。

 三、JS函数

1、函数的定义

 注意：

        形参不需要声明数据类型，因为JavaScript是弱数据类型

        也不用声明函数的返回值类型

2、调用函数的语法：

四、JS对象

1、array对象

定义数组的方式一例子：

 定义数组方式二的例子：

 注意：JavaScript中的数组可以存储任意类型的数据且长度是可变的。

 数组中常用的属性和方法

 length属性的例子：

var arr = [1,2,3,4];
arr.length        //返回数组中元素的个数

数组中方法的例子：

var arr = [1,2,3,4];

//push()方法：添加元素到数组的末尾，可以一次性添加多个元素
arr.push(7,8,9);
console.log(arr);


//splice()方法:删除元素，从哪个索引位置开始删，删几个
arr.splice(2,2);               //从索引为2的位置开始删，删两个


//forEach()方法：遍历数组中每个有值的数组元素
arr.forEach(function(e){
    console.log(e);
})

2、String对象

例子：

字符串中常见的属性和方法

 属性的例子：

var str = "    Hello String    ";
str.length;


//charAt()方法：返回字符串中指定位置的字符
console.log(str.charAt(4));

//indexOf()方法：检索字符串的索引
console.log(str.indexOf("lo"));

//trim()方法：去除字符串两端的空格,并返回新的字符串
var str1 = str.trim();
console.log(str1);

//substring()方法：提取字符串中两个索引之间的字符串，含头不含尾

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

3、对象

对象可以包括多个属性和多个方法，对象的属性以“属性名：属性值”键值对的方式出现，键值对之间用逗号分隔。

在自定义对象中定义函数的简写语法，直接把：function删除：

 

        之后就可以通过对象名.的方式调用对象中的属性或函数了

4、JSON对象

5、BOM对象

5.1.1 BOM对象概述

 5.1.2 浏览器窗口对象window

获取浏览器窗口对象：直接使用window即可。window.可调用window对象中的属性和方法。其中window.可以省略。

 window对象的这些属性用于获取其他的BOM对象：

属性名	作用
history	获取历史记录对象
location	获取地址栏对象
navigator	获取浏览器对象

window对象中的方法：

alert(字符串)	弹出一个带有一段消息和确认按钮的警告框
confirm(字符串)	显示带有一段消息还有确认按钮和取消按钮的对话框，此方法有true（确认）和false（取消）两个返回值
setInterval(要执行的函数，间隔多久执行)	周期性（以毫秒计）的执行某个函数
setTimeout(要执行的函数，间隔多久执行)	在指定的毫秒数后执行函数一次

例子：

 

 

 5.2.1 location对象

获取：使用window.location获取location对象，其中window.可以省略。

location对象的属性：

href	用于返回或设置地址栏的URL

alert(location.href);   //获取当前网页的URL

location.href = "某URL"       //设置地址栏的URL然后自动跳转到此地址

6、DOM对象

概念：Document Object Model（文档对象模型），将标记语言的各个部分封装成对应的对象

整个文档封装为Document对象

将标签封装为元素对象Element

标签中的属性封装为属性对象Attribute

标签之间的文本封装成文本对象Text

标记语言中的注释封装为注释对象Comment

 获取DOM的Element元素对象的方式：

通过window对象获取到Document对象后再获取Element对象。（通过document对象中的函数获取元素对象）

window.可以省略，所以直接写document即可

 五、JS事件监听

 1、事件绑定的方式

onclick：事件 

 2、常见的事件属性

当发生某事件后，与事件绑定的代码就会执行

六、vue

1、vue概述

每个 Vue 应用都需要通过实例化 Vue对象来实现。

语法格式如下：

new Vue({                //实例化Vue
    //属性
})

//①想要使用vue，必须在HTML页面中引入Vue.js文件
<script src="./vue.js"></script>

//②在写JS的区域定义Vue对象
<script>
    new Vue({
        el:"#app",                   //el属性代表Vue要接管的区域，就是id属性值
        data:{                       //data属性是数据模型，用于定义属性在里面
             message:"Hello Vuel"
           } 
         methods:{                  //methods属性用于定义的函数在里面 
                  details: function() {
                            return  this.site + " - 学的不仅是技术，更是梦想！";
                        }  
                 }                       
        })
</script>

//③定义视图
<div id="add">
    <input type="text" V-model="message">
    {{message}}                       //{{ }} 用于输出对象属性和函数返回值。
</div>

2、Vue的常用指令

指令：HTML标签中带有v-前缀的特殊属性就是Vue中的指令。

v-bind

为HTML标签中的属性绑定属性值，如href，css样式等

v-model

在表单元素上创建双向数据绑定，数据模型data中的某个属性和表单创建了双向数据绑定（与表单元素和数据模型进行双向数据绑定）

v-if	条件性的渲染展示某元素，为true时渲染，为false时不渲染
v-else-if
v-else

v-show

条件性的展示某元素，区别在于其是通过css的display属性来控制这个元素不展示出来，但浏览器其实还是解析了

//语法格式
<div v-for="临时变量 in addrs">{{临时变量}}</div>   //addr可以理解为临时变量，in是固定的关键字，addrs为要遍历的数组，然后在遍历的过程中通过插值表达式{{临时变量}}将元素在视图层中展示出来


<div v-for="(临时变量,index) in addrs">{{index}}:{{临时变量}}</div>

 3.vue的生命周期

vue生命周期的八个阶段

 三、Day3

 1、Ajax

1.1 Ajax的介绍

 

 1.2 Axuos

 

2、前后端分离开发

3、前端工程化

4、Vue组件库Element

5、Vue路由

6、打包部署