vue入門學習

時間 2021-01-10

標籤 html vue mysql ios sql npm axios api 網絡 app 欄目 HTML 简体版

原文原文鏈接

vue入門學習

vue指令

v-text：設置標籤的文本值

不管標籤內部任何內容都會被覆蓋，而使用插值表達式{{}}則能夠動態更改標籤的文本值html

{{}}中支持運算，如字符串拼接vue

<div id="app">
        {{ message }} honey
        <p v-text='message'>honey</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            // 掛載點
            el:"#app",
            // 數據對象
            data: {
                message:"Hello vue!!!"
            }
        })
    </script>

v-html：設置標籤的innerHtml

相對於v-text來講，v-html可以解析html標籤mysql

<div id="app">
        <p v-text='content'></p>
        <p v-html='content'></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            // 掛載點
            el:"#app",
            // 數據對象
            data: {
                content:"<a href='www.baidu.com'>百度一下</a> "
            }
        })
    </script>

v-on：爲元素綁定事件

v-on:method能夠簡寫爲@methodios

在方法中調用data中的數據，須要使用this關鍵字sql

<div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt"/>
        <input type="button" value="v-on簡寫" @click="doIt"/>
        <input type="button" value="雙擊事件" @dblclick="doIt"/>
        <h2 @click="changeFood">{{ food }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"土豆肉絲"
            },
            methods:{
                doIt:function(){
                    alert("作IT");
                },
                changeFood:function(){
                    // console.log(this.food);
                    this.food+=" 太好吃了!"
                }
            }

        })
    </script>

v-on補充：npm

<div id="app">
        <input type="button" value="點擊" @click="doIt('小黑','小白')">
        請輸入: <input type="text" @keyup.enter="sayHi"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
              sayHi:function(){
                  alert("你好呀！打工人");
              },
              doIt(p1,p2){
                alert("咱們是"+p1+"和"+p2);
              }
            }
            
        })
    </script>

事件綁定時能夠傳入參數；綁定的事件能夠經過.加以限制，如上面代碼的@keyup.enteraxios

v-show：根據表達式的真假，切換元素的顯示和隱藏

<div id="app">
        <button @click="changeIsShow">隱藏或顯示圖片</button>
        <button @click="addAge">累加年齡</button>
        <img src="img/Blueberry.png" alt="藍莓" v-show="isShow">
        <img src="img/Strawberry.png" alt="草莓" v-show="age>17">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                },
                addAge:function(){
                    this.age += 1;
                }
            }
        })
    </script>

根據表達式的真假，切換元素的顯示和隱藏

<div id="app">
        <button @click="changeIsShow">切換顯示狀態</button>
        <p v-if="isShow">mysql是怎樣運行的 -- v-if修飾</p>
        <p v-show="isShow">mysql是怎樣運行的 -- v-show修飾</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                }
            }
        })
    </script>

與v-show的區別
v-show：只是隱藏了文本內容，標籤至始至終在那裏；v-if：隱藏了整個標籤
如果頻繁切換，通常使用v-show，v-if更加消耗性能api

v-bind：設置元素的屬性

<div id="app">
        <img v-bind:src="imgSrc" >
        <img :src="imgSrc" :title="imgTitle+'!!!'" 
        :class="isActive?'active':''" @click="toggleActive">
        <img :src="imgSrc" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               imgSrc:"https://typocho-1257109239.cos.ap-chengdu.myqcloud.com/site_appearence/%E5%A4%B4%E5%83%8F/touxiang02.jpg",
               imgTitle:"極客之美",
               isActive:true
            },
            methods:{
               toggleActive:function(){
                   this.isActive = !this.isActive;
               }
            }
        })
    </script>

v-bind:attribute 簡寫爲:attribute網絡

綁定屬性支持字符串拼接app

類屬性綁定：1. 三元表達式 2. {attribute:true/false}

v-for:循環數據

<div id="app">
        <button @click="addFood">增長數據</button>
        <button @click="remove">移除數據</button>
        <ul>
            <li v-for="item in foodStr">
                {{ item.name }}
            </li>
            <li v-for="(item,index) in foodStr">
               {{ index+1 }} {{ item.name }}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                foodStr:[
                    {name:'西蘭花炒蛋'},
                    {name:"蛋炒西蘭花"}
                ]
            },
            methods:{
                addFood:function(){
                    this.foodStr.push({name:"老乾媽蘸牛肉"});
                },
                remove:function(){
                    this.foodStr.shift();
                }
            }
        })
    </script>

v-model：獲取和設置表單元素的值

<div id="app">
        <button @click="setM">修改message</button>
       <input type="text" v-model="message" @keyup.enter="alert(message)">
       <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{message:"我是大帥鍋"},
            methods:{
             setM:function(){
                 this.message = "咱們都是大帥鍋！";
             }
            }
            
        })
    </script>

雙向數據綁定: 修改表單數據與修改message的值是同步的

網絡應用：axios

功能強大的網絡請求庫

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//請求方式
axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key1:value1,key2:value2}).then(function(response){},function(err){})

axios的基本使用

<input type="button" class="get" value="get請求">
    <input type="button" class="post" value="post請求">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /**
         * 接口: 隨即笑話
         * 請求地址: https://autumnfish.cn/api/joke/list
         * 請求方法: get
         * 請求參數: num(笑話條數，數字)
         * 響應內容: 隨即笑話
         * */
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            })
        }
        /**
         * 接口: 用戶註冊
         * 請求地址: https://autumnfish.cn/api/user/reg
         * 請求方法: post
         * 請求參數: username(用戶名，字符串)
         * 響應內容: 註冊成功或失敗
         * */
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",
            {username:"帝釋天"})
            .then(function(response){
                console.log(response);
            })
        }
    </script>

axios結合vue使用

<div id="app">
        <input type="button" value="獲取笑話" @click="getJoke">
        <div id="content">
            {{ joke }}
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"這是個笑話"
            },
            methods:{
                getJoke:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        that.joke = response.data;
                    },function(error){
                        console.log(error);
                    })
                }
            }
        })
    </script>