VUE 起步

Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：

const app = Vue.createApp({ /* 选项 */ })

在这里插入图片描述

data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数,
并以$DATA的形式存在组件实例中
在这里我倒是希望大家看看就行没有必要去过分纠结放图供看官老爷观看
在这里插入图片描述

方法

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象,如下列:

在这里插入图片描述
话不多说直接上源码大家可以直接测试有什么问题共同探讨一步一步来!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<div id="app" class="demo"></div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
Vue.createApp(HelloVueApp).mount('#hello-vue')

const app = Vue.createApp({
  data() {
    return { count: 6 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 6
document.write("<br>")
document.write(vm.count)       // => 6
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

// 
vm.increment()
document.write(vm.count) // => 7
</script>
</body>
</html>