事件
- 基本事件：v-on:click(报红，但不影响功能的使用) @click
- 阻止冒泡和阻止默认事件
- 阻止冒泡
- 原生：
e.stopPropagation?e.stopPropagation():e.cancelBubble=true
- vue：
@click.stop
- 阻止默认事件
- 原生：
e.preventDefault?e.preventDefault():e.returnValue=true;
- vue：
@click.prevent
- 事件
- 鼠标事件：@mouseenter @mouseleave
- 键盘事件：@keydown @keyup
- 使用指定的键：
- 可以使用按键别名：@keydown.enter @keydown.tab @keydown.up @keydown.down
- 可以使用键盘码keyCode来设置指定的键：@keydown.13
- 可以通过全局
config.keyCodes对象自定义按键修饰符别名：Vue.config.keyCodes.f1 = 112;即f1就代表键盘码为112的按键，此时引用@keydown.f1即可；
- 点击事件：
@click
- 当绑定click事件：
@click=handle，其中handle为变量函数名，此时点击事件触发，会默认向函数体内传入事件对象e;
- 当绑定click事件：`@click=handle('index')，其中index为传入的实参，但此时在函数体内设置两个形参，第二个形参获得不到事件对象e;
- 当绑定click事件，同时需要传入实参，并且还需获取事件对象，则此时需要设置
$event实参，则可在函数体内获取事件对象；代码：@click=handle('index',$event)
- 此方法使用于其他所有事件，不仅限于click事件；
- 代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>验证</title>
</head>
<body>
<div id="app">
<h1>验证事件中的事件对象</h1>
<p>{{msg}}</p>
<button @click="handleClick1">点击1</button>
<button @click="handleClick2('index')">点击2</button>
<button @click="handleClick3('index',$event)">点击3</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "验证事件中的事件对象"
},
methods: {
handleClick1(e) {
console.log(e);//此时获取事件对象e；默认会传入事件对象
},
handleClick2(i,e) {
console.log(i);//获取index实参
console.log(e);//获取undefined，不能获取事件对象实参
},
handleClick3(i,e) {
console.log(i);//获取index实参
console.log(e);//获取事件对象
}
}
})
</script>
</html>
动态绑定样式
- 非行间样式 :class
- :class={样式类名:boolean} boolean可以从data数据中拿到；
- :class="obj"
//obj中通过boolean控制让哪个样式显示，不让哪个样式显示；
data:{
obj:{
bg1:true,
color:true
}
}
- 以数组的形式，数组中的每一项，都相当于变量，变量中存真正的非行间样式，即类名；
//html
<h1 :class="[bgc,col]">这是动态绑定的测试文本</h1>
//js
data:{
bgc:"bg1",
col:"color"
}
- 行间样式 :style
-
:style="{color:bluecol,fontSize:size+'px'}:指的是动态绑定行内样式；
data:{
bluecol:"blue",
size:"30"
}
data:{
obj:{
color:"red",
fontSize:54+"px"
}
}
vue配合vue-resource插件发送请求
- 下载vue-resource插件
- 命令：
npm i --save-dev vue-resource
- 引入js文件：vue-resource.js;
- 注意：vue-resource.js是依赖vue.js的，所以，必须先引入vue.js；
- get请求
- get请求：通过点击事件触发函数，函数内通过
this.$http.get(url).then(res=>{console.log(res.body)},err=>{console.log(err)})发送请求;
- 注意：
- get请求的参数，通过问号拼接在url后面，在服务器端通过req.query获取；
- 前端页面接收服务器响应的数据，通过res.body来获取，获取的默认为object类型；
- 代码：
//1.get请求：传参时，在地址后面用问号连接参数键值对；
getData(){
this.$http.get("/get?name=guo&age=26").then(res=>{
//通过JSON.stringify()来将json格式的对象，转化为字符串;
data=JSON.stringify(res.body);
this.msg=`这是get请求获取的数据：${data}`;
},err=>{
console.log(err);
})
}
app.get("/get",(req,res)=>{
data=req.query;//获取的是一个对象;
res.send(data);
});
- post请求
- post请求：通过点击事件触发函数，通过
this.$http.post(url,obj).then(res=>{console.log(res.body)},err=>{console.log(err)})发送请求；
- 注意：
- post请求的参数，通过在url后添加对象，对象中添加参数；
- 前端通过res.body获取数据；
- 服务器端可以通过body-parser或formidable获取参数，其中body-parser接收小数据，formidable接收大数据；
- body-parser需要设置中间件；服务器端通过req.body获取参数；
- 代码：
postData(){
this.$http.post("/post",{
name:"guomu",
age:27
}).then(res=>{
data=JSON.stringify(res.body);
this.msg=`这是post请求获取的数据：${data}`;
},err=>{
console.log(err);
})
}
const bodyParser=require("body-parser");
//body-parser的中间件设置
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//post请求：引入body-parser模块后，通过req.body来接收前端传来的参数；
app.post("/post",(req,res)=>{
data=req.body;//获取的是一个对象；
res.send(data);
});
- jsonp请求
- jsonp请求：跨域获取数据，需要设置其他域名下服务器
- 代码：
this.$http.jsonp(url,obj).then(res=>{console.log(res.body)},err=>{console.log(err)});
- 注意：
- 百度服务器中查找的数据
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=zhouxingchi&cb=xhfd
- url：指的是其他域名下的服务器地址；
- obj：指的是设置的参数，其中params设置的是参数数据，即问号后面的键值对；jsonp设置默认的回调函数名字；
- 代码：
jsonpData(){
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params:{
wd:"zhouxingchi"
},
jsonp:"cb"
}).then(res=>{
data=JSON.stringify(res.body);
this.msg=`这是jsonp请求获取的数据：${data}`;
},err=>{
console.log(err);
})
}
- 三个请求的验证实例
- 知识点：
- 下载vue-resource插件，用于发送请求；
- html文件中通过script引入js文件，若想让其在页面上被渲染，必须在服务器中设置静态资源目录，然后这些文件的引入相对于此目录引入；
- 服务器端渲染html文件到页面上，使用
res.sendFile(url,{root:url1});
- 必须设置root，而url为相对于root的url1来进行相对路径查找；
- body-parser需要设置中间件；
- express中通过req.query来获取get请求的参数；配合body-parser通过req.body来获取post请求的数据；
- 前端页面通过res.body来获取服务器响应的数据；
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种请求</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<button type="button" @click="getData">get请求</button>
<button type="button" @click="postData">post请求</button>
<button type="button" @click="jsonpData">jsonp请求</button>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"这是原始文档"
},
methods:{
//1.get请求：传参时，在地址后面用问号连接参数键值对；
getData(){
this.$http.get("/get?name=guo&age=26").then(res=>{
//通过JSON.stringify()来将json格式的对象，转化为字符串;
data=JSON.stringify(res.body);
this.msg=`这是get请求获取的数据：${data}`;
})
},
//2.post请求：传参时，在url后面，添加对象，作为参数传给后台；
postData(){
this.$http.post("/post",{
name:"guomu",
age:27
}).then(res=>{
data=JSON.stringify(res.body);
this.msg=`这是post请求获取的数据：${data}`;
})
},
//3.jsonp请求：跨域获取数据
jsonpData(){
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params:{
wd:"zhouxingchi"
},
jsonp:"cb"
}).then(res=>{
data=JSON.stringify(res.body);
this.msg=`这是jsonp请求获取的数据：${data}`;
})
}
}
})
</script>
</body>
</html>
const express=require("express");
const bodyParser=require("body-parser");
const app=express();
//body-parser的中间件设置
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//设置静态资源目录，引入js文件
app.use(express.static("./"));
//发送请求，渲染html页面；
app.get("/",(req,res)=>{
//通过sendFile来渲染html页面
res.sendFile("05三种请求.html",{root:"./"});
});
//get请求，发送数据，通过req.query来获取get请求传来的参数；
app.get("/get",(req,res)=>{
data=req.query;//获取的是一个对象;
res.send(data);
});
//post请求：引入body-parser模块后，通过req.body来接收前端传来的参数；
app.post("/post",(req,res)=>{
data=req.body;//获取的是一个对象；
res.send(data);
});
//监听端口号
app.listen(8080);
vue生命周期
- vue2.0的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<button type="button" @click="gengxin">更新数据</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"梦想的路上，加油"
},
methods:{
gengxin(){
this.msg="果木山";
}
},
beforeCreate(){
alert("创建前");
},
created(){
alert("创建后");
},
beforeMount(){
alert("挂载前")
},
mounted(){
alert("挂载后")
},
beforeUpdate(){
alert("更新前")
},
updated(){
alert("更新后")
},
beforeDestroy(){
alert("销毁前")
},
destroyed(){
alert("销毁后")
}
});
vm.$mount("#app");//手动挂载绑定范围；效果和在对象中写 el:'#app'一样；二者设置其一即可；
vm.$destroy();//销毁实例，触发beforeDestroy和destroyed函数，一般不使用；
</script>
</body>
</html>
简书链接
网友评论