Vue 学习笔记 - 01

什么是Vue?

一款用于构建用户界面的JavaScript框架。

单文件组件

SFC(Single-File Components)

<script setup>
import {ref} from 'vue';
const count = ref(0);
</script>

<template>
<button @click="count++"> Count is {{count}}</button>
</template>

<style>
button {
font-weight:bold;
}
</style>

创建一个Vue应用

npm create vue@latest
cd <your-project-name>
npm install
npm run dev

//打包
npm run build

通过CDN使用Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

应用实例

每个Vue应用都是通过createApp函数创建一个新的应用实例。

import {createApp} from 'vue';
const app =createApp({
/*根组件选项*/
})

根组件

每个应用都需要一个根组件，其他组件将作为其子组件。单文件组件，可以从另一个文件中导入组件。例如：

import {createApp} from vue;
import app from './app.vue';

const app_=create(app);

挂载应用

应用实例必须在调用了.mount()方法之后才会渲染。该方法加收一个“容器”参数，可以是一个DOM元素或一个CSS选择器。

<div id="app"></div>
...
app.mount("#app");

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。

应用配置

应用实例会暴露一个.config对象允许我们配置一些应用级选项。例如定义一个应用及的错误处理器，用来捕获所有子组件上的错误：

app.config.errorHandler=(err)=>{
//处理错误
}

多个应用实例

createApp API允许在同一个页面中创建多个共存的Vue应用，且每个应用有自己的配置和全局资源的作用域。

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')