vue的基础

最新推荐文章于 2023-05-17 19:46:30 发布

原创最新推荐文章于 2023-05-17 19:46:30 发布 · 156 阅读

CC 4.0 BY-SA版权

这篇博客介绍了Vue.js的基础语法，包括v-if/v-show的条件渲染，v-for的列表遍历，v-bind/v-on的属性绑定和事件监听，以及v-model的双向数据绑定。通过示例展示了如何在实际项目中使用这些指令进行网页开发，如搜索歌曲、播放音乐、获取评论等，并引入了axios库处理网络请求。

vue学习中的一些基础语法：

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

v-if ：v-if是条件渲染指令，它根据表达式的真假来删除和插入元素。

v-show : v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

v-else: 可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-for : v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：如：

v-for="item in items"。

v-bind : v-bind指令主要用于属性绑定，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class

v-on : v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：<a v-on:click="doSomething">

v-model : v-model是一个指令，限制在<input>、<select>、<textarea>、components中使用的修饰符。lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。使用v-model可以实现双向数据绑定。

v-bind 和 v-on的缩写方式：

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

1.首先在项目里导入vue.js文件（简单的vue项目）

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

简单的vue项目

前端网页显示如下：

v-model的表单元素绑定：

Vue结合网络数据开发应用

引入axios.min.js

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

vue网络综合应用：（示例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>悦听player</title>
    <!-- 样式 -->
    <link rel="stylesheet" href="./css/playerIndex.css">
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>

<body>
<div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
        <div class="search_bar">
            <img src="images/player_title.png" alt="" />
            <!-- 搜索歌曲 -->
            <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />    <!--v-model:查询的事件绑定-->
        </div>
        <div class="center_con">
            <!-- 搜索歌曲列表 -->
            <div class='song_wrapper'>
                <ul class="song_list">
                    <!--两个点击事件，播放歌曲和播放mv-->
                    <li v-for="song in songs"><a href="javascript:;" @click="player(song.id)"></a> <b>{{song.name}}</b> <span v-show="song.mvid!=0"><i @click="playMv(song.mvid)"></i></span></li>
                </ul>
                <img src="images/line.png" class="switch_btn" alt="">
            </div>
            <!-- 歌曲信息容器 -->
            <!-- 绑定一个类，给属性做了个判断-->
            <div class="player_con" :class="{playing:isPlaying}">
                <img src="images/player_bar.png" class="play_bar" />
                <!-- 黑胶碟片 -->
                <img src="images/disc.png" class="disc autoRotate" />
                <img :src="picUrl" class="cover autoRotate" />
            </div>
            <!-- 评论容器 -->
            <div class="comment_wrapper">
                <h5 class='title'>热门留言</h5>
                <div class='comment_list'>
                    <dl v-for="comment in comments">   <!--评论,对应下方-->
                        <dt><img :src="comment.user.avatarUrl" alt=""></dt>  <!--评论头像路径-->
                        <dd class="name">{{comment.user.nickname}}</dd>  <!--评论用户名-->
                        <dd class="detail">{{comment.content}}</dd>  <!--评论内容-->
                    </dl>
                </div>
                <img src="images/line.png" class="right_line">
            </div>
        </div>
        <div class="audio_con">
            <!-- 两个绑定事件，判断结果，对应上边的class类-->   <!-- :src 绑定的是歌曲的路径 -->
            <audio ref='audio'  :src="songUrl" controls autoplay loop class="myaudio" @play="isPlaying=true" @pause="isPlaying=false"></audio>
        </div>
        <div class="video_con"  v-show="isShowMv">    <!-- v-show做判断：是否展示mv -->
            <video  controls="controls" :src="mvUrl"></video>   <!--mv路径,对应下方-->
            <div class="mask" ></div>
        </div>
    </div>
</div>
<script>
    var app=new Vue({
        el:"#player",
        data:{
            //查询歌曲
            query:"",
            //歌曲集合
            songs:[],
            //歌曲路径
            songUrl:"",
            //评论
            comments:[],
            //mv路径
            mvUrl:"",
            //不展示mv,只有点击mv才会显示
            isShowMv:false,
            //背景
            picUrl:"",
            //是否启动动画，默认为不启动，点击和暂停公用一个按键
            isPlaying:false,
        },
        methods:{
            //查询歌曲
            searchMusic(){
                var that=this;
                axios.get(`https://autumnfish.cn/search?keywords=`+this.query).then(function (result) {
                    //console.log(result)  //输出查看对应的相关属性
                    that.songs=result.data.result.songs;
                })
            },
            //播放
            player(id){
                var that=this;
                that.isPlaying=true;//点击播放音乐
                axios.get(`https://autumnfish.cn/song/url?id=${id}`).then(function (result) {
                    //console.log(result)
                    that.songUrl=result.data.data[0].url;
                })
                //评论
                axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${id}`).then(function (result) {
                    //console.log(result)
                    that.comments=result.data.hotComments;
                })
                //背景
                axios.get(`https://autumnfish.cn/song/detail?ids=${id}`).then(function (result) {
                    //console.log(result)
                    that.picUrl=result.data.songs[0].al.picUrl;
                 })
            },
            //播放mv
            playMv(mid){
                var that=this;
                axios.get(`https://autumnfish.cn/mv/url?id=${mid}`).then(function (result) {
                    //console.log(result)
                    that.isShowMv=true;  //点击显示mv
                    that.mvUrl=result.data.data.url;
                })
            }
        }
    })
</script>
</body>
</html>

<!--
0.配置：引入相关配置
1.查询歌曲
2.播放歌曲（路径）
3.查询表示出相关歌曲评论
4.播放mv（路径）
5.不显示mv,只有点击了才显示
6.歌曲相关背景图片
7.动画背景启动停止，默认为否-->