随堂笔记
约 6429 字大约 21 分钟
随堂笔记
1.API查阅
【1】
【2】
【3】
2.es新语法(基础)
1.变量定义
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<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>Title</title>
</head>
<body>
</body>
<script>
//es5
// function test(bool) {
// if(bool){
// var a='Hello world!';
// }
// console.log("test方法内部执行,变量的值:"+a);//var定义的变量具有作用域问题,以后不使用了
// }
// //执行
// test(true);
</script>
<script>
//es6
function test2(bool) {
//成员变量声明
// var a;
if(bool){
//赋值
// var a='Hello world!';//变量泄露
let a='Hello world!';//变量私有,类似于java的private效果
}
//看不到let定义在代码块里面的变量
console.log("test2方法内部执行,变量的值:"+a);//报错:a is not defined let定义的变量没有作用域问题
}
//执行
test2(true);
</script>
</html>
2.定义常量
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<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>Title</title>
</head>
<body>
</body>
<script>
//定义常量
const username='Rose'
//会报错:常量不能更换引用
username='Jack';
console.log(username)
</script>
</html>
3.模板字符串:方便字符串的拼接
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<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>Title</title>
</head>
<body>
</body>
<script>
//es5
let username='Rose';
//es6前:变量需要拼接使用+
console.log('姓名是:'+username);//姓名是:Rose
//es6
//模板字符串:使用反引号(重音符``就是esc下面的键),可以直接打印变量的值,表达式类似于java的el表达式
console.log(`姓名是:${username}`);//TODO:${标识符} 只能使用在重音符中,表示获取值直接拼接字符串中
// console.log('姓名是:${username}');//TODO:${标识符} 不能使用在单引号 双引号中
</script>
</html>
4.函数参数默认值(了解)
在js中如果定义的函数有参数,调用的时候可以不传递实参,那么形参变量名就是undefined类型,为了解决这个问题,es6后引入函数参数默认值。如果调用函数的时候不传递实参,那么使用默认值。如果传递实参那么使用实参。
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<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>Title</title>
</head>
<body>
</body>
<script>
//ES6前
// function show(username){//undefined
// console.log(username);
// }
//ES6后:函数参数默认值 username='Jack' 表示给形参username的初始化值是Jack
//调用的时候不传递实参username的值就是Jack。传递实参username的值就是实参Rose
function show(username='Jack'){
console.log(username);
}
//传参后,使用传入的值
show('Rose');
//没有传参(undifined),自动使用默认值
// show();
</script>
</html>
5.箭头函数(很重要)
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不书写就会乱码 -->
<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>Title</title>
</head>
<body>
</body>
<script>
//es5
// let add=function(a,b){
// return a+b;//300
// }
// console.log(add(100,200));//300
//es6:箭头函数 : (参数名,参数名,...) => {函数体}
// var add2=(a,b)=>{
// return a+b;
// }
// console.log(add2(100,200));//300
//es6更简化写法
//如果函数只有一句话,可以省略大括号和return
// let add3=(a,b)=>a+b;
// console.log(add3(100,200));//300
let add4= a=>a+10;// let add4=(a)=>{return a+10;}
console.log(add4(100));//110
</script>
</html>
3.今日目标和应用
1.使用ajax完成和后台服务器数据交互
2.json:能够在使用ajax传输数据的时候,书写json数据
3.vue:简化原生js的操作
4.ajax介绍(理解)
1.可以完成前端和后台服务器的数据交互
2.好处:
1)网页局部更新
2)异步请求
5.ajax的异步操作axios(掌握)
1.axios入门案例
【1】导入前端素材到vscode中
【2】启动后端项目(先不用管,只需要如何启动即可)
在后端项目位置输入cmd,打开dos窗口
java -jar jar包的名
【3】书写前端代码(重点)
get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用axios发送异步请求</title>
</head>
<body>
<!-- 不能在文本中书写js代码-->
<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
//1.使用axios对象调用函数向后台服务器发送ajax异步请求
/*
整体: axios.get().then().catch().finally();
1)get()函数表示两后台服务器发送get请求,格式:
get(url?key=value&key=value...);===axios.get("/axiosDemo01Servlet?username=锁哥&password=1234")
2)then() 处理后台服务器响应的,格式:
then(function(接收响应数据的对象名){
处理响应的代码
});
then(function (resp){
console.log(resp);
})
后台响应数据:
resp={
data: 'axios实现ajax异步get请求,username=锁哥',
status: 200,
statusText: '',
headers: {…},
config: {…},
}
resp.data就可以获取 数据: axios实现ajax异步get请求,username=锁哥
3)catch() :处理异常
catch(function (error) {
console.log(error);
})
let person ={
username:"锁哥",
age:18
}
小结:
1.get函数:建立和服务器的连接,在参数中书写连接服务器的url和请求参数
2.then函数:书写处理响应数据的,在该函数的参数位置书写回调函数
3.catch函数:书写处理响应错误信息数据的,在该函数的参数位置书写回调函数
4.finally函数:无论响应成功还是失败都要执行的代码,在该函数的参数位置书写回调函数
*/
/*
说明:
1.http://localhost:8080/axiosDemo01Servlet 表示后台服务器地址
2.username=锁哥&password=1234:表示向后台携带的参数,和地址之间使用?分隔 锁哥和1234可以换
*/
//TODO:向后台发送ajax的get异步请求
axios.get("http://localhost:8080/axiosDemo01Servlet?username=柳岩&password=1234")
.then(resp=>{
//后台响应成功,在这里处理后台响应数据的
/*
resp对象的内容{data: 'axios实现ajax异步get请求,username=柳岩', status: 200, statusText: '', headers: {…}, config: {…}, …}
*/
console.log(resp);
//resp.data的数据:接收后端服务器响应的数据。===》axios实现ajax异步get请求,username=柳岩
console.log(resp.data);
})
.catch(error=>{
//后台出现异常在前端这里处理
console.log(error);
})
.finally(()=>{
//必须执行的代码 我是必须执行的
console.log("我是必须执行的");
});
</script>
</body>
</html>
post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用axios发送异步请求</title>
</head>
<body>
<!-- 不能再文本中书写js代码-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
//1.使用axios对象调用函数向后台服务器发送ajax异步请求
/*
整体: axios.post().then().catch().finally();
1)post()函数表示向后台服务器发送post请求,格式:
post(url,key=value&key=value...);===axios.post("/axiosDemo01Servlet","username=锁哥&password=1234")
2)then() 处理后台服务器响应的,格式:
then(function(接收响应数据的对象名){
处理响应的代码
});
其实在then函数中的回调函数我们可以使用es6的新语法,箭头函数:
(参数)=>{函数体}
格式:
then(resp=>{
函数体
});
*/
/*
说明:
1.http://localhost:8080/axiosDemo03Servlet 表示后台服务器地址
2.username=锁哥&password=1234:表示向后台携带的参数
*/
//使用es6的箭头函数简化上述回调函数的写法
axios.post("http://localhost:8080/axiosDemo03Servlet","username=锁哥&password=1234")
.then(resp=>{
//后台响应的数据是:axios实现ajax异步post请求,username=锁哥
console.log("后台响应的数据是:"+resp.data);
})
.catch(error=>{
console.log("后台出现异常了额,加班吧");
})
.finally(()=>{
//必须执行
console.log("必须执行");
});
</script>
</body>
</html>
小结:
axios发送异步的请求步骤:
【1】导入库
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
【2】书写异步请求代码
axios.get("后台服务器地址?参数名=参数值&参数名=参数值")
.then(resp=>{
//后台响应成功执行这里,接收后台的数据:resp.data
})
.catch(error=>{
//后台有异常
}).finally(()=>{
必须执行的
});
axios.post("后台服务器地址","参数名=参数值&参数名=参数值").then().catch().finally();
2.练习_异步校验用户名是否存在 课下完成
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="text" name="username" placeholder="请输入用户名" id="username">
<span id="usernameSpan"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"> <br>
<button>提交</button>
</form>
<!-- 导入axios类库 -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
/*
说明:
1.后台地址url:"http://localhost:8080/registerServlet"
2.后台需要根据key即参数名是username来获取前端提交的用户名数据
3.后台已经存在的用户名是:"岩岩"
*/
//1.给用户名输入框绑定离焦事件
document.getElementById("username").onblur=function(){
//2.获取用户名输入框输入的数据
//this 表示调用当前事件onblur的标签对象即document.getElementById("username")
let usernameValue = this.value;
//3.判断是否输入数据
//alert(usernameValue.trim());//trim() 去掉字符串usernameValue的值的前后空格
if(usernameValue.trim()){
//4.说明usernameValue去掉了前后空格依然有数据,那么就是真
//向后台发送请求
axios.get("http://localhost:8080/registerServlet?username="+usernameValue)
.then(resp=>{
//TODO:如果输入的注册用户名存在,后台响应的数据即resp.data是false,表示不能注册
//TODO:如果输入的注册用户名不存在,后台响应的数据即resp.data是true,表示能注册
//console.log(resp.data);
//5.判断是否可以注册
if(resp.data){
//说明可以做注册
//6.给用户名的span标签设置文本信息
//element.innerHTML 设置或返回元素的内容。
document.getElementById("usernameSpan").innerHTML="√恭喜,该用户名可以注册";
//7.使用js操作css样式,设置字体为绿色
document.getElementById("usernameSpan").style.color="green";
}else{
//不可以注册
//8.设置文本
document.getElementById("usernameSpan").innerHTML="sorry,亲,该用户名已经存在";
//9.设置字体颜色
document.getElementById("usernameSpan").style.color="red";
}
});
}
}
</script>
</body>
</html>
6.JSON(掌握)
1.JSON基础语法
[1] {} 大括号 表示对象
[2] [] 中括号 表示数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
json介绍
1.定义格式 1:{key:value,key:value,...}
2.定义格式 2:
[{key:value,key:value,...},{key:value,key:value,...},{key:value,key:value,...},...]
3.定义格式 3:
{key:value,key:[key:value,key1:value1,...],key:value,...}
*/
//1.{}
let person ={"username":"柳岩","age":18,"address":"湖南"};
//获取json对象中的value值:json对象名.name
console.log(person.username);//柳岩
console.log(person.age);//18
//2.[]
//创建json数组对象
let arr=[{"username":"柳岩","age":18,"address":"湖南"},{"username":"杨幂","age":18,"address":"北京"},
{"username":"李沁","age":20,"address":"北京"}];
//需求:获取20
//arr[2]获取的是json对象{"username":"李沁","age":20,"address":"北京"},2表示数组索引
//arr[2].age:通过json对象调用属性名获取值
//TODO:如果json是一个对象我们直接使用对象名.属性名获取值,如果json是一个数组需要遍历取出json对象在调用属性名获取值
console.log(arr[2].age);
</script>
</body>
</html>
2.ajax和json综合(课下完成,重要)
【1】启动后端服务器
【2】书写前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>ajax和json综合</h1>
<!--
获取好友列表
onclick="method01()" 给下面按钮标签绑定单击事件,单击按钮就会调用method01()函数
-->
<input type="button" value="响应数据是json字符串" onclick="method01()"> <br>
<hr>
<h3>好友列表</h3>
<!--存放查询好友的结果信息-->
<div id="messageDiv"></div>
<table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<!--<tr>
<td></td>
<td></td>
<td></td>
</tr>-->
</table>
</body>
<!--导入axios库-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
/*
需求:向后台发送请求,获取好友列表并显示到页面中
说明:后台的url地址: "http://localhost:8080/axiosJsonDemo01Servlet"
*/
function method01() {
//向后台发送请求
axios.get("http://localhost:8080/axiosJsonDemo01Servlet")
.then(resp=>{
//console.log(resp.data);
/*
obj= resp.data={flag: true, message: '查询好友列表成功',
valueData: [{age: 18, id: '001', name: '张三'},
{age: 19, id: '002', name: '李四'},
{age: 20, id: '003', name: '王五'}]}
*/
//1.定义变量接收后端响应的数据
let obj = resp.data;
//2.判断查询好友列表是否成功
if(obj.flag){
//说明查询好友列表成功
//3.将后台响应的成功信息放到<div id="messageDiv"></div>文本中
document.getElementById("messageDiv").innerHTML=obj.message;
//4.定义变量存储从后台响应的数组数据即好友信息
let content="";//一定给初始化值,否则undefined
//5.遍历数组valueData
for(let f of obj.valueData){//f表示数组中每个json对象即f={age: 18, id: '001', name: '张三'}
//6.取出每个json对象的数据放到content中
content=content+`<tr>
<td>${f.id}</td>
<td>${f.name}</td>
<td>${f.age}</td>
</tr>`;
}
//console.log(content);
//7.将content内容放到上述table标签文本中
//document.getElementById("myTable").innerHTML=document.getElementById("myTable").innerHTML+content;
document.getElementById("myTable").innerHTML+=content;
}
});
}
</script>
</html>
7.vue基础入门(掌握)
【1】入门代码实现1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门</title>
</head>
<body>
<!-- TODO:vue第一部分:视图 -->
<div id="app">
<!-- 在vue中有个插值表达式简称插值可以获取数据模型中的数据并显示到页面中 {{数据模型中的冒号左边的标识}}-->
<!-- 注意:插值必须放到vue的视图中才可以获取数据 -->
{{msg}}
</div>
</body>
<!-- 导入vue的核心库 -->
<script src="js/vue.js"></script>
<script>
// TODO:vue第二部分:脚本 js代码用来存放数据的
new Vue({
//1.作用的视图
//TODO:el是element元素的简写,通过视图即html标签的id属性值进行关联,这里的app是上述视图中div
//标签的id属性值
el:"#app",
//2.存放的数据
/*
数据模型:
1)data:{
name:value,
name:value
.......
}
*/
data:{
msg:"vue基础入门"
}
});
</script>
</html>
【2】入门2代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="app">
<!-- {{name}}插值 -->
<div>姓名:{{name}}</div>
<div>班级:{{classRoom}}</div>
<!-- <button onclick="hi()">打招呼</button> -->
<!-- 普通按钮,调用原生js中的update函数 -->
<button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 脚本 ve表示vue对象名
let ve = new Vue({
//作用的视图:
el:"#app",
//数据模型
//data:{}
data(){
return{
name:"张三",
classRoom:"黑马153"
}
},
//vue对象中定义函数
methods: {
show:function(){
//输出
console.log("show.....");
}
},
})
//在vue对象外部创建普通的js函数
function update(){
//console.log("update.....");
//调用vue中的show函数
ve.show();
}
</script>
</html>
小结:
vue格式:
1.视图
<div id="app">
</div>
2.脚本 js代码
new Vue({
//1.作用的视图
el:"#app",
//2.数据模型
data(){
return {
属性名:属性值,
属性名:属性值,
.......
}
},
//3.函数
methods:{
函数名:function(){
}
}
});
8.vue常见指令(掌握)
1.文本插值v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本插值</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<!-- TODO:插值不能解析html标签 -->
<div>{{msg}}</div>
<!-- TODO:使用文本插值指令v-html -->
<!--
文本插值指令v-html:通过data的key获取value显示标签的文本中.解析html标签
<div>
<h1>Hello Vue</h1>
</div>
-->
<div v-html="msg"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 脚本
new Vue({
el:"#div",
data(){
return{
msg:"<h1>Hello Vue</h1>"
}
}
});
</script>
</html>
2.绑定任意属性指令 v-bind:属性名
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定属性</title>
<style>
.my{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div">
<!--
插值表达式不能写在属性中
-->
<!-- 不是vue指令写法 -->
<!-- <a href="https://www.baidu.com">百度一下</a> -->
<a href="{{url}}">百度一下</a>
<br>
<!--
v-bind:为 HTML 标签绑定属性值
v-bind:href="url" :表示使用vue指令v-bind给a标签绑定href属性,属性值是下面数据模型中的key
<a v-bind:href="url">百度一下</a>完成效果:
<a href="https://www.baidu.com">百度一下</a>
-->
<a v-bind:href="url">百度一下</a>
<br>
<!--
v-bind 可以省略不写
-->
<a :href="url">百度一下</a>
<br>
<!--
也可以绑定其他属性
<div :class="cls">我是div</div>的效果是:
<div class="my">我是div</div>
-->
<div :class="cls">我是div</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
url:"https://www.baidu.com",
cls:"my"
}
});
</script>
</html>
3.条件渲染列表指令v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
</head>
<body>
<div id="div">
<!--
判断num的值,对3取余
余数为0显示div1
余数为1显示div2
余数为2显示div3
-->
<div v-if="num%3 == 0">div1</div>
<div v-else-if="num%3 == 1">div2</div>
<div v-else>div3</div>
<div v-show="flag">div4</div>
<!--
v-if v-show 他们俩虽然都是控制元素是否显示,但是底层的原理不一样
v-if 如果条件为false,页面中根本没有这个元素
v-show如果条件为false,页面中有这个元素只不过它的display属性值为none
-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
num:1,
flag:false
}
});
</script>
</html>
4.渲染列表v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
</head>
<body>
<div id="div">
<ul>
<!--
类似于增强for循环
1. element是遍历得到的每一个元素(变量名可以自定义)
有一个作用域,它的作用于在当前的这个循环中,取出element表示元素的值必须使用插值 {{element}}
2. names 是被遍历的数组或对象名
-->
<li v-for="element in names">
{{element}}
</li>
<!--
TODO:
1.student表示遍历的对象名
2.s表示student对象中的每个值
-->
<li v-for="s in student">
{{s}}
</li>
<!--
类似于普通for循环
TODO:
1.v-for="(x,i) in names" names表示容器名 x存放容器中的元素 i表示容器的索引,从0开始
-->
<li v-for="(x,i) in names">
元素:{{x}},索引值:{{i}}
</li>
<!--
v-for="(y,index) in student" student表示对象名 y表示对象中数据 index表示student对象的数据的索引值,将student对象的key作为索引
-->
<li v-for="(y,index) in student">
元素:{{y}},索引值:{{index}}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
names:["张三","李四","王五"],
student:{
name:"张三",
age:23
}
}
});
</script>
</html>
5.绑定事件的指令v-on:事件名或者@事件名
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件绑定</title>
</head>
<body>
<div id="div">
<div>{{name}}</div>
<!--
v-on:为 HTML 标签绑定事件
v-on:click="change()" :使用v-on指令给按钮标签绑定单击事件,只要单击按钮就会调用vue中change函数
-->
<!-- <button onclick="change()">单击_改变div的内容</button> -->
<button v-on:click="change()">单击_改变div的内容</button>
<!-- 这里可以不加小括号 -->
<button v-on:dblclick="change">双击_改变div的内容</button>
<!-- @click="change" 是 v-on:click="change()"简写 -->
<button @click="change">简写_改变div的内容</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
name:"黑马程序员"
},
methods:{
//vue的函数
// change:function(){
// }
change(){
//修改数据模型的name的值为传智播客
this.name = "传智播客"
}
}
});
</script>
</html>
6.表单绑定v-model(重点) 非常重要
【1】单向绑定:数据模型改变,视图改变。视图改变,数据模型不变。
【2】双向数据绑定:
1.数据模型改变,视图改变
2.视图改变,数据模型改变
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单绑定</title>
</head>
<body>
<div id="div">
<form autocomplete="off">
<!--
单向绑定
-->
姓名_单向绑定:<input type="text" name="username" v-bind:value="username">
<br>
<!--
双向绑定 使用的指令v-model="数据模型中的key"
-->
姓名_双向绑定:<input type="text" name="username" v-model="username">
<br>
年龄:<input type="number" name="age" v-model="age">
性别:<input type="text" name="gender" v-model="gender">
</form>
<hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:23,
gender:"男"
}
});
</script>
</html>
9.vue的异步操作练习(掌握)
1.准备环境
【1】将前端素材代码导入到vscode中
【2】启动后端
打开cmd然后在dos窗口进行如下操作:
2.练习一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步操作</title>
<script src="js/vue.js"></script>
<!--
引入axios核心js文件
-->
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
{{name}}
<!--全称写法 v-on:click="send()" 给下面的按钮标签绑定单击事件,单击按钮的时候调用send函数 -->
<button @click="send()">发起请求</button>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
name:"张三",
age:18
},
methods:{
send(){
//1.发送异步请求
/*
说明:
1.后台url的地址 "http://localhost:8080/axiosDemo01Servlet"
*/
axios.get("http://localhost:8080/axiosDemo01Servlet")
.then(resp=>{
console.log(resp.data);
});
}
}
});
</script>
</html>
3.练习2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步请求案例</title>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<!--
vue
1. 视图
2. 脚本
data改变,视图会随之改变
我们从服务器获取数据,只要修改data,视图就会改变
我们无需在js中直接操作视图了
-->
<div id="div">
<h1>登录页面</h1>
<!--
v-model="user.username" :使用双向数据表绑定。
双向绑定:数据模型改变,视图改变。视图改变,数据模型改变。
user: {
username:"锁哥",
password:"1234"
}
-->
<input type="text" name="username" placeholder="请输入用户名" v-model="user.username"> <br>
<input type="password" name="password" placeholder="请输入密码" v-model="user.password"><br>
<!-- 全称写法:v-on:click="send()" 调用函数send -->
<button @click="send()">登录</button>
<h1>主页: 显示好友列表</h1>
<ul>
<!-- 遍历数组 -->
<!--
list=[{age:18,id:"001",name:"张三"},{age:18,id:"002",name:"李四"},{age:18,id:"003",name:"王五"}]
第一次: element={age:18,id:"001",name:"张三"}
第2次: element={age:18,id:"002",name:"李四"}
...
-->
<li v-for="element in list">
{{element.id}},{{element.name}},{{element.age}}
</li>
</ul>
</div>
</body>
<script>
//脚本
new Vue({
el: "#div",
data: {
//TODO; 由于表单双向数据绑定的存在,当用户操作表单时,user就会有数据(json格式)
user: {},
list: []
},
methods: {
send: function () {
//1.当点击登录按钮,向后台发送请求获取好友列表,并将用户名和密码数据提交到后台
/*
说明:
1.向后台请求地址:http://localhost:8080/axiosDemo02Servlet
2.this.user就是json格式的数据:user = {"username":"锁哥","password":"1234"}
*/
axios.post("http://localhost:8080/axiosDemo02Servlet",this.user)
.then(resp=>{
console.log(resp.data);
//resp.data={flag: true, message: '查询好友成功', valueData: Array(3)}
//判断
let obj = resp.data;
if(obj.flag){
//说明查询好友列表成功,将后台响应的数组数据赋值给数据模型中的list
//list=[{age:18,id:"001",name:"张三"},{age:18,id:"002",name:"李四"},{age:18,id:"003",name:"王五"}]
this.list=obj.valueData;
}
});
}
}
});
</script>
</html>
今日反馈和作业
能够说出AJAX的作用
可以实现前后台数据的交互。
好处:
1.局部更新
2.异步交互
能够使用Axios发送异步请求
axios.get("后台服务器地址?参数名=参数值&参数名=参数值&..").then(resp=>{
resp.data===>接收后台数据
});
axios.post("后台服务器地址","参数名=参数值&参数名=参数值&..").then(resp=>{
resp.data===>接收后台数据
});
能够使用Vue常用指令:v-bind,v-model,v-if,v-on,v-for
v-bind : 给任意标签绑定任意属性 <标签名 v-bind:属性名="数据模型的key"... >简写 <标签名 :属性名="数据模型的key"... >
v-model:实现双向数据绑定。数据模型改变,视图改变。视图改变,数据模型改变。
<input v-model="数据模型的key"...
v-if:条件渲染,满足条件就显示文本
<标签名 v-if="判断条件"... >文本</标签名>
<标签名 v-else-if="判断条件"... >文本</标签名>
.....
<标签名 v-else>文本</标签名>
v-on:给标签绑定事件
<标签名 v-on:事件名="调用vue中的函数">文本</标签名> 事件名不需要加on
<标签名 @事件名="调用vue中的函数">文本</标签名> 事件名不需要加on
v-for:遍历对象和容器
<标签名 v-for="变量名 in 容器名或者对象名">{{变量名}}</标签名>
<标签名 v-for="(变量名,索引) in 容器名或者对象名">{{变量名}}</标签名>