vue v3.4.21
As of
This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/491401/1352637/vue.js
window.Vue.createApp({template: '<div>{{message}}</div>', setup: () => ({message: 'hello world'})}).mount('body')
配合[template_vue](https://greasyfork.org/zh-CN/scripts/491414-template-vue)脚本使用更加方便
以下是一个简单的例子:
// ==UserScript==
// @name vue example
// @namespace http://tampermonkey.net/
// @version 2024-04-01
// @description try to take over the world!
// @author You
// @match *
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// @require https://update.greasyfork.org/scripts/491401/1352636/vue.js
// @require https://update.greasyfork.org/scripts/491414/1352613/template_vue.js
// ==/UserScript==
const main = () => {
const {ref} = window.Vue;
window.TAMPERMONKEY_VUE_APP.template =
`<div style='display: flex;gap: 4px;'>
<button @click="count++">{{ count }}</button>
<button @click="sayHello">say hello</button>
</div>`;
window.TAMPERMONKEY_VUE_APP.setup = () => {
const count = ref(0);
return {
count,
sayHello() {
console.log('hello')
}
}
}
}
(function() {
'use strict';
main();
})();