vue学习第二天笔记

事件

  • 基本事件：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"
 }
    • 可以简写为对象 :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>

简书链接

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342