Vue.js 3 没有组件的实例

发布于06月21日

在Vue 2中，可以创建不带组件的react 实例，如下所示:

var vue = new Vue({
    el: '#root',
    data: { /*... */ },
    methods: { /* ... */ }
})

事实上，这是Vue 2文档开始时的基本使用模式.

我认为这是向现有DOM元素添加react 性的一种非常优雅的方式，并且创建的实例很容易通过编程进行操作.Vue 3也有类似的版本吗？

使用CDN

// 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 (with template)

// 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>

使用CLI

Steps

1. Install packages by npm

2. Create your app

3. Make "production" code (skip if it's need same project)

4. Use your vue app (implement another project or use in same project)

Example

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')