jsp项目使用vue.js

直接上代码：

引入vue.js和axios.js(主要是发送请求的)

<script type="text/javascript" src="${ctxf }/js/vue.min.js"></script>
<script type="text/javascript" src="${ctxf }/js/axios.min.js"></script>

添加dom节点commentApp

 <div id="commentApp">

                        <textarea id="commentCont" class="form-control" placeholder="请输入评论"></textarea>

                        <button type="button" class="btn btn-primary pull-right"  @click="subComment" ${empty loginU?'disabled':''}>评论</button>




                        <p style="margin-top: 50px;">评论（{{total}}）</p>
                        <!-- 左对齐 -->
                        <div class="media" v-for="(t,i) in li">
                            <div class="media-left">
                                <img decoding="async" :src="t.faceimg" class="media-object" style="width:60px;height: 60px;border-radius: 50%">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">{{t.nickname}}
                                    <button @click="delComment(t,i)" v-if="uid==t.uid" class="btn btn-danger btn-sm pull-right"><i class="fa fa-trash"></i>删除</button>
                                </h4>
                                <p style="word-wrap: break-word; word-break:break-all ">{{t.cont}}<br><small>评论时间：{{t.cts}}</small></p>
                                <hr>
                            </div>
                        </div>
                        <p @click="getCommentPage" style="cursor: pointer;text-align: center;">{{more}}</p>
                </div>

使用

//评论----------------------------
    let cv= new Vue({
        el: '#commentApp',
        data: {

            more:'评论加载中...',
            uid:'',
            li: [ ],
            total:0,
            query:{
                pageNo:1,
                pageSize:10,
                sid: ${a.id}  ,
            }


        },
        methods:{
            delComment(t,i){
                let url='${ctx}/lv/scenicComment/delajax?id='+t.id;
                axios.post(url) .then(function (res) {
                    cv.li.splice(i,1);

                });
            },
            subComment(){
                let c=$('#commentCont').val();
                if(c==''){
                    alert('请输入评论');return;
                }
                if(c.length>250){
                    alert(' 评论250字以内');return;
                }
                let url='${ctx}/lv/scenicComment/save?sid='+this.query.sid+"&cont="+c;
                axios.post(url) .then(function (res) {
                    cv.li.unshift(res.data.obj);
                    $('#commentCont').val('')
                });
            },
            getCommentPage(){
                this.more='评论加载中...';
                let url='${ctx}/lv/index/scenicCommentpage?sid='+this.query.sid+"&pageNo="+this.query.pageNo;
                axios.post(url ) .then(function (res) {
                    console.log(res)
                    cv.li=cv.li.concat(res.data.obj.list);
                    cv.total=res.data.obj.total;
                    if(res.data.obj.list.length==0){
                        cv.more='暂无评论';return;
                    }
                    cv.query.pageNo=cv.query.pageNo+1;
                    cv.more='点击加载更多评论...';

                });

            },
        },
        mounted(){
            this.getCommentPage();
            this.uid=$('#uid').val();
        }
    })

注意：使用axios传参需要用get的方式拼接参数?xxxx=xx&xx=xx,否则传不过去，具体原因没细究