JavaWeb——002JS Vue快速入门

一、JS快速入门编辑

1、什么是JavaScript?编辑

2、JS引入方式编辑

2.1、示例代码

3、JS基础语法

3.1、书写语法

3.2、变量编辑

3.3、数据类型

3.4、运算符编辑

3.5、流程控制语句编辑

4、JS函数

4.1、第一种函数定义方式 function funcName(参数1，……)编辑

4.2、第二种函数定义方式 var funcName = function(参数1，……)编辑

5、JS对象

5.1、Array编辑

5.2、String

5.3、JS自定义对象

5.4、JSON

5.5、BOM（浏览器对象模型）

5.6、DOM（文档对象模型）编辑

5.7、DOM案例

6、JS事件监听

6.1、事件绑定

6.2、常见事件

6.3、事件监听案例编辑

二、Vue快速入门

1、什么是Vue?编辑

1.1、MVVM

1.2、Vue双向数据绑定书写流程编辑

2、Vue的常用指令（v-xxx）编辑

2.1、v-bind编辑

2,2、v-model编辑

2.3、v-on

2.4、v-if（符合条件才渲染）编辑

2.5、v-show（全部渲染）

2.6、v-for编辑

2.7、案例：通过Vue完成表格数据的渲染展示

3、Vue的生命周期

3.1、生命周期状态图

3.2、mounted示例代码

3.3、小结编辑

一、JS快速入门

1、什么是JavaScript?

ECMA：（ECMA国际）

2、JS引入方式

2.1、示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- <script>alert("Hello JS");//定义弹出框</script> -->
</head>
<body><!-- 内部脚本 --><!-- <script>alert("Hello JS");//定义弹出框</script> --><!-- 外部脚本 --><script src="js/demo.js"></script>
</body>
</html><!-- <script>alert("Hello JS");//定义弹出框
</script> -->

外部JS文件

效果

3、JS基础语法

书写语法
变量
数据类型、运算符、流程控制语句

3.1、书写语法

输出语句：window.alert()、document.write()、console.log()

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基本语法</title>
</head>
<body><script>window.alert("Hello JS"); //弹出框document.write("Hello JS"); //写入HTML页面console.log("Hello JS"); //浏览器控制台</script>
</body>
</html>

效果图

3.2、变量

示例代码

代码

效果

3.3、数据类型

原始数据类型（5种）：

示例代码

为什么typeof null 会返回 object：

3.4、运算符

示例代码：

类型转换：

示例代码：（其它类型转为数字）

示例代码：（其它类型转为boolean）

3.5、流程控制语句

4、JS函数

4.1、第一种函数定义方式 function funcName(参数1，……)

4.2、第二种函数定义方式 var funcName = function(参数1，……)

代码

5、JS对象

重点关注五种对象：

BOM：浏览器对象模型

DOM：文档对象模型

5.1、Array

注意事项：JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以存储任意的类型的数据（长度可变、类型可变）

示例代码：

//定义数组// var arr = new Array(1,2,3,4);// var arr = [1,2,3,4];// console.log(arr[0]);// console.log(arr[1]);//特点: 长度可变 类型可变// var arr = [1,2,3,4];// arr[10] = 50;// console.log(arr[10]);// console.log(arr[9]);// console.log(arr[8]);// arr[9] = "A";// arr[8] = true;// console.log(arr);

效果：

遍历数组（与Java相同）

Array的成员函数：

箭头函数ES6：类似与Lambda表达式

示例代码：forEach()：仅遍历有值元素

push()：添加元素

splice()：删除元素

5.2、String

示例代码：

<script>//创建字符串对象//var str = new String("Hello String");var str = "  Hello String    ";console.log(str);//length//获取字符串的长度console.log(str.length);//charAt//获取指定位置的字符console.log(str.charAt(4));//indexOf//检索字符串xx所在的位置console.log(str.indexOf("lo"));//trim//去除字符串左右两侧的空格var s = str.trim();console.log(s);//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)console.log(s.substring(0,5));</script>

5.3、JS自定义对象

示例代码：

 //自定义对象// var user = {//     name: "Tom",//     age: 10,//     gender: "male",//     // eat: function(){//     //     alert("用膳~");//     // }// 方法简写//     eat(){//         alert("用膳~");//     }// }// alert(user.name);// user.eat();

效果

5.4、JSON

Key-value键值对但key必须要用双引号引起来

 //定义jsonvar jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';alert(jsonstr.name);//json字符串--js对象var obj = JSON.parse(jsonstr);alert(obj.name);//js对象--json字符串alert(JSON.stringify(obj));

5.5、BOM（浏览器对象模型）

BOM五大方法

JS Browser BOM
JS Window
JS Screen
JS Location
JS history
JS Navigate

重点了解和掌握Windows和Location对象即可

示例代码：confirm()

//定时器 - setInterval -- 周期性的执行某一个函数// var i = 0;// setInterval(function(){//     i++;//     console.log("定时器执行了"+i+"次");// },2000);//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){//     alert("JS");// },3000);

Location对象：

//locationalert(location.href);location.href = "https://www.itcast.cn";

5.6、DOM（文档对象模型）

DOM树：

DOM可以进行的操作：

DOM案例：

更改标题内容和颜色

删除最后一个

DOM分3种

如何获取指定的元素对象：

示例代码：

<body><img id="h1" src="img/off.gif">  <br><br><div class="cls">传智教育</div>   <br><div class="cls">黑马程序员</div>  <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body>

第一步：获取Element元素

//1. 获取Element元素//1.1 获取元素-根据ID获取// var img = document.getElementById('h1');// alert(img);//1.2 获取元素-根据标签获取 - div// var divs = document.getElementsByTagName('div');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);// }//1.3 获取元素-根据name属性获取// var ins = document.getElementsByName('hobby');// for (let i = 0; i < ins.length; i++) {//     alert(ins[i]);// }//1.4 获取元素-根据class属性获取// var divs = document.getElementsByClassName('cls');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);// }

第二步：查询官方手册，找到对应方法

//2. 查询参考手册, 属性、方法var divs = document.getElementsByClassName('cls');var div1 = divs[0];div1.innerHTML = "传智教育666";

5.7、DOM案例

<body><img id="h1" src="img/off.gif">  <br><br><div class="cls">传智教育</div>   <br><div class="cls">黑马程序员</div>  <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1. 点亮灯泡 : src 属性值var img = document.getElementById('h1');img.src = "img/on.gif";//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>var divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; }//3. 使所有的复选框呈现选中状态var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {const check = ins[i];check.checked = true;//选中}</script>

6、JS事件监听

6.1、事件绑定

点击事件：

示例代码

效果

6.2、常见事件

<script>//onload : 页面/元素加载完成后触发function load(){console.log("页面加载完成...")}//onclick: 鼠标点击事件function fn1(){console.log("我被点击了...");}//onblur: 失去焦点事件function bfn(){console.log("失去焦点...");}//onfocus: 元素获得焦点function ffn(){console.log("获得焦点...");}//onkeydown: 某个键盘的键被按下function kfn(){console.log("键盘被按下了...");}//onmouseover: 鼠标移动到元素之上function over(){console.log("鼠标移入了...")}//onmouseout: 鼠标移出某元素function out(){console.log("鼠标移出了...")}//onsubmit: 提交表单事件function subfn(){alert("表单被提交了...");}</script>

6.3、事件监听案例

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="on()"> <input type="button"  value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/on.gif";}function off(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为大写input.value = input.value.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置未选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = false;}}</script>
</html>

二、Vue快速入门

1、什么是Vue?

1.1、MVVM

1.2、Vue双向数据绑定书写流程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message">{{message}}</div></body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue"}})
</script>
</html>

2、Vue的常用指令（v-xxx）

2.1、v-bind

使用v-bind绑定到了数据模型上的变量，这时，如果数据模型变量，那么v-bind的元素也会变

2,2、v-model

2.3、v-on

代码

2.4、v-if（符合条件才渲染）

结果

2.5、v-show（全部渲染）

2.6、v-for

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>
</html>

2.7、案例：通过Vue完成表格数据的渲染展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

3、Vue的生命周期

3.1、生命周期状态图

3.2、mounted示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>
</html>