vue学习第二天笔记

2019-01-09 本文已影响0人果木山

事件

基本事件：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>

vue事件解析

动态绑定样式

非行间样式 :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"
 }
```
- 可以简写为对象 :style="obj"
```
 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类型；

代码：

html代码：

 //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.js代码：

 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获取参数；

代码：

html代码：

 postData(){
     this.$http.post("/post",{
         name:"guomu",
         age:27
     }).then(res=>{
         data=JSON.stringify(res.body);
         this.msg=`这是post请求获取的数据：${data}`;
     },err=>{
         console.log(err);
     })
 }

app.js代码：

 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设置默认的回调函数名字；
- 代码：
  - html代码：
```
 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);
     })
 }
```

三个请求的验证实例

知识点：
1. 下载vue-resource插件，用于发送请求；
2. html文件中通过script引入js文件，若想让其在页面上被渲染，必须在服务器中设置静态资源目录，然后这些文件的引入相对于此目录引入；
3. 服务器端渲染html文件到页面上，使用res.sendFile(url,{root:url1});
  - 必须设置root，而url为相对于root的url1来进行相对路径查找；
4. body-parser需要设置中间件；
5. express中通过req.query来获取get请求的参数；配合body-parser通过req.body来获取post请求的数据；
6. 前端页面通过res.body来获取服务器响应的数据；

代码：

html代码：

 <!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>

app.js代码：

 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>

vue学习第二天笔记

事件

动态绑定样式

vue配合vue-resource插件发送请求

vue生命周期

简书链接

猜你喜欢

热点阅读