Vue的介绍使用以及说明

<template> <div> <Header></Header> <div style="background: #eee;"> <!-- 面包屑导航 --> <div class="nav-wrap"> <p class="nav-p-pc" style="margin-top:-25px;text-align:left;"> <a href="/">课程列表</a> <span class="sharp-content">&gt;</span> <span class="nav-sec">{{course.courseName}}</span> </p> </div> <!-- 课程详情 --> <div class="container"> <div style="height: 100%;"> <div class="weui-tab content-wrapper"> <div id="vux_view_box_body" class="weui-tab__panel vux-fix-safari-overflow-scrolling" > <div style="position: relative;"> <div class="intro"> <div class="intro-content"> <img class="course-img" :src="course.courseImgUrl" alt="课程图片" /> <div class="conent-wrap"> <div class="name" style="text-align:left;"> {{course.courseName}} </div> <div class="des text-omit" style="text-align:left;"> {{course.brief}} </div> <div class="title"> <div class="teacher-name text-omit"> 讲师：{{course.teacher.teacherName}} <span class="line"></span> {{course.teacher.position}} </div> </div> <div class="lesson-info"> <div class="boook-icon backgroun-img-set"></div> <div class="time">{{totalLessons}} 讲 / {{course.totalDuration}} 课时</div> <div class="person-icon backgroun-img-set"></div> <div class="person">{{course.sales}}人已购买</div> </div> </div> <div class="content-right"> <div class="button-wrap" @click="watchFirstCourse()"> 免费试看 <div class="small-arrows"></div> </div> </div> </div> </div> </div> <div class="public-class-container is-pc"> <el-tabs v-model="activeName"> <el-tab-pane label="课程信息" name="intro"> <div v-html="course.courseDescription" class="content-p pc-background"> </div> <!-- 留言板 开始--> <div class="message"> <div class="message-topic"> <div class="message-topic-title normal-font">精选留言</div> </div> <div> <div class="message-edit"> <textarea rows="20" style="border:none;resize: none;" contenteditable="true" placeholder="分享学习心得、思考感悟或者给自己一个小鼓励吧！" class="edit-div pcStyle" v-model="comment" ></textarea> </div> <div class="message-edit-footer flex"> <button class="message-edit-btn disableBg" @click="saveComment">发表留言</button> </div> </div> <!-- 留言 开始 --> <div class="message-list" v-for="(comment , index) in commentList" :key="index"> <div class="message-list-title"> <div class="message-list-title-left"> <div class="message-list-title-left-name">{{comment.userName}}</div> <div class="message-list-title-left-tag"></div> </div> <!-- 已赞 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAJFBMVEVHcEwAuI4AtIsAtIsAtIoAtYwAtIsAtYwAtowAx5kAtIsAs4qd4c1kAAAAC3RSTlMAGMfz3VGnbTYIhXtDq8EAAAETSURBVDjLldWhb8JAFAbwg8CGhGSGzNQtULNkWUioWbJkpmYKAQaBITPLLKZysmLz+xfolUL6/XM72msh9N2X8ImaX17vrq+vVeqU39XTuK/kdEMA01jGDY4ZyYWFIRPxp0S8u+8KeBJ+WDxIGFrMJbQm7qhVYSJgr8JUwNsKtYDtCiHgPavcsDVDstsuyDk7NeYDk6G8pM3bWXNawQUijWq8QyPPpQy+50ET9bF09go5pus3cMV0feFEc2DfieZRBU7Up7fjSkwZZgz3DA8MHxl6DP8YRgxjgokimDHcMdwyfGG4ZPjJMCKoY4KJIpgz3DHcMvQYFuPpk/005t1mffHlOs/ETvxXAA0Ul3oQHsp/xD93wxfHcC4VkwAAAABJRU5ErkJggg== --> <div @click="cancelzan(comment)" v-if="JSON.stringify(comment.favoriteRecords).indexOf( user.content.id ) >= 0" class="message-list-title-right"> <img class="message-list-title-right-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAJFBMVEVHcEwAuI4AtIsAtIsAtIoAtYwAtIsAtYwAtowAx5kAtIsAs4qd4c1kAAAAC3RSTlMAGMfz3VGnbTYIhXtDq8EAAAETSURBVDjLldWhb8JAFAbwg8CGhGSGzNQtULNkWUioWbJkpmYKAQaBITPLLKZysmLz+xfolUL6/XM72msh9N2X8ImaX17vrq+vVeqU39XTuK/kdEMA01jGDY4ZyYWFIRPxp0S8u+8KeBJ+WDxIGFrMJbQm7qhVYSJgr8JUwNsKtYDtCiHgPavcsDVDstsuyDk7NeYDk6G8pM3bWXNawQUijWq8QyPPpQy+50ET9bF09go5pus3cMV0feFEc2DfieZRBU7Up7fjSkwZZgz3DA8MHxl6DP8YRgxjgokimDHcMdwyfGG4ZPjJMCKoY4KJIpgz3DHcMvQYFuPpk/005t1mffHlOs/ETvxXAA0Ul3oQHsp/xD93wxfHcC4VkwAAAABJRU5ErkJggg==" alt=""> <div class="message-list-title-right-praise">{{comment.likeCount}}</div> </div> <!-- 没点过赞 --> <div @click="zan(comment)" v-else class="message-list-title-right"> <img class="message-list-title-right-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAKlBMVEVHcExnZ2dzc3NmZmZqampmZmZmZmZnZ2dnZ2dnZ2dmZmZoaGhmZmZmZmZl+8SAAAAADXRSTlMA/AbsFtilbj5YwSqJPyESoQAAAZxJREFUOMt1lTtLA1EQha8xRhPTBEmhuKCCoNgoIlYLMcRKBG0sxIUgCDaBSDohEO0FEbQyIBZaBazERvAPWCwxPnP+i3tnrlGTmVPswn73NXNm7hrzq9m9kZ2ckTUUABifkOEBrK7liR7BMRFOA/uFc+BUgnV8mFisEW5IsIFi9FzBuwR91KJnAm8S9EIbxSBeBRZHk86MrBQJWjymJUC3nlugSyk+SQyhANfxos+s4krfM0DZvmbw2cuSCHNGi3PAfUygXYiU79ryyw1ibf0xZ9intBsz6SBadx24iiZXz8kPxCiTtYdLPzKTVFkkLQAZO/VikwYW/x/wHohcT/MiPQE8W9frxJrlbpiw4xvA0vbNmWyhj2Nrhmy+B7nEyTsN0rIaJAc0SDWqwX7rhAYfMa/Dui0bDZbwZAwUGNjWUWActnUUyN2hwDTaOkxRaSiwj6pRhjHKgTazSkWlwBK1jgIpBwrkHCgwyZ0oQ86BAjkHCjziG0KE8YBvCA/5KacOm6sgrHFAotouT6J23bkkLbsNDjM9yt7yP+IbQYga5De+eBMAAAAASUVORK5CYII=" alt=""> <div class="message-list-title-right-praise">{{comment.likeCount}}</div> </div> </div> <div class="message-list-content"> {{comment.comment}} </div> <!--删除留言（必须登录才能删除自己的）--> <!-- <div class="message-delete pointer"> <img class="message-delete-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4BAMAAABaqCYtAAAAD1BMVEWZmZn4+fqysrPu7/DS09OEJUPlAAAAf0lEQVQ4y+3VwQ2AIAwF0C9hAAUHgDgBToD7L2UiUMDiwQMXpQfS9B3ohQ+WVDtibTRCarRJKBzDGVQTQ59RMjSwoVEQDIF4lQYa2Oi6IR6qJ5Yr1Et9ExvnwIGv8A9vxdWmCzRFdMdIF4Se54wkVBwtYQ7/+hMIe643Fcc1PgEbl0u1B0v+VgAAAABJRU5ErkJggg==" alt="">删除 </div> --> </div> <!-- 留言 结束 --> </div> <!-- 留言板 结束--> </el-tab-pane> <el-tab-