<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello world</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <style> .red { color: red; } .green { color: green; } </style></head><body><div id="root"></div></body><script> const app = Vue.createApp({ data() { return { classString: 'red', classObject: { red: true, green: true }, classArray: ['red', 'green', {brown: true}] } }, template: ` <div :class="classString">Hello World <demo class="green"/> </div> `, }); app.component('demo',{ template: ` <div :class="$attrs.class"> one </div> <div> two</div> `, }) const vm = app.mount('#root'); //vm 是vue实例 应用的根组件 console.log(vm);</script></html><script setup></script><script setup></script>控件注册(Vue 全局组件注册 app.component)
