Vue3 的基础使用
时间: 2024-09-30 13:05:41 浏览: 16
Vue3是一款轻量级的前端JavaScript框架,它采用了MVVM(Model-View-ViewModel)架构模式。以下是Vue3的基础使用步骤:
1. **安装**:首先需要安装Vue CLI(命令行工具),可以使用npm或yarn进行安装:
```
npm install -g @vue/cli
```
2. **创建项目**:通过CLI初始化一个新的Vue3项目:
```
vue create my-project
```
3. **引入Vue**:在HTML文件中,添加`<script>`标签引入Vue库:
```html
<script src="path/to/vue.js"></script>
```
4. **配置组件**:Vue的核心是组件化开发,创建一个简单的组件如`App.vue`:
```html
<template>
<div>Hello, Vue!</div>
</template>
<script>
export default {
name: 'App'
}
</script>
```
5. **挂载组件**:在main.js中创建并挂载`App`组件:
```javascript
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
```
6. **数据绑定**:在模板中使用`v-bind`(简写为`:`)来绑定属性,如 `<p>{{ message }}</p>`,其中`{{ }}`是表达式插值。
7. **事件处理**:使用`v-on`(简写为`.on`)监听DOM元素的事件,例如`@click="handleClick"`。
8. **指令**:Vue还有一些预置指令,如`v-model`用于双向数据绑定。