在Vue 2中，可以创建一个没有组件的响应式示例，如下所示：
var vue = new Vue({ el: '#root', data: { /*... */ }, methods: { /* ... */ } })
事实上，这是Vue 2文档开始的基本使用模式。我认为这是向现有DOM元素添加React性的一种非常优雅的方式，并且创建的示例易于编程操作。在Vue 3中有等价的吗？
7fyelxc51#
// CDN Vue Import const { createApp, ref } = Vue const app = createApp({ setup() { const msg = ref("hello world") return { msg } }, }).mount('#app')
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script> <div id="app"> <div>{{ msg }}</div> <input v-model="msg" /> </div>
// CDN Vue Import const { createApp, ref } = Vue const app = createApp({ setup() { const msg = ref("hello world") return { msg } }, template: ` <div>{{ msg }}</div> <input v-model="msg" /> ` }).mount('#app')
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script> <div id="app"></div>
import { createApp, ref } from 'vue' const app = createApp({ setup() { const msg = ref("hello world") return { msg } }, template: ` <div>{{ msg }}</div> <input v-model="msg" /> ` }).mount('#app')
<div id="app"></div>
In-DOM根组件模板- Vue.js文档多应用示例- Vue.js文档
1条答案
按热度按时间7fyelxc51#
使用CDN
使用CDN（带模板）
使用命令行
步骤
1.通过npm安装包
2.创建应用
3.制作“生产”代码（如果需要相同的项目，跳过）
4.使用你的vue应用（实现另一个项目或在同一个项目中使用）
示例
更多信息
In-DOM根组件模板- Vue.js文档
多应用示例- Vue.js文档