vue學(xué)習(xí)第二天筆記

事件

  • 基本事件：v-on:click(報(bào)紅，但不影響功能的使用) @click
  • 阻止冒泡和阻止默認(rèn)事件
    • 阻止冒泡
      • 原生：e.stopPropagation?e.stopPropagation():e.cancelBubble=true
      • vue：@click.stop
    • 阻止默認(rèn)事件
      • 原生：e.preventDefault?e.preventDefault():e.returnValue=true;
      • vue：@click.prevent
  • 事件
    • 鼠標(biāo)事件：@mouseenter @mouseleave
    • 鍵盤(pán)事件：@keydown @keyup
    • 使用指定的鍵：
      • 可以使用按鍵別名：@keydown.enter @keydown.tab @keydown.up @keydown.down
      • 可以使用鍵盤(pán)碼keyCode來(lái)設(shè)置指定的鍵：@keydown.13
      • 可以通過(guò)全局config.keyCodes對(duì)象自定義按鍵修飾符別名：Vue.config.keyCodes.f1 = 112;即f1就代表鍵盤(pán)碼為112的按鍵，此時(shí)引用@keydown.f1即可；
    • 點(diǎn)擊事件：@click
      • 當(dāng)綁定click事件：@click=handle，其中handle為變量函數(shù)名，此時(shí)點(diǎn)擊事件觸發(fā)，會(huì)默認(rèn)向函數(shù)體內(nèi)傳入事件對(duì)象e;
      • 當(dāng)綁定click事件：`@click=handle('index')，其中index為傳入的實(shí)參，但此時(shí)在函數(shù)體內(nèi)設(shè)置兩個(gè)形參，第二個(gè)形參獲得不到事件對(duì)象e;
      • 當(dāng)綁定click事件，同時(shí)需要傳入實(shí)參，并且還需獲取事件對(duì)象，則此時(shí)需要設(shè)置$event實(shí)參，則可在函數(shù)體內(nèi)獲取事件對(duì)象；代碼：@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>驗(yàn)證</title>
</head>
<body>
<div id="app">
    <h1>驗(yàn)證事件中的事件對(duì)象</h1>
    <p>{{msg}}</p>
    <button @click="handleClick1">點(diǎn)擊1</button>
    <button @click="handleClick2('index')">點(diǎn)擊2</button>
    <button @click="handleClick3('index',$event)">點(diǎn)擊3</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "驗(yàn)證事件中的事件對(duì)象"
        },
        methods: {
            handleClick1(e) {
                console.log(e);//此時(shí)獲取事件對(duì)象e；默認(rèn)會(huì)傳入事件對(duì)象
            },
            handleClick2(i,e) {
                console.log(i);//獲取index實(shí)參
                console.log(e);//獲取undefined，不能獲取事件對(duì)象實(shí)參
            },
            handleClick3(i,e) {
                console.log(i);//獲取index實(shí)參
                console.log(e);//獲取事件對(duì)象
            }
        }
    })
</script>
</html>

動(dòng)態(tài)綁定樣式

  • 非行間樣式 :class
    • :class={樣式類名:boolean} boolean可以從data數(shù)據(jù)中拿到；
    • :class="obj"
     //obj中通過(guò)boolean控制讓哪個(gè)樣式顯示，不讓哪個(gè)樣式顯示；
 data:{
     obj:{
         bg1:true,
         color:true
     }
 }
    • 以數(shù)組的形式，數(shù)組中的每一項(xiàng)，都相當(dāng)于變量，變量中存真正的非行間樣式，即類名；
     //html
 <h1 :class="[bgc,col]">這是動(dòng)態(tài)綁定的測(cè)試文本</h1>
 //js
 data:{
     bgc:"bg1",
     col:"color"
 }
  • 行間樣式 :style
    • :style="{color:bluecol,fontSize:size+'px'}:指的是動(dòng)態(tài)綁定行內(nèi)樣式；
     data:{
     bluecol:"blue",
     size:"30"
 }
    • 可以簡(jiǎn)寫(xiě)為對(duì)象 :style="obj" 
     data:{
     obj:{
         color:"red",
         fontSize:54+"px"
     }
 }

vue配合vue-resource插件發(fā)送請(qǐng)求

  • 下載vue-resource插件
    • 命令：npm i --save-dev vue-resource
    • 引入js文件：vue-resource.js;
    • 注意：vue-resource.js是依賴vue.js的，所以，必須先引入vue.js；
  • get請(qǐng)求
    • get請(qǐng)求：通過(guò)點(diǎn)擊事件觸發(fā)函數(shù)，函數(shù)內(nèi)通過(guò)this.$http.get(url).then(res=>{console.log(res.body)},err=>{console.log(err)})發(fā)送請(qǐng)求;
    • 注意：
      • get請(qǐng)求的參數(shù)，通過(guò)問(wèn)號(hào)拼接在url后面，在服務(wù)器端通過(guò)req.query獲?。?/li>
      • 前端頁(yè)面接收服務(wù)器響應(yīng)的數(shù)據(jù)，通過(guò)res.body來(lái)獲取，獲取的默認(rèn)為object類型；
    • 代碼：
      • html代碼：
       //1.get請(qǐng)求：傳參時(shí)，在地址后面用問(wèn)號(hào)連接參數(shù)鍵值對(duì)；
 getData(){
     this.$http.get("/get?name=guo&age=26").then(res=>{
         //通過(guò)JSON.stringify()來(lái)將json格式的對(duì)象，轉(zhuǎn)化為字符串;
         data=JSON.stringify(res.body);
         this.msg=`這是get請(qǐng)求獲取的數(shù)據(jù)：${data}`;
     },err=>{
         console.log(err);
     })
 }
      • app.js代碼：
       app.get("/get",(req,res)=>{
     data=req.query;//獲取的是一個(gè)對(duì)象;
     res.send(data);
 });
  • post請(qǐng)求
    • post請(qǐng)求：通過(guò)點(diǎn)擊事件觸發(fā)函數(shù)，通過(guò)this.$http.post(url,obj).then(res=>{console.log(res.body)},err=>{console.log(err)})發(fā)送請(qǐng)求；
    • 注意：
      • post請(qǐng)求的參數(shù)，通過(guò)在url后添加對(duì)象，對(duì)象中添加參數(shù)；
      • 前端通過(guò)res.body獲取數(shù)據(jù)；
      • 服務(wù)器端可以通過(guò)body-parser或formidable獲取參數(shù)，其中body-parser接收小數(shù)據(jù)，formidable接收大數(shù)據(jù)；
      • body-parser需要設(shè)置中間件；服務(wù)器端通過(guò)req.body獲取參數(shù)；
    • 代碼：
      • html代碼：
       postData(){
     this.$http.post("/post",{
         name:"guomu",
         age:27
     }).then(res=>{
         data=JSON.stringify(res.body);
         this.msg=`這是post請(qǐng)求獲取的數(shù)據(jù)：${data}`;
     },err=>{
         console.log(err);
     })
 }
      • app.js代碼：
       const bodyParser=require("body-parser");
 //body-parser的中間件設(shè)置
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 //post請(qǐng)求：引入body-parser模塊后，通過(guò)req.body來(lái)接收前端傳來(lái)的參數(shù)；
 app.post("/post",(req,res)=>{
     data=req.body;//獲取的是一個(gè)對(duì)象；
     res.send(data);
 });
  • jsonp請(qǐng)求
    • jsonp請(qǐng)求：跨域獲取數(shù)據(jù)，需要設(shè)置其他域名下服務(wù)器
    • 代碼：this.$http.jsonp(url,obj).then(res=>{console.log(res.body)},err=>{console.log(err)});
    • 注意：
      • 百度服務(wù)器中查找的數(shù)據(jù)https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=zhouxingchi&cb=xhfd
      • url：指的是其他域名下的服務(wù)器地址；
      • obj：指的是設(shè)置的參數(shù)，其中params設(shè)置的是參數(shù)數(shù)據(jù)，即問(wèn)號(hào)后面的鍵值對(duì)；jsonp設(shè)置默認(rèn)的回調(diào)函數(shù)名字；
    • 代碼：
      • 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請(qǐng)求獲取的數(shù)據(jù)：${data}`;
     },err=>{
         console.log(err);
     })
 }
  • 三個(gè)請(qǐng)求的驗(yàn)證實(shí)例
    • 知識(shí)點(diǎn)：
      1. 下載vue-resource插件，用于發(fā)送請(qǐng)求；
      2. html文件中通過(guò)script引入js文件，若想讓其在頁(yè)面上被渲染，必須在服務(wù)器中設(shè)置靜態(tài)資源目錄，然后這些文件的引入相對(duì)于此目錄引入；
      3. 服務(wù)器端渲染html文件到頁(yè)面上，使用res.sendFile(url,{root:url1});
        • 必須設(shè)置root，而url為相對(duì)于root的url1來(lái)進(jìn)行相對(duì)路徑查找；
      4. body-parser需要設(shè)置中間件；
      5. express中通過(guò)req.query來(lái)獲取get請(qǐng)求的參數(shù)；配合body-parser通過(guò)req.body來(lái)獲取post請(qǐng)求的數(shù)據(jù)；
      6. 前端頁(yè)面通過(guò)res.body來(lái)獲取服務(wù)器響應(yīng)的數(shù)據(jù)；
    • 代碼：
      • html代碼：
       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>三種請(qǐng)求</title>
 </head>
 <body>
 <div id="app">
     <h1>{{msg}}</h1>
     <button type="button" @click="getData">get請(qǐng)求</button>
     <button type="button" @click="postData">post請(qǐng)求</button>
     <button type="button" @click="jsonpData">jsonp請(qǐng)求</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請(qǐng)求：傳參時(shí)，在地址后面用問(wèn)號(hào)連接參數(shù)鍵值對(duì)；
             getData(){
                 this.$http.get("/get?name=guo&age=26").then(res=>{
                     //通過(guò)JSON.stringify()來(lái)將json格式的對(duì)象，轉(zhuǎn)化為字符串;
                     data=JSON.stringify(res.body);
                     this.msg=`這是get請(qǐng)求獲取的數(shù)據(jù)：${data}`;
                 })
             },
             //2.post請(qǐng)求：傳參時(shí)，在url后面，添加對(duì)象，作為參數(shù)傳給后臺(tái)；
             postData(){
                 this.$http.post("/post",{
                     name:"guomu",
                     age:27
                 }).then(res=>{
                     data=JSON.stringify(res.body);
                     this.msg=`這是post請(qǐng)求獲取的數(shù)據(jù)：${data}`;
                 })
             },
             //3.jsonp請(qǐng)求：跨域獲取數(shù)據(jù)
             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請(qǐng)求獲取的數(shù)據(jù)：${data}`;
                 })
             }
         }
     })
 </script>
 </body>
 </html>
      • app.js代碼：
       const express=require("express");
 const bodyParser=require("body-parser");
 const app=express();
 
 //body-parser的中間件設(shè)置
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 //設(shè)置靜態(tài)資源目錄，引入js文件
 app.use(express.static("./"));
 
 //發(fā)送請(qǐng)求，渲染html頁(yè)面；
 app.get("/",(req,res)=>{
     //通過(guò)sendFile來(lái)渲染html頁(yè)面
     res.sendFile("05三種請(qǐng)求.html",{root:"./"});
 });
 //get請(qǐng)求，發(fā)送數(shù)據(jù)，通過(guò)req.query來(lái)獲取get請(qǐng)求傳來(lái)的參數(shù)；
 app.get("/get",(req,res)=>{
     data=req.query;//獲取的是一個(gè)對(duì)象;
     res.send(data);
 });
 //post請(qǐng)求：引入body-parser模塊后，通過(guò)req.body來(lái)接收前端傳來(lái)的參數(shù)；
 app.post("/post",(req,res)=>{
     data=req.body;//獲取的是一個(gè)對(duì)象；
     res.send(data);
 });
 //監(jiān)聽(tīng)端口號(hào)
 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">更新數(shù)據(jù)</button>
 </div>
 <script src="js/vue.js"></script>
 <script>
     var vm=new Vue({
         el:"#app",
         data:{
             msg:"夢(mèng)想的路上，加油"
         },
         methods:{
             gengxin(){
                 this.msg="果木山";
             }
         },
         beforeCreate(){
             alert("創(chuàng)建前");
         },
         created(){
             alert("創(chuàng)建后");
         },
         beforeMount(){
             alert("掛載前")
         },
         mounted(){
             alert("掛載后")
         },
         beforeUpdate(){
             alert("更新前")
         },
         updated(){
             alert("更新后")
         },
         beforeDestroy(){
             alert("銷毀前")
         },
         destroyed(){
             alert("銷毀后")
         }
     });
     vm.$mount("#app");//手動(dòng)掛載綁定范圍；效果和在對(duì)象中寫(xiě) el:'#app'一樣；二者設(shè)置其一即可；
     vm.$destroy();//銷毀實(shí)例，觸發(fā)beforeDestroy和destroyed函數(shù)，一般不使用；
 </script>
 </body>
 </html>

簡(jiǎn)書(shū)鏈接

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容