快速入門Vue

🎃 多種選擇器
- 🎈class選擇器
- 🎈標簽選擇器
🧡 data資料物件
💛 Vue 指令
- ?設定標簽的文本值（textContent）
- ?設定標簽的innerHtml（v-html）
- ?為元素系結事件（v-on）
- ?根據運算式的真偽，切換元素的顯示和隱藏（v-show）
- ?根據運算式的真偽，切換元素的顯示和隱藏(操縱dom元素) （v-if）
- ?設定元素的屬性（v-bind）
- ?根據資料生成串列結構（v-for）
- ? 傳遞自定義引數，事件修飾符 (v-on補充)
- ?獲取和設定表單元素的值（雙向資料系結v-model）
💗 Vue結合網路資料開發應用
- 🐾axios結合Vue

使用工具 vs code
建議使用插件 Live Server Preview（方便快速查看代碼效果）

打開官網，我們可以看到如下兩種環境
在這里插入圖片描述
🎈 因為我們是初學者，我們可以直接最好使用開發環境，這會給我們更好的代碼提示，讓我們更快入門，

根據官網的介紹，我們先入進行入門練習

先匯入開發環境

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!--先在body里面創建一個div-->
<div id="app">
  {{ message }}
</div>

在js里面寫如下的代碼

注意：Vue的首字母大寫

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

全域來看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{message}}
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        {{message}}
    </div>

<script>
    var app=new Vue({
        el:"body",
        data:{
            message:"Hello Vue!"
        }
    })
  
</script>
    
</body>
</html>

運行結果

Hello Vue!

入門總結：

匯入開發版本的Vue.js
創建Vue實列物件，設定el屬性和data屬性
使用簡潔的模板語法把資料渲染到頁面

🎃 多種選擇器

🎈class選擇器

<!--先在body里面創建一個div-->
<div id="app" class="app">
  {{ message }}
</div>

var app = new Vue({
  el: '.app',
  data: {
    message: 'Hello Vue!'
  }
})

運行結果

Hello Vue!

🎈標簽選擇器

只用更改這里

var app = new Vue({
  el: 'div',
  data: {
    message: 'Hello Vue!'
  }
})

運行結果

Hello Vue!

🧡 data資料物件

<body>
    {{message}}
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" class="app">
        {{message}}
        <span>{{school}}</span>
        <h3>{{school.name}}</h3>
        <h3>{{school.mobile}}</h3>
        <h3>{{like}}</h3>
        <h2>{{like[0]}}</h2>
          <h2>{{like[1]}}</h2>
    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好，xxx",
            school:{
                name:"xxx學院",
                mobile:"13143xxxxxx"
            },
                like:["csgo","LOL"]
            },
        
    })
</script>
    
</body>

結果演示

{{message}}
你好，xxx { "name": "xxx學院", "mobile": "13143xxxxxx" }
xxx學院
13143xxxxxx
[ "csgo", "LOL" ]
csgo
LOL

data：資料物件總結

Vue中用到的資料定義在data中
data可以寫復雜型別的資料
渲染復雜型別資料時，遵守js語法即可

💛 Vue 指令

?設定標簽的文本值（textContent）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <h2 v-text="message">
        入門Vue如此簡單    
        </h2>
        <h2>入門Vue如此簡單{{message}}</h2>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"生命不息，學習不止",  
            },
        
    })
</script>
    
</body>

結果演示

生命不息，學習不止
入門Vue如此簡單 生命不息，學習不止

我們可以看到當我們直接使用v-text時，我們的內容會全部被替換，于是我們使用插入法入門{{message}}來防止全部替換

當然我們也可以進行字串拼接

```html
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <h2 v-text="message+'!'">
        爪哇貢塵拾Miraitow  
        </h2>
        <h2>爪哇貢塵拾Miraitow{{info+' 加油'}}</h2>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"生命不息，學習不止",  
            info:"后端路漫漫,什么都要學"
            },
        
    })
</script>
    
</body>

結果演示

生命不息，學習不止!
爪哇貢塵拾Miraitow 后端路漫漫,什么都要學 加油

?設定標簽的innerHtml（v-html）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <p v-html="content"></p>
        <p v-text="content"></p>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            content:"爪哇貢塵拾Miraitow"

            },
        
    })
</script>
    
</body>

結果演示

爪哇貢塵拾Miraitow

爪哇貢塵拾Miraitow

可以看出來沒有什么區別，然后我們做一下修改

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <p v-html="content"></p>
        <p v-text="content"></p>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
           // content:"爪哇貢塵拾Miraitow",
            content:"<a href='http://www.baidu.com'>爪哇貢塵拾Miraitow</a>"

            },
        
    })
</script>
    
</body>

結果演示

在這里插入圖片描述
這樣我們可以看到這兩個的區別了,上面的可以識別標簽，我們點擊第一個就可以跳轉了

?為元素系結事件（v-on）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
<input type="button" value="v-on指令" v-on:click="doIt"></input>

    </div> 
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            doIt:function(){
                alert("好好學習，天天向上");
            }
        }
    })
</script>
    
</body>

結果演示

在這里插入圖片描述
點擊事件，當我們點擊這個button按鈕后就會出現彈窗顯示

為了減少代碼量還有一種簡寫的方式

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
<input type="button" value="v-on指令" v-on:click="doIt"></input>
<input type="button" value="v-on簡寫" @click="doIt"></input>

    </div> 
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            doIt:function(){
                alert("爪哇貢塵拾Miraitow");
            }
        }
    })
</script>
    
</body>

結果演示
在這里插入圖片描述
可以看出來，效果是一樣的

接下來看一下雙擊事件

我們在之前的代碼里面加入這一句，其他不變

<input type="button" value="雙擊事件" @dblclick="doIt"></input>

結果演示
在這里插入圖片描述
如果你還知道別的事件可以去試試

我們接下來看一下如何修改資料

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
    //設定一個彈擊事件
<h2 @click="changeFood">{{food}}</h2>

    </div> 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            food:"青椒肉絲"

        },
        methods:{
            changeFood:function(){
                console.log(this.food);
            }
        }
    })
</script>
    
</body>

結果演示

青椒肉絲

當我們點擊青椒肉絲時我們打開控制臺，我們可以看到輸出結果

在這里插入圖片描述
然后我們去對changeFood函式做一些修改

 methods:{
   
        changeFood:function(){
            //console.log(this.food);
            //注意你要修改這個東西要使用this
            this.food+="好好吃！"
        }
    }

這是我們連續點擊之前的青椒肉絲3次

結果演示

青椒肉絲好好吃！好好吃！好好吃！

v-on總結

v-on指令的作用是：為元素系結事件
事件名不需要寫on
指令可以簡寫為@
系結的方法定義在methods屬性中
方法內部通過this關鍵字可以訪問定義在data中的資料

學習這么多了，我們來做個計數器，檢驗學習結果

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
    //定義單擊事件
    <button @click="sub">
        -
    </button>
    <span>{{num}}</span>
    <button @click="add">
        +
    </button>
</div>
<script>
var app=new Vue({
    el:"#app",
    data:{
        num:1
    },
    methods:{
    //定義一個增加函式
        add:function(){
            if(this.num<10){
                this.num++;
            }else{
            //當值大于10彈窗
                alert("別點了，我已經最大了！！！")
            }
            

        },
        //定義一個減小函式
        sub:function(){
            if (this.num>0) {
                this.num--;
            } else {
            //當值小于零彈窗
                alert("別點了，我已經最小了！！！")
            }

        }
    },

})
</script>
    
</body>

結果演示

當我們一直點減號，直到為零繼續點時，會出現如下彈窗

在這里插入圖片描述
當我們一直點加號，直到為10繼續點時，會出現如下彈窗

階段總結：

創建Vue實體時：el(掛載點)，data(資料),methods(方法)
v-on指令的作用是系結事件，簡寫@
方法通過this，關鍵字獲取data的資料
v-text指令的作用：設定元素的文本值，簡寫為{{}}

?根據運算式的真偽，切換元素的顯示和隱藏（v-show）

比如：廣告和遮罩層

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<img v-show="false" src="./R-C.gif" weight=100px height="100px">
</div>
<script>
    var app=new Vue({
        el:"#app",

    })
</script>
</body>

當我們加入v-show="false"時我們的圖片是不顯示的，但是我們把v-show=“true”

<img v-show="true" src="./R-C.gif" weight=100px height="100px">

結果演示

在這里插入圖片描述
就會出現上面這個gif圖片

但是這樣不好控制，我們做個修改

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" value="切換顯示狀態" @click="changeIsShow">
<img v-show="isShow" src="./R-C.gif" weight=100px height="100px">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods: {
            changeIsShow:function(){
            //取反，改變data數值
             this.isShow=!this.isShow;
            }
        },

    })
</script>
</body>

如果理解了前面的內容，看懂這段代碼應該不是問題

結果演示

默認情況下，圖片是不顯示的
在這里插入圖片描述
當我們點擊這個切換顯示狀態按鈕

結果演示

在這里插入圖片描述
就會看到這個小人

看到這里，有人想問，這個為什么會這樣，其實很好解釋
當我們默認false的情況下，我們打開網頁的控制臺，會發現默認情況下，會給我們的img標簽添加一個display:none;
在這里插入圖片描述
當我們再點擊以下切換按鈕，再去看控制臺，會發現

display：none;消失了，于是img顯示出來了,是不是很簡單

那我們居然可以使用false和true的話，是不是也可以使用運算式來寫那，接下里我們去試試

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" value="切換顯示狀態" @click="changeIsShow">
<img v-show="isShow" src="./R-C.gif" weight=100px height="100px">
<img v-show="num>=20" src="./R-C.gif" weight=100px height="100px">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:15,
            isShow:false
        },
        methods: {
            changeIsShow:function(){

                this.isShow=!this.isShow;
            }
        },

    })

因為我們的data里面的num為15是小于20的所以不會顯示，同樣第一個圖片isShow為false也不會顯示，那么如果我們把num的數值增加到20按道理，如果顯示圖片表示我們的推斷是沒問題的，所以我們要去增加num的值，怎么做那很簡單！

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" value="切換顯示狀態" @click="changeIsShow">
<input type="button" value="增加數量" @click="addNum">
<img v-show="isShow" src="./R-C.gif" weight=100px height="100px">
<img v-show="num>=20" src="./R-C.gif" weight=100px height="100px">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:15,
            isShow:false
        },
        methods: {
            changeIsShow:function(){

                this.isShow=!this.isShow;
            },
            addNum:function(){
            //當我們點擊"增加數量"時就會讓num+1
                this.num++;

            }
        },

    })
</script>
</body>

上面說到，默認情況兩個圖片都是不顯示的

結果演示
在這里插入圖片描述
但是當我們點擊增加數量這個按鈕5次，此時的num為20，就會有這樣效果

結果演示
在這里插入圖片描述
階段總結：

v-show指令的作用是：根據真偽切換元素的顯示狀態
原理是修改元素的display,實作顯示隱藏
指令后面的內容，最終決議為布林值
值為true元素顯示，值為false元素隱藏
資料改變之后，對應元素的顯示狀態同步更新

?根據運算式的真偽，切換元素的顯示和隱藏(操縱dom元素) （v-if）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <input  type="button" @click="toggleIsShow" value="切換顯示">
<p v-if="isShow">爪哇貢塵拾Miraitow</p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods: {
            toggleIsShow:function(){

                this.isShow=!this.isShow;
            },
        },

    })
</script>
</body>

結果演示

默認情況是不會顯示P標簽的內容
在這里插入圖片描述
當我們點擊這個切換顯示按鈕，我們再來看看結果

這樣這個p標簽的內容就會顯示出來了

看到這有些人可能會問了，這和之前的v-show有什么區別那？

我們來做個對比

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <input  type="button" @click="toggleIsShow" value="切換顯示">
<p v-if="isShow">爪哇貢塵拾Miraitow</p>
<p v-if="isShow">爪哇貢塵拾Miraitow  -v-show修飾的</p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods: {
            toggleIsShow:function(){

                this.isShow=!this.isShow;
            },
        },

    })
</script>
</body>

默認情況兩個都不顯示，我們去看看控制臺
在這里插入圖片描述
從網頁的控制臺可以看到，默認的情況v-if是不顯示任何東西的，我們的P標簽直接沒有了，而我們的v-show是修改了樣式表display

當我們去點擊我們的切換顯示按鈕，
在這里插入圖片描述

再去看控制臺
在這里插入圖片描述
由此我們可以看到，v-if修飾的p標簽出來了，v-show的樣式表里面沒有了display:none,這樣我們能得到結論
v-show操作的是樣式，v-if操作的是dom元素

那我們作業中改怎么選擇那?
如果是頻繁操作的使用v-show,反之使用v-if

那問題來了，我們v-show 可以使用運算式，那我們的v-if是否也可以那？
體貼的我，當然要給各位試試了

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<p v-if="temperature>=37">你可能發燒了，建議去醫院看看</p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            temperature=36
        },
    })
</script>
</body>

默認情況下不顯示我們P標簽的內容，當我們把data資料的temprature改為37

    data:{
            isShow:false,
            temperature=37
        },

結果演示

你可能發燒了，建議去醫院看看

v-if總結：

1.v-if指令的作用是：根據運算式的真偽切換元素的顯示狀態
2. 本質是通過操縱dom元素來切換顯示狀態
3. 運算式的值為true，元素存在于dom樹中，為false，從dom樹中移除
4. 頻繁的切換使用v-show，反之使用v-if,前者的切換消耗小

?設定元素的屬性（v-bind）

我們回憶下常見的屬性(比如 :src,title,class)共同點都寫在內部
那我們的v-bind怎么使用那，我們來看看
v-bind：屬性名=運算式

代碼演示

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <img v-bind:src="imgSrc" alt="" width="100px"><br>
    //更加簡單的方式，為了加以區別，把圖片的大小換成不一樣
    <img :src="imgSrc" alt="" width="200px">

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"./R-C.gif"
        },
    })
</script>
</body>

結果演示

在這里插入圖片描述

通過上述代碼，我們應該了解到了，v-bind的寫法，還有它的簡寫方式，具體怎么選擇，全憑個人喜好，但是簡寫方式更常用

那我們試著添加title

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <img v-bind:src="imgSrc" alt="" width="100px"><br>
    <img :src="imgSrc" alt="" width="200px">
    <img :src="imgSrc" alt="" width="200px" :title="imgTitle">

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"./R-C.gif",
            imgTitle:"爪哇貢塵拾Miraitow"
        },
    })
</script>
</body>

結果演示

在這里插入圖片描述
當我們的滑鼠放到，添加title屬性的圖片上面時，會出現爪哇貢塵拾Miraitow這幾個字(注意不要忘記title屬性的作用了，忘記的小伙伴，這次要記住呀)

如果想要添加一些字串到title屬性里面，也很簡單，畢竟我們前面講過了，字串的拼接

 <img :src="imgSrc" alt="" width="200px" :title="imgTitle+'我會三連支持你的！！'">

這時我們再去把滑鼠放到最右邊就會顯示爪哇貢塵拾Miraitow我會三連支持你的！！
下面我們再去看看class屬性

代碼演示

 <head>
 <style>
        .active{
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <img v-bind:src="imgSrc" alt="" width="100px"><br>
    <img :src="imgSrc" alt="" width="200px">
    <img :src="imgSrc" alt="" width="200px" :title="imgTitle+'我會三連支持你的！！'" 
    :class="isActive?'active':''" @click="toggleActive">

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"./R-C.gif",
            imgTitle:"爪哇貢塵拾Miraitow",
            //默認為false
            isActive:false
        },
        methods:{
            toggleActive:function(){
                this.isActive = !this.isActive;
            }
        }
    })
</script>
</body>

默認情況下，如下圖
在這里插入圖片描述
當我們點擊最右邊的圖片時

我們可以看到加上了，我們定義的style樣式，因為我們定義的是三元運算子，默認為false，當我們點擊圖片，觸發單擊事件，就會讓isActive取反，這樣我們就可以看到style效果了,是不是很簡單那！！！

有些小伙伴說，我不會使用三元運算子，沒關系，我們還可以使用物件的方式，我們來看看
只需要把上面的代碼做一點修改，不去使用三元運算子

    <img :src="imgSrc" alt="" width="200px" :title="imgTitle+'我會三連支持你的！！'" 
    :class="{active:isActive}" @click="toggleActive">

點擊右下邊的圖片
在這里插入圖片描述
由此可見，效果是一樣的

v-bind總結：

v-bind指令的作用是：為元素系結屬性
完整寫法是v-bind：屬性名
簡寫的話可以直接省略v-bind，只保留：屬性名
需要動態的增刪class建議使用物件的方式

?根據資料生成串列結構（v-for）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<ul>
    <li v-for="item in arr">
        學過的語言:
    </li>
</ul>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["java","javascript","python","c++"]
        },
    })
</script>
</body>

結果演示
在這里插入圖片描述
會發現它遍歷輸出了四遍，item in arr遍歷的次數和陣列的長度一樣
當我們改變以下代碼，如下

<ul>
    <li v-for="item in arr">
        學過的語言:{{ item }}
    </li>
</ul>

結果演示
在這里插入圖片描述
這個item就類似foreach然后遍歷每個值的變數，你換成it什么的都可以
個人感覺和python的for in 有點類似

我們繼續修改代碼

<ul>
    <li v-for="(item,index) in arr">
        {{ index+1 }}  學過的語言:{{ item }}
    </li>
</ul>

這個index就是陣列的下標，默認是從0開始為了更好的觀察，設定為index+1所以第一個數為1

結果演示
在這里插入圖片描述
那么陣列的運用我們知道了，接下來我們去看以下物件陣列

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">

<h2 v-for="item in food" v-bind:title="item.name">
    {{item.name}}
</h2>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:[
                {name:"西紅柿炒雞蛋"},
                {name:"青椒肉絲"}
            ]
        },
    })
</script>
</body>

結果演示
在這里插入圖片描述
當我們滑鼠放在這兩個food上面任何一個都會有顯示相應的food名稱這里就不演示了

接下來我們增加點按鈕

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">

<h2 v-for="item in food" v-bind:title="item.name">
    {{item.name}}
</h2>
<input type="button" value="添加資料" @click="add">
<input type="button" value="移除資料" @click="remove">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:[
                {name:"西紅柿炒雞蛋"},
                {name:"青椒肉絲"}
            ]
        },
        methods:{
            add:function(){
                this.food.push({ name:"紅燒肉"});
            },
            remove:function(){
                this.food.shift();
            }
        }
    })
</script>
</body>

有些同學看到這里的push()和shift()可能忘記了，不知道什么意思，我來解釋

shift()方法
shift() 方法用于把陣列的第一個元素從其中洗掉，并回傳第一個元素的值，
該方法會改變原始陣列，

push()方法
push() 方法可向陣列的末尾添加一個或多個元素，并回傳新的長度，
該方法會改變原始陣列，

由于不是動態圖片，我只能來解釋，當我們點擊添加資料的按鈕3次
在這里插入圖片描述
當我們點擊移除資料的按鈕兩次

我們可以看到之前的兩個菜沒了，只有紅燒肉了

階段總結：

v-for指令的作用是:根據資料生成的串列結構
陣列經常和v-for結合使用
語法是（item,index） in 資料
item和index可以結合其他的指令一起使用
陣列長度的更新會同步到頁面，是回應式的

? 傳遞自定義引數，事件修飾符 (v-on補充)

大家也知道，我們學的語言比如:java c++基本上語言都可以給方法傳遞引數的，我們這個也不例外

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <input type="button" value="點擊" @click="doIt('西紅柿炒蛋','青椒肉絲')">

<script>
    var app = new Vue({
        el:"#app",
        methods:{
        doIt:function(p1,p2)
{
    console.log(p1),
    console.log(p2)
},
sayHi:function(p1,p2){
    alert("吃了嘛");
}     
    }
    })
</script>
</body>

當我們點擊了以下點擊按鈕以后我們去看看控制臺，有什么變化
在這里插入圖片描述
那我們再來個觸發事件，當我們點擊回車時就會觸發

<input type="text" @keyup.enter="sayHi">

sayHi:function(p1,p2){
    alert("吃了嘛");
}

在這里插入圖片描述
階段總結：

事件系結的方法寫成函式呼叫的形式，可以傳入自定義的引數
定義方法時需要定義形參來接收傳入的實參
事件的后面跟上.修飾符可以對事件進行限制
.enter可以限制觸發的按鍵為回車
事件修飾符有多種

?獲取和設定表單元素的值（雙向資料系結v-model）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message">
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"爪哇貢塵拾Miraitow"
        }
    })
</script>
</body>

我們看到上面的代碼，默認顯示
在這里插入圖片描述
當我們加入一個h2標簽

<input type="text" v-model="message">
<h2>{{ message }}</h2>

這時候看下默認顯示
在這里插入圖片描述
當我們去改變上面text里面的文字時會發現，h2標簽里面的東西也在發生改變，當我們加入支持兩個字的時候，h2標簽的內容也跟著發生改變

當我們繼續加入6666到text的時候，h2也發生改變

那么接下來，我們設定個回車觸發事件

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{ message }}</h2>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"爪哇貢塵拾Miraitow"
        },
        methods:{
            getM:function(){
                alert(this.message);
            }
        }
    })
</script>
</body>

當我們在上面帶框的爪哇貢塵拾Miraitow點擊以下回車，就會顯示如下
在這里插入圖片描述

也就是說我們去修改txt里面的值的時候
message也同步更新是不是很妙呀！！！

那就有小伙伴問了，居然我們可以修改text里面的message然后讓h2的message發生改變，那么反過來那？

讓我們來試試

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <input type="button" value="設定message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{ message }}</h2>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"爪哇貢塵拾Miraitow"
        },
        methods:{
            getM:function(){
                alert(this.message);
            },
            setM(){
                this.message="襄陽豆腐面";
            }
        }
    })
</script>
</body>

結果演示
默認情況
在這里插入圖片描述
當我們點擊以下設定message按鈕

果然v-model和愛情一樣是雙向的

階段總結：

v-model指令的作用是便捷設定和獲取表單元素的值
系結的資料會和表單元素值相關聯
系結的元素和表單的值可以相互轉換

💗 Vue結合網路資料開發應用

網路請求庫 axios

我們之所以要來使用axios，是因為我們需要進行前后端分離開發，那么前后端的跨域問題就是無可避免的問題，前后端的請求也是無可避免的，Vue之中有一個請求組件是axios，我們可以對axios進行封裝作為我們請求的工具組件

Axios 是什么?
Axios 是一個基于 promise 網路請求庫，作用于node.js 和瀏覽器中，它是 isomorphic 的(即同一套代碼可以運行在瀏覽器和node.js中)，在服務端它使用原生 node.js http 模塊, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests，

Axios特性
1、可以在瀏覽器中發送 XMLHttpRequests
2、可以在 node.js 發送 http 請求
3、支持 Promise API
4、攔截請求和回應
5、轉換請求資料和回應資料
6、能夠取消請求
7、自動轉換 JSON 資料
8、客戶端支持保護安全免受 XSRF 攻擊

匯入axios的js

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

語法介紹

   axios.get(地址?查詢字串key=value&key2=values)
   //正確請求會觸發第一個回呼函式，錯誤請求會觸發第二個回呼函式
    .then(function (response){},function(err){});

   axios.get(地址,引數物件{key:value,key2=value2})
    //正確請求會觸發第一個回呼函式，錯誤請求會觸發第二個回呼函式
    .then(function (response){},function(err){});

https://autumnfish.cn/api/joke/list
是一個笑話的網路介面，你可以直接在瀏覽器訪問，會隨機產生笑話
在這里插入圖片描述
后面的num=3就是三條笑話

在這里插入圖片描述
axios基本使用

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <input type="button" value="get請求" class="get">
    <input type="button" value="post請求" class="post">
    <!--官網提供的在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
    介面1：隨機笑話
    請求地址：https://autumnfish.cn/api/joke/list
    請求方式：get
    請求引數：num(笑話條數，數字)
    回應內容: 隨機笑話
    
    */
   
    //獲得get按鈕，添加一個點擊事件
document.querySelector(".get").onclick = function(){

    axios.get("https://autumnfish.cn/api/joke/list?num=3")
    .then(function (response){
        console.log(response);
    },function(err){
        console.log(err);
    }
    )
}

</script>
</body>

默認狀態
在這里插入圖片描述

當我們點擊get請求的按鈕我們來看控制臺資訊
我們可以看到，觸發了第一個回呼函式
在這里插入圖片描述
那么錯誤的回呼函式會是什么樣子的？

我們去故意改變請求的地址，讓請求出錯

  axios.get("https://autumnfish.cn/api/joke/list1234?num=3")

我們再去看控制臺的資訊
在這里插入圖片描述
我們可以看到，觸發了第二個回呼函式

我們接下來看看post請求

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <input type="button" value="get請求" class="get">
    <input type="button" value="post請求" class="post">
    <!--官網提供的在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
介面2：用戶注冊
    請求地址：https://autumnfish.cn/api/user/reg
    請求方式：post
    請求引數：num(用戶名，字串)
    回應內容:   注冊成功或失敗
    */
    document.querySelector(".post").onclick = function ( ) {
    axios.post("https://autumnfish.cn/api/user/reg",{  username:"jack"})
    .then(function (response){
        console.log(response);
    },function(err){
        console.log(err);
    }
    )
}
</script>
</body>

看控制臺的顯示
在這里插入圖片描述
根據我們截的圖我們可以看到jack的用戶已經被注冊了

于是我們修改以下

 axios.post("https://autumnfish.cn/api/user/reg",{  username:"襄陽牛肉面"})

在這里插入圖片描述
顯示注冊成功，同樣的和之前的get方法一樣，我們把網址改為錯誤的，也會在控制臺顯示一樣的404

axios總結：

axios必須匯入才能使用
使用get和post方法即可發送對應的請求
then方法中的回呼函式會請求成功或請求失敗的時候觸發
通過回呼函式的形參可以獲取回應內容，或錯誤資訊

檔案傳送門

https://github.com/axios/axios

🐾axios結合Vue

那我們的axios和Vue怎么結合使用？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--官網提供的在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div id="app">
        <input type="button" value="獲取笑話" @click="getJoke">
        <p>{{joke}}</p>

    </div>
<script>
    /*
    介面1：隨機笑話
    請求地址：https://autumnfish.cn/api/joke/list
    請求方式：get
    請求引數：num(笑話條數，數字)
    回應內容: 隨機笑話
    
    */
var app=new Vue({
            el:"#app",
            data:{
                joke:"天大的笑話"
            },
            methods:{
                getJoke:function(){
                    axios.get("https://autumnfish.cn/api/joke/list?num=3")
                    .then(function (response){
                        console.log(response);
                    },function(err){
                        console.log(err);
    }
    )
                }
            }

})
</script>
</body>

默認狀態
在這里插入圖片描述
當我們點擊獲取笑話的按鈕然后去看控制臺

有同學說每次顯示這么多內容看的結果不直觀，那么我們來修改代碼

只需要修改一句

    console.log(response.data);

結果演示
在這里插入圖片描述
這樣我們就只看到笑話內容了

有些小伙伴可能會問，那我還可以用this得到data的資料嘛？
我們來試試，只需加添加一行代碼，然后看控制臺的顯示

  console.log(this.joke)

結果卻發現顯示的是undefined,說明當前的this已經改變了，我們不能通過this得到Vue實體data的資料了
在這里插入圖片描述
那我們要怎么才能拿到data的資料？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--官網提供的在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div id="app">
        <input type="button" value="獲取笑話" @click="getJoke">
        <p>{{joke}}</p>

    </div>
<script>
    /*
    介面1：隨機笑話
    請求地址：https://autumnfish.cn/api/joke/list
    請求方式：get
    請求引數：num(笑話條數，數字)
    回應內容: 隨機笑話
    
    */
var app=new Vue({
            el:"#app",
            data:{
                joke:"天大的笑話"
            },
            methods:{
                getJoke:function(){
                //定義變數
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke/list?num=3")
                    .then(function (response){
                        console.log(response.data);
                        // console.log(this.joke)
                        that.joke=response.data;
                    },function(err){
                        console.log(err);
    }
    )
                }
            }

})
</script>
</body>

這時當我們再去點擊獲取笑話按鈕

在這里插入圖片描述
這樣就會把服務器回傳的資料直接回傳給我們的joke

axios+vue總結：

axios回呼函式中的this已經改變，無法訪問到data中的資料
把this保存起來，回呼函式中直接使用保存的this即可
和本地應用的最大區別就是改變了資料來源

🐾關于vue的基本使用，就介紹到這里，大家可以結合一些書籍資料，然后去看看一些簡單的專案💕

------🎃 歡迎點贊 👍 收藏 ?留言 📝-----
<-----希望大家期末💋過🎊🎊🎊🎊🎊----->

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/397396.html

標籤：其他

上一篇：前端工程師的摸魚日常（6）

下一篇：用python分析資料框

室友打了一把端游，我入門了Vue

快速入門Vue

🎃 多種選擇器

🎈class選擇器

🎈標簽選擇器

🧡 data資料物件

💛 Vue 指令

?設定標簽的文本值（textContent）

?設定標簽的innerHtml（v-html）

?為元素系結事件（v-on）

?根據運算式的真偽，切換元素的顯示和隱藏（v-show）

?根據運算式的真偽，切換元素的顯示和隱藏(操縱dom元素) （v-if）

?設定元素的屬性（v-bind）

?根據資料生成串列結構（v-for）

? 傳遞自定義引數，事件修飾符 (v-on補充)

?獲取和設定表單元素的值（雙向資料系結v-model）

💗 Vue結合網路資料開發應用

🐾axios結合Vue