碼上快樂

相關內容    簡體    繁體

Vue

本文轉載自   查看原文   2022-04-18 13:28   610 

Vue

這是一個Vue的入門學習筆記，參考的是黑馬程序員的一個4小時快速入門課程，內容比較基礎，但很適合沒有接觸過Vue，但開發需要用到的人快速上手，內容為個人記錄，僅供參考！

原視頻教程：

黑馬程序員vue前端基礎教程-4個小時帶你快速入門vue_嗶哩嗶哩_bilibili

基礎知識

Vue是一個基於JavaScript的前端框架，可以更便捷的進行前端開發。

官方文檔：介紹 — Vue.js (vuejs.org)

HTML中導入Vue 2.X版本：

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

第一個程序：

<!DOCTYPE html>
<html lang="en">
<head>
    
    
    
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello Vue!'
            }
        })
    </script>
</body>
</html>

el掛載點：

  • 作用范圍：利用CSS的選擇器將Vue實例掛在到目標元素，將其{{}}內部的同名數據替換。可以作用到命中的元素及其子元素中。
  • 掛載點可以用在id選擇器也可以用在類選擇器，但是id是唯一的，一般建議選擇掛在到id選擇器。
  • 可以設置到<div>以外的dom元素中，但不能用於<HTML>和<BODY>

data數據對象：

  • Vue的數據定義在data中
  • data中可以寫復雜類型數據，語法遵循js規則

本地應用

v-text指令，和thymeleaf的th:text用法類似，替換靜態文本

v-html指令，內容中有html結構會被解析為標簽

v-on指令，為元素綁定事件，綁定的方法定義在methods中

簡單的計數器功能實現

<!DOCTYPE html>
<html lang="en">
<head>
    
    
    
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button  @click="add">
                +
            </button>
        </div>
    </div>

    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num:1
            },
            methods: {
                add:function(){
                    if (this.num<10) {
                        this.num++;
                    }
                    else{
                        alert('已經最大了！');
                    }
                },
                sub:function(){
                    if (this.num>0) {
                        this.num--;
                    }
                    else{
                        alert('已經最小了！');
                    }
                }
            },
        })
    </script>
</body>
</html>

v-show指令，顯示和隱藏元素

v-if指令，和v-show類似，不同在於v-show是操縱元素的樣式style，v-if是直接操縱dom元素：

image-20220416171938699

image-20220416171957005

可以看到用v-if操縱的p標簽直接沒有了。

v-bind指令，為元素綁定屬性，完整寫法是v-bind:屬性名，簡寫為:屬性名

簡單的圖片切換

<!DOCTYPE html>
<html lang="en">
<head>
    
    
    
    <title>Document</title>
    <style>
        .center{
            text-align: center;
        }
        .image{
            width: 700px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="center">
            <h2>圖片切換</h2>
            
            <!-- 主圖 -->
            <div>
                <img class="image" :src="imgArr[index]"/>
            </div>
            
            <!-- 左 -->
            <a @click="prev" href="javascript:void(0)" v-show="index!=0">
                <button>上一張</button>  
            </a>
            <!-- 右 -->
            <a @click="next" href="javascript:void(0)" v-show="index<imgArr.length-1">
                <button>下一張</button>  
            </a>
        </div>
    </div>

    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgArr:[
                    "./images/1.jpg",
                    "./images/2.jpg",
                    "./images/3.jpg",
                    "./images/4.jpg",
                    "./images/5.jpg",
                    "./images/6.jpg",
                    "./images/7.jpg",
                    "./images/8.jpg",
                    "./images/9.jpg",
                    "./images/10.jpg",
                    "./images/11.jpg",
                    "./images/12.jpg",
                    "./images/13.jpg",
                    "./images/14.jpg",
                ],
                index:0
            },
            methods: {
                prev:function(){
                    this.index--;    
                },

                next:function(){
                    this.index++;
                }
            },
        })
    </script>
</body>
</html>

v-for指令，根據數據生成列表結構，經常跟數組一起使用，語法：(item, index) in 數據

v-model指令，將數據和表單元素的值雙向綁定

簡單的記事本功能實現

和傳統的基於DOM的開發方式不同，vue基於數據開發，更加簡單方便

<!DOCTYPE html>
<html lang="en">

<head>
    
    
    
    <title>Document</title>
    <style>
        #todoapp {}

        #todolist {
            list-style: none;
        }
        footer{
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body style="text-align: center">
    <!-- 主體 -->
    <div id="todoapp">
        <!-- 輸入框 -->
        <div>
            <h1>記事本</h1>
            <input v-model="inputvalue" @keyup.enter="add" />
        </div>

        <!-- 列表區域 -->
        <div class="main">
            <ul id="todolist">
                <li v-for="(item, index) in list">
                    <div>
                        <span>{{index+1}}.</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)">×</button>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 統計和清空 -->
        <footer v-show="list.length!=0">
            <span class="todo-count" style="order: 1">items left</span>
            <div style="order: 0; margin-right: 5px;"> {{list.length}} </div>
            <button @click="clear" style="order: 2; margin-left: 30px;">Clear</button>
        </footer>
    </div>
    <!-- 底部 -->
    

    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#todoapp",
            data: {
                list: ["吃飯", "睡覺", "寫代碼"],
                inputvalue: ""
            },
            methods: {
                add: function () {
                    this.list.push(this.inputvalue);
                },
                remove: function (index) {
                    this.list.splice(index, 1);
                },
                clear:function(){
                    this.list=[];
                }
            }
        })
    </script>

</body>

</html>

網絡應用

axios：網絡請求庫，需安裝和導包

官網：起步 | Axios 中文文檔 | Axios 中文網 (axios-http.cn)

文檔：https://github.com/axios/axios

使用unpkg CDN：

axios使用get或post方法發送請求

then方法中的回調函數會在請求成功或失敗時觸發，回調函數形參可以獲取響應內容或錯誤信息

綜合應用

音樂播放器

主界面，使用網易雲接口

image-20220417211131103

以下是html，css，js源代碼

<!--player.html文件-->
<!DOCTYPE html>
<html lang="en">

<head>
    
    
    
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="app">
        <div id="main">
            <div class="search_bar">
                <input id="input_search" type="text" v-model="query" @keyup.enter="searchMusic"/>
            </div>
            <div id="mainContent">
                <!-- 音樂列表 -->
                <div id="left_list" class="row">
                    <h2>歌曲列表</h2>
                    <ul class="music_list">
                        <li v-for="item in musicList">
                            <a href="javascript:;" @click="playMusic(item.id)">{{item.name}}</a>
                        </li>
                    </ul>
                </div>
                <!-- 封面 -->
                <div id="musicCover" class="row">
                    <img :src="musicCover">
                </div>
                <!-- 熱門評論 -->
                <div id="rightComments" class="row">
                    <h2>熱門評論</h2>
                    <div id="hotComments">
                        <dl v-for="item in hotComments">
                            <div style="display:flex">
                                <dt><img :src="item.user.avatarUrl"></dt>
                                <dd id="nickname">{{item.user.nickname}}</dd>
                            </div>
                            <dd id="content">{{item.content}}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div id="audio">
                <audio ref="audio" :src="musicUrl" controls autoplay loop>
                    您的瀏覽器不支持 audio 標簽。
                </audio>
            </div>
        </div>
    </div>

    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios接口地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/main2.js"></script>
</body>

</html>

/* style.css */
body{
    background-color: white;
}
.search_bar {
    text-align: center;
}

#input_search {
    width: 500px;
    height: 40px;
    padding: 0 5px;
    margin: 10px 0;
}

.row {
    display: inline-block;
    height: 550px;
    border: 1px solid;
    padding: 10px;
}

#mainContent {
    display: flex;
    height: 570px;
    justify-content: center;
}

#left_list {
    width: 200px;
}

.music_list {
    list-style: none;
    border: 1px solid;
    height: 470px;
    padding-left: 5px;
    overflow-y: scroll;
}

a{
    text-decoration: none;
}

#musicCover {
    width: 550px;
    display: flex;
    border: 1px solid;
}

#rightComments{
    width: 400px;
}

#hotComments {
    border: 1px solid;
    width: inherit;
    height: 470px;
    overflow-y: scroll;
}

#hotComments img {
    width: 40px;
    border-radius: 50%;
}

#hotComments dl {
    margin: 10px;
    border: 1px solid;
    padding: 10px;
}
#hotComments dd{
    margin: 0;
}
#nickname{
    font-weight: bold;
    padding-left: 20px;
    line-height: 45.6px;
}
#content{
    font-size: small;
}

#audio {
    display: flex;
    justify-content: center;
}
audio{
    width: 1216px;
    border: 1px solid;
}

ul {
    margin: 0;
}

// main2.js文件
/*
歌曲搜索接口
    請求地址:https://autumnfish.cn/search
    請求方法:get
    請求參數:keywords(查詢關鍵字)
    響應內容:歌曲搜索結果

歌曲url獲取接口
    請求地址:https://autumnfish.cn/song/url
    請求方法:get
    請求參數:id(歌曲id)
    響應內容:歌曲url地址

歌曲詳情獲取
    請求地址:https://autumnfish.cn/song/detail
    請求方法:get
    請求參數:ids(歌曲id)
    響應內容:歌曲詳情（包括封面）

熱門評論獲取
    請求地址:https://autumnfish.cn/comment/hot?type=0
    請求方法:get
    請求參數:id(歌曲id，地址中的type固定為0)
    響應內容:歌曲熱評
*/
var app = new Vue({
    el: "#app",
    data: {
        query: '',
        musicList: [],
        musicUrl:"",
        musicCover:"",
        hotComments:[]
    },
    methods: {
        //歌曲搜索
        searchMusic: function () {
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords=" + this.query)
                .then(function (response) {
                    // console.log(response);
                    that.musicList = response.data.result.songs;
                })
                .catch(function (err) { })
        },
        //歌曲播放
        playMusic: function (musicId) {
            var that = this;
            //歌曲地址獲取
            axios.get("https://autumnfish.cn/song/url?id=" + musicId)
                .then(function (response) {
                    // console.log(response);
                    // console.log(response.data.data[0].url);
                    that.musicUrl=response.data.data[0].url;
                })
                .catch(function (err) { })
            //歌曲地址獲取
            axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
                .then(function (response) {
                    // console.log(response);
                    // console.log(response.data.songs[0].al.picUrl);
                    that.musicCover = response.data.songs[0].al.picUrl;
                })
                .catch(function (err) { })
            //歌曲熱評獲取
            axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
            .then(function (response) {
                // console.log(response);
                // console.log(response.data.songs[0].al.picUrl);
                that.hotComments = response.data.hotComments;
            })
            .catch(function (err) { })
        }
    }
})


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue—{{ | }} vue vue - vue使用less (Vue)vue模板語法 【VUE】Vue 源碼解析 Vue（五）Vue規范 VUE3（五）vue路由vue-router4 vue的eventBus Vue從零開始（一） vue筆記
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM