Vue基础学习笔记(一)

整体认识Vue3项目

1、创建Vue3工程

前置:NodeJS版本在18.0以上

使用官方脚手架创建Vue工程:

npm create vue@latest
#然后根据提示选择相关的组件

启动项目:

npm install #安装相关依赖
npmm run dev #运行项目

Tips:

1. 所有的功能组件都可以在后续手动添加
2. npm install之前可以尝试配置国内镜像，拉取会快一点npm config get registry https://registry.npmmirror.com

2、主要工程结构

建议使用vscode进行开发，原因是官方提供了辅助开发插件：vue(offcial)

• 典型的vue项目，都是在index.html这个单页面中形成各种交互，也就是所谓的SPA
• vue3的核心是通过createApp函数创建一个应用实例，在这个实例中创建各种应用。
• 每一个vue文件就是页面当中的一个组件，可以嵌套使用
• vue组件分为<template>页面模块，<script>脚本模块和<style>样式模块三个部分

数据双向绑定

双向绑定是vue最为核心的内容，简单理解就是<template>中的页面数据和<script>中的脚本数据进行绑定， 其中任何一个数据发生了变化，另外一个数据也随之发生变化。

因此能实现让 UI 自动随着数据变化而更新，用户输入也能反向影响数据，非常适合开发交互性强的应用。

Vue 使用 v-model 指令实现双向绑定。

一个简单例子:

<template>
  <input v-model="name" />
  <p>你好，{{ name }}</p>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('小明')
</script>

其中ref是Vue3中用于创建响应式数据的函数，返回一个可以自动追踪变化并更新UI的对象

然后通过v-model实现了输入框和name的双向绑定。

其中{{name}}是Vue模板语法中的插值表达式，用于在HTML中显示JS的数据，也就是会将这里面的表达式求值然后渲染成结果。

运行结果：