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.动画背景启动停止,默认为否-->