// ==UserScript== // @name 随机生成一句话 // @namespace http://tampermonkey.net/ // @version 0.1 // @description 随机生成一句话，用来学习脚本中使用vue。以及如何调用接口 // @author You // @match *://*/* // @icon https://www.google.com/s2/favicons?domain=tampermonkey.net.cn // @grant unsafeWindow // @run-at document-start // @grant GM_addStyle // @connect api.szfx.top // @grant GM_xmlhttpRequest // ==/UserScript== // 引入vue3.js let script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.src = "https://cdn.jsdelivr.net/npm/vue@next"; // 引入element,这个样式一会显示一会不显示，很迷，所以我没用，这里记录一下。到时候什么问题再说 document.documentElement.appendChild(script); let link= document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.href= "https://unpkg.com/element-plus/dist/index.css"; document.documentElement.appendChild(link); let elscript= document.createElement('script'); elscript.setAttribute('type', 'text/javascript'); elscript.src = "https://unpkg.com/element-plus"; document.documentElement.appendChild(elscript); window.onload=()=>{ let text=`

` var el=document.createElement('div') el.innerHTML=text; document.body.append(el) const App = { data() { return { input: "", textContent:"嗨嗨嗨" }; }, methods: { // 这里注意一下this的指向,注意一下就行。最好直接把里面写成箭头函数 // onload是回调函数，指向的应该是关于xhr的东西 search(){ console.log(this); let that = this; GM_xmlhttpRequest({ method: "GET", responseType: "json", url: "https://api.szfx.top/yiyan", onload: function (xhr) { console.log(xhr); if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); console.log(this); that.textContent = xhr.responseText; } else { console.log("获取数据失败"); } }, }); } } }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); } GM_addStyle(` #app { position: absolute; top: 0vh; right: 10vw; background: #fb7d7d; width: 220px; height: 200px; z-index:999; } .search input { height:30px; } `)