Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。
刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。
Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：
const app = Vue.createApp({ /* 根组件选项 */ })传递给 createApp 的选项用于配置根组件。
应用实例必须在调用了 .mount() 方法后才会渲染出来，.mount()方法接收一个"容器"参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
<div id="app"></div>app.mount('#app')一个简单的实例：
Vue.createApp(HelloVueApp).mount('#hello-vue')createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。
一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。
接下来我们从Hello Vue!!的代码开始学起。
Vue 3.0 实例
<div id="hello-vue" class="demo"> {{ message }} </div><script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } }Vue.createApp(HelloVueApp).mount('#hello-vue') </script>
尝试一下 »
点击 "尝试一下" 按钮查看在线实例
以上实例中，我们先在 HTML 页面中引入 Vue 的 JS 文件：
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>HTML 页面中有一个 div 元素:
<div id="hello-vue" class="demo"> {{ message }} </div>mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。
{{ }} 用于输出对象属性和函数返回值。
{{ message }} 对应应用中message的值。
根组件模板
根组件的模板通常嵌入在组件定义中，不过也可以通过直接在挂载点的容器内定义模板来单独指定。
实例
<div id="app">
<button @click="count++">{{ count }}</button>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const count = ref(0);
function increment() {
count.value++;
};
return { count, increment };
}
});
app.mount('#app')
</script>
尝试一下 »
当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。
代码说明：
使用
setup函数：在Vue 3中，组件的逻辑通常在setup函数中定义。这里我们使用setup函数来定义响应式数据count和方法increment。使用
ref：在setup函数中，我们使用ref来创建响应式数据count。定义
increment方法：定义一个increment方法来增加count的值。返回响应式数据和方法：在
setup函数中返回count和increment，这样它们就可以在模板中被访问和使用。
data 选项
data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
实例
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count) // => 4
document.write("<br>")
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 反之亦然
vm.$data.count = 6
document.write(vm.count) // => 6
尝试一下 »
以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。
方法
我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。
以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：
实例
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向该组件实例
this.count++
}
}
})
const vm = app.mount('#app')
document.write(vm.count) // => 4
document.write("<br>")
vm.increment()
document.write(vm.count) // => 5
