[問題] 取代jQuery的ajax元件load()的方法

看板Web_Design作者chenjoe (MAKOTO)時間7年前 (2017/10/29 19:01)推噓0(0推 0噓 10→)

留言10則, 5人參與討論串1/1

從開始研究網頁設計以來一直都是用jQuery來處理JS的問題只是一直有呼聲說jQuery已經落伍該被淘汰了,於是最近開始研究Vue.js框架 Vue.js的設計理念跟jQuery差很大,但只要習慣了就會發現很方便只是在ajax的部分到目前為止我還是覺得jQuery還是最好用的例如下面的例子,這是一個利用jQuery製作的導覽列--- [index.html] ... <div> <nav> <li> <div>JS應用範例</div> <ul> <li><a id="Calculator">計算機</a></li> </ul> <div>jQuery練習</div> <ul> <li><a id="JSON">JSON資料處理</a></li> </ul> <div>PHP整合應用</div> <ul> <li><a id="SingUp">註冊</a></li> <li><a id="Login">登入</a></li> <li><a id="reCAPTCHA">Google驗證</a></li> <li><a id="get_client_ip">取得客戶端IP</a></li> </ul> </li> </nav> <div id="content"> </div> </div> <script> $(function () { // alert("ready event!"); $("li > a").click(function(e){ var url; switch(e.target.id){ case "Calculator": url = "./_page/calculator.html"; break; case "JSON": url = "./_page/json.html"; break; case "SingUp": url = "./_page/singup.html"; break; case "Login": url = "./_page/login.html"; break; case "reCAPTCHA": url = "./_page/captcha.html"; break; case "get_client_ip": url = "./_page/get_client_ip.html"; break; } //使用load方法將取得的頁面資料渲染到div上 $("#content").load(url); }); //End click }); //End jQuery main </script> 然後下面我打算用Vue.js的方式去取代--- ajax方面使用Vue.js 2官方推薦的axios插件 [index.html] <head> <meta charset="UTF-8"> <script src="" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <script src="" rel="nofollow">https://unpkg.com/axios/dist/axios.min.js"></script> <title>Vue.js練習</title> </head> <body> <div id="main"> <nav @click="navigate"> <li> <div>JS應用範例</div> <ul> <li><a id="Calculator">計算機</a></li> </ul> <div>jQuery練習</div> <ul> <li><a id="JSON">JSON資料處理</a></li> </ul> <div>Vue.js練習</div> <ul></ul> <div>PHP整合應用</div> <ul> <li id="SingUp">註冊</li> <li id="Login">登入</li> <li id="reCAPTCHA">Google驗證</li> <li id="get_client_ip">取得客戶端IP</li> </ul> </li> </nav> <div v-html="content">  </div> </div> <script> var vue = new Vue({ el: '#main', data: { content: "請選擇左邊項目" }, methods: { navigate: function (e) { var url,data; switch (e.target.id) { case "Calculator": url = "page1.html"; break; } axios.get(url) .then(function (response) { data = response.data; }) .catch(function (error) { }); //將利用axios插件的get取得的網頁資料指定到content上 this.content = data; } } }) </script> </body> </html> 結果撈回來的資料完全沒辦法像用$jQuery.load()方法一樣連css效果跟JS程式碼一起正常運作,請問有什麼方法可以解決這個問題嗎? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 175.181.97.146 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1509274876.A.EAF.html

→

pop0030

10/29 21:23, 7年前 , 1^F

10/29 21:23, 1^F

→

pop0030

10/29 21:31, 7年前 , 2^F

10/29 21:31, 2^F

不好意思,我琢磨這句好久一直搞不懂意思,可以麻煩大大講解得具體一點嗎?謝謝 ※ 編輯: chenjoe (175.181.97.146), 10/29/2017 23:35:09

→

dannypsnl

10/29 23:39, 7年前 , 3^F