第一个Vue应用

引入：挂载函数 .mount('#app')

函数中间是类似css的标签写法

这个方法是存在于vue里的

<div id="app">
	<input v-model="message" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue
  //结构函数结构
  
  const appObj = {
    data() {
      return {
        /*在没有挂载之前，这里只是一个对象中间的方法中的数值，
        在挂载之后，就会变成一个响应式的变量初始值*/
        message: 'Hello Vue!'
      }
    }
  }
  
  createApp(appObj).mount('#app')
</script>

文本插值

<span>Message: {{ msg }}</span>

响应式变量

const appObj = {  
  data() {  
    return {  
      inputText: "",  
    };  
  },  
};

响应式组合

将普通js对象传给reactive,Vue 就会在底层对它进行包装,当这个对象的属性发生变化时，Vue 会自动察觉到，并立刻同步更新页面上所有用到该属性的 UI 视图。

import { reactive } from 'vue'

// 创建一个响应式状态
const state = reactive({
  count: 0,
  username: '张三',
  layout: []
})

// 在函数中直接修改，视图会自动刷新
function increment() {
  state.count++ 
}