web前端，傳統的jquery與vue結合，開發應用
阿新 • • 發佈：2021-07-15
習慣了vue的寫法或者習慣jquery，有時候想大膽的嘗試一下二者能不能結合使用，答案是可以的。
我們這裡都使用CDN引用，一起來看下效果吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Document</title> <style> ul li{ list-style: none; margin: 10px 0; color: darkcyan; cursor: pointer; } .left{ width: 10%; float: left; } .right{ width: 89%; float: right; } </style> </head> <body> <div id="app"> <div class="left"> <ul> <li v-for="item in list" :key="item.index" @click="selectVideo(item.data.content.data.playUrl)"> {{item.type}}</li> </ul> </div> <div class="right"> <video :src="videoSrc" controls="controls" width="100%" id="video" ref="video" autoplay> </video> </div> <!-- <button @click="getJqeryMethod">點選</button> --> </div> <script> function initData() { console.log("初始化資料"); var url="https://api.apiopen.top/videoCategoryDetails?id=14"; axios.get(url).then(function (data) { console.log(data); app.list = data.data.result; }) } $(function () { initData(); }) var app = new Vue({ el: "#app", data: { list: [{ name: "li", url: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" }, { name: "cui", url: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" }], videoSrc: "" }, methods: { getJqeryMethod() { console.log("獲取方法"); initData(); }, selectVideo(url) { this.videoSrc = url; } }, mounted() { this.getJqeryMethod() }, }) </script> </body> </html>