1.绑定事件
<!DOCTYPE html>
<html>
<head>
<!-- 绑定事件 -->
<meta charset="utf-8">
<title></title>
<!-- 第一步,引入vue.js -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="test1()">按一按直接起飞</button>
<hr />
<button type="button" @click="test2()" >芜湖起飞</button>
</div>
<script type="text/javascript">
//3.创建vue对象
new Vue({
"el":"#app",
"methods":{
//4.方式一绑定:
test1:function(){
console.log(1111);
alert("起飞");
},
//5.方式二绑定
test2(){
console.log(2222);
},
},
});
</script>
</body>
</html>
2.循环for指令: v-for
语法: v-for = "每个元素 in 数组名称"
java中的高效for循环的语法: for(类型 每个元素: 数组(集合)){ }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 第一步,引入vue.js -->
<script src="../vue/vue.js"></script>
</head>
<body>
<!-- 2.指定作用范围 -->
<div id="app">
<ul>
<li v-for="ele in names">{{ele}}</li>
</ul>
</div>
<!-- 创建vue对象 -->
<script type="text/javascript">
new Vue({
"el":"#app",
"data":{
"names":["小猫","等等","好好学","共同进步"],
},
})
</script>
</body>
</html>3.双向绑定指令:v-model(难点,需要重点理解下)
vue中data的数据 ----> html网页中输入框的值
vue中data的数据 <---- html网页中输入框的值
注意:通常作用于form表单
案例:简单模仿电商网站,动态实现商品购买的加减
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模仿订单加减</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="a">
<!-- 方式1: -->
<!-- <button v-on:click="count++">+</button>
<input type="text" name="count" v-model="count" />
<button v-on:click="count--">-</button> -->
<!-- 方式2: -->
<button @click="multiProduct()">+</button>
<input type="number" name="count" v-model="count" />
<button @click="subProduct()">-</button>
</div>
<!-- 案例:
模仿电商网站,动态实现购买商品个数的加减
分析思路:
1.使用双向绑定指令:v-model
2.给+号按钮添加点击事件:+1
3.给-号按钮添加单击事件:-1-->
<script type="text/javascript">
new Vue({
"el":"#a",
"data":{
"count":1,
},
"methods":{
//this表示vue对象
//获取data选项中的数据
//方式一:this.$data.count(可理解为链式加载点)
//方式二:this.count
//1.增加购买数量
multiProduct(){
this.count = parseInt(this.count)+1;
if(this.count>10){
this.count=10
}
},
//2.减少购买数量
subProduct(){
this.count--;
if(this.count<1){
this.count=1
}
}
}
});
</script>
</body>
</html>4.Vue的生命周期方法(了解流程即可)
1.自动执行的方法
beforeCreate( ), created( ), beforeMounte( ), mounted( )
-
当data中的数据发生改变时,执行的数据
beforeUpdate( ), updated( );
-
当vue对象销毁时,执行的方法
beforeDestory( ) destoryed( )
特点:
1.生命周期函数会自动执行
2.应用场景:想要自动执行我们的方法,我们就把定义的方法放到生命周期函数
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue/vue.js" ></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
//访问网页时:访问到网页,就需要看到网页中的数据
//自定义的查询数据方法,需要自动执行
//实际运用:访问电商网站时,首页分类数据需要立即展示
//自定义查询分类数据的方法让自动执行
new Vue({
"el":"#app",
"methods":{
//1.查询分类数据的方法
finCategory(){
alert("查询分类方法");
}
},
mounted:function(){
//利用生命周期函数自动执行的特点:调用分类方法
//实现效果,自动弹出
this.finCategory();
},
});
</script>
</body>
</html>
5.异步
1.同步的特点:
指的我们在向后台提交数据时,提交整个网页. client客户端(浏览器)----->server后台(java程序) 前台提交数据到后台? client----提交数据–>server 后台响应数据到前台? client<----响应数据–server 同步缺点: 当后台响应慢,用户看到的"留白" 同步优点: 向后台提交的 次数少(因为需要等后台响应完以后), 后台的访问压力比较轻
2.异步特点:
指的我们在后台提交数据时,提交网页的一部分. client客户端(浏览器)----->server后台(java程序) 异步优点: 当后台响应慢,用户依然可以看到网页,不会有"留白" 异步缺点: 向后台提交数据的次数(异步提交的是网页一部分,不需要等后台响应) 后台访问压力大.
实际生活运用:例如在请求登录界面时的验证码
3.原始的异步请求:
分为四步,非常麻烦,在实际开发中不使用
4.使用异步框架的优点:
*原始使用异步请求代码实现分为四步开发麻烦
*原始的异步请求代码封装成异步请求框架:axios.js
简单入门案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios.js入門</title>
<!-- 1.引入vue.js和axios.js -->
<script src="../vue/axios-0.18.0.js" ></script>
<script src="../vue/vue.js" ></script>
</head>
<body>
<div id="app">
<!-- 定义一个buttno标签,点击事件发送异步请求 -->
<button @click="test1()">点击发送异步请求</button>
<button @click="test2()">点击发送post异步请求</button>
</div>
<!-- 創vue對象,在methods定義異步請求方法
步驟一:在HTML引入axios.js-->
<script type="text/javascript">
new Vue({
"el":"#app",
"data":{
"msg":"hello",
},
"methods":{
//1.定義異步請求方法
test1(){
//2.发送异步请求:get
//get方法:指定后台发送的请求地址:,参数是一个字符串
//then方法:接收后台响应的数据,参数是一个函数
//catch方法:处理前台和后台代码的异常,参数是一个函数
//细节:axios名称,get名称,then名称,catch名称都是固定的
//定义一个json文件:模拟后台地址
//get方法的参数:json文件的地址
var url = "server.json";
axios.get(url).then(
function(resp){
//用来接收后台响应的数据
var user = resp.data;
//测试数据
console.log(user.id+":"+user.name);
}
).catch();
},
//定义异步请求方法test2
test2(){
//当代码出现问题时,执行catch方法
axios.post("server.json").then(function(resp){
//响应对象接收后台的数据:data属性是固定的
var u = resp.data;
//测试数据
console.log(u.id);
}).catch(
function(){
window.alert("代码出问题了!!!!");
});
},
},
});
</script>
</body>
</html>axios.js怎么使用?
axios.js异步请求框架(掌握,代码必须会敲) 步骤一: 在html引入axios.js,也需要引入vue.js 步骤二: 在html网页里面指定vue的作用范围 步骤三: 在script标签里面创建vue对象 步骤四: 在methods选项里面,定义异步请求方法 注意: axios异步请求框架中,使用response(resp)来接收后台响应的数据 前台(response来接收后台响应的数据)<---------后台
get的异步请求:
axios.get(url).then(function(resp){ }).catch(function( ) )
post的异步请求:
axios.get(url).then(function(resp){ }).catch(function( ) )
区别:
1.get的请求的请求数据都在地址栏,请求的数据大小是有限的
比如:IE8浏览器,get请求提交数据,最大提交200KB
实际开发中:提交的数据比较少,使用get
2.post的请求的请求数据不在地址栏,请求的数据大小是无限的
实际开发中:提交的数据比较大,使用post,比如:提供一个视频到后台
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
