指路Vue3文档：https://cn.vuejs.org/guide/introduction.html

了解main.js

main.js是Vue的入口文件，负责初始化Vue实例并挂载应用到HTML页面。
主要作用：

1. 创建实例：通过ml-search-more[createApp]函数（Vue3）或ml-search-more[newApp]函数（Vue2）创建根实例，并挂载到页面特定页面（如<div id="app">）
2. 配置插件与状态管理：集成Vue Router、Vuex等插件，管理路由、全局状态和依赖。
3. 挂载应用：将Vue实例渲染到页面指定DOM节点，实现用户界面交互。

import './assets/main.css'

// 每个vue应用都是通过 createApp 函数创建一个新的应用实例
import { createApp } from 'vue'
import { createPinia } from 'pinia'

// 根组件，从一个单文件组件中导入
import App from './App.vue'

import router from './router'

// 创建应用实例
// createApp API允许在同一个页面中创建多个共存的Vue应用，而且每个应用应该拥有自己的用于配置和全局资源的作用域。
const app = createApp(App)

app.use(createPinia())
app.use(router)

// 挂载应用，返回根组件实例非应用实例，.mount() 方法应该在所有配置和资源注册完成后被调用。
// 根组件实例与应用实例
// 1. 根组件实例是最顶层组件的实例
// 2. 根组件实例是应用中的一个具体组件的实例，而应用实例则是管理这个应用的所有资源和行为的中心对象，
// 包括配置、插件、全局属性方法等。它管理所有组件和他们之间的交互中心
app.mount('#app')

模板语法

1. 文本插值

使用双大括号（Mustache 语法），双大括号里面内容会被替换为相应组件实例中msg属性的值。msg属性改变时它也会实时更新

<div>This is a {{ msg }}</div>

data () {
    return {
      msg: 'msg',
    }
}

2. 插入 HTML

使用 v-html指令，将一段HTML代码渲染到元素

<div>
      using v-html directive:
      <span v-html="rawHtml"></span>
</div>

data () {
    return {
      rawHtml: '<i>这是斜体的文本</i>',
    }
}

3. Attribute 绑定

<div v-bind:id="dynamicId"></div>
<!-- 简写, v-bind可省略 -->
<div :id="dynamicId"></div>
<!-- 同名简写，当Attribute键值名相同时可简写(:id=id)，只在 Vue 3.4 及以上版本中可用 -->
<div :id></div>
<div v-bind:id></div>
<!-- 动态绑定多个值 -->
<div v-bind="objectOfAttrs">green</div>

data () {
    return {
      dynamicId: 1,
      objectOfAttrs:{
        id: 'container',
        class: 'wrapper',
        style: 'background-color:green'
      },
      id: 0,
    }
}

4. 使用表达式

仅在双大括号或v-开头的Attribute中使用

<div>{{ number + 1 }}</div>
<div>{{ ok ? 'YES' : 'NO' }}</div>
<div>{{ message.split('').reverse().join('') }}</div>
<div :id="`list-${id}`"></div>

data () {
    return {
       id: 0,
       number: 2,
       ok: '',
       message: `hello`,
    }
}

5. 调用函数

<div :id="getId()"></div>
<div>{{ getFormattedDate() }}</div>

methods: {
    getId () {
      return 'unique-id';
    },
    getFormattedDate () {
      // 返回格式化后的日期字符串
      return new Date().toLocaleDateString();
    }
  }

6. 动态参数

值为字符串或null，null表示显示移除该绑定
如要传给复杂的动态参数，推荐使用计算属性

<a v-bind:[attributeName]="url"> 模板语法 </a>
<!-- 简写 -->
<a :[attributeName]="url"> 模板语法 </a>
<button v-on:[eventName]="doSomething"> doSomething </button>
<!-- 简写 -->
<button @[eventName]="doSomething"> doSomething </button>

methods: {
    doSomething () {
      console.log('hello');
    }
  }