JavaWeb零基础学习Day2——JS Vue
一.什么是JavaScript（不重要）
- JavaScript（简称JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页进行可交互操作
- 不论是概念还是设计，JavaScript和Java是两种完全不同的语言，但是基础语法类似
- JavaScript在1995年由Brendan Eich发明，并在1997年称为ECMA标准
- ECMAScript（ES6）是由最新的JavasScript版本（发布于2015年）
二.JS的引入方式
内部脚本：将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任何地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可以改善显示速度
<script>alter("Hello javaScript")
</script>外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>
- <script>标签不能闭合
<script src = "js/demo.js"></script>alert("Hello World")三.JS基础语法
1.书写语法
- 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
- 注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
- 大括号表示代码块
判断语句
if(count == 3){alert(count);
}2.输出语句
使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
<script>window.alert("hello javascript");document.write("hello");console.log("hello");
</script>3.变量
JavaScript中用var关键字（variable的缩写）来声明变量
特点：
- 作用域比较大，作为全局变量
- 可以被重复定义
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循以下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
var a = 20;
a = "张三";注意事项：
在es6中新增了两个关键字：let和const
let：用法类似于var，但所声明的变量，只在let关键字所在的代码块内有效，即作为局部变量，且不允许重复声明
const：用来声明一个只读的常量。一旦声明，常量的值就不能被改变
4.数据类型、运算符、流程控制语句
1）数据类型
在JavasScript中分为：原始类型和引用类型
原始类型：
number：数字（整数、小数、NaN（Not a Number））
string：字符串，单双引皆可
boolean：布尔。true、false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型：
var a = 20；
alert（typeof a）2）运算符
类型转换：
- 字符串类型转为数字：
- 将字符串字面值转为数字。如果字面值不是数字，则转为NaN
其他类型转为数字
alert（parseInt（“12”））; //12
alert（parseInt（“12A45”））;//12
alert（parseInt（“A45”））; //NaN（not a number） - 其他类型转为boolean：
- Number：0和NaN为false，其他均转为true
- String：空字符串为false，其他均转为true
- Null和undefined：均转为false
3）流程控制
以上所有流程控制语句使用方法均和Java中一致，如果忘记可以点开以下链接复习
Java零基础学习Day04---判断和循环
5.函数
介绍：函数（方法）是被设计为执行特定任务的代码块
定义：JavaScript函数通过function关键字进行定义，语法为：
function functionName（参数1，参数2..）{//要执行的代码
}注意：
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称（实际参数列表）
定义方式1：
function add（a，b）{return a+b；
}var result = add（10，20）；
alert（result）定义方式2：
var functionName = function（参数1，参数2...）{//要执行的代码
}var add = function（a，b）{return a+b；
}var result = add（10，20）；
alert（result）注：JS中，函数调用可以传递任意个数的参数
6.对象
1）Array数组
注：JavaScript中的数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据。
aff.forEach(function(e){console.log(e);})arr.forEach((e) =>{console.log(e);})2）String
3）JSON
JavaScript自定义对象：
JSON-介绍：
概念：JavaScript Object Notation，JavaScript对象标记法
JSON是通过JavaScript对象标记法书写的文本
由于语法简单，层次结构鲜明，现多用于数据载体，在网络中进行数据传输，例如前后端的请求与响应
注：JSON对象中定义外面必须有个单引号，key值必须有双引号，value值根据情况改变
4）BOM
概念：浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象。
组成（具体要掌握标红的）：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
获取
window.alert("Hello BOM");
alert("Hello BOM window");方法
confirm - 对话框 --确认：ture；取消：false
var flag = confirm("您确认删除该记录吗");
alert(flag);定时器-setInterval -- 周期性的执行某一个函数
var i = 0；
setInterval（function（））{i++console.log("定时器执行了"+"i"+"次")；
}，2000）；代表每隔2秒执行一次定时器-setTimeout -- 延迟指定时间执行了一次，后续不会再执行
setTimeout（function（）{alert（"JS"）;
） 
alert(location.href);
先执行上一条语句输出后，跳转到新的网址页面
loaction.href = "https://www.baidu.cn"5）DOM
dom主要关注两点：
- 第一点是如何获取这个元素。
- 第二点是如何调用这个元素中的属性or方法从而来操纵html的元素对象（方法和属性查询参考手册）。
7.JS事件监听
事件：HTML事件是发生在HTML元素上的“事情”，比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时 执行代码
1）事件绑定
2）常见事件
四.Vue
1.什么是Vue
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
官网：https://v2.cn.vuejs.org/
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷，高效
2.Vue的快速入门操作
为什么能直接将数据模型的数据展示出来呢：
因为使用到了一个指令 v-model，这是进行数据绑定的指令，一旦进行了数据绑定，那么数据模型中的数据就会在视图层中显示出来，数据模型的数据变化也会影响视图，视图层中的数据变化也会影响数据模型
3.常用指令
注：通过v-bind或者v-model绑定的变量，必须在数据模型中声明
4.生命周期
生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
