天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
两水夹明镜，双桥落彩虹。
人烟寒橘柚，秋色老梧桐。
——《秋登宣城谢脁北楼》
文章目录
Node.js的下载、安装和配置
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏
Vue入门之reactive、ref、v-bind
文末附本文所有示例代码的下载地址以及基于vite构建vue3的项目demo地址
1. Vue语法简介
本篇基于Vue官网最新版3.4.31对应教程编写，官网教程地址：Vue官网互动教程
本篇基于Vite创建的Vue3项目进行实例演示（基于Vue CLI创建的Vue3和Vue2也可参考）
参考：Vue3入门之创建vue3的单页应用(vite+vue)
在Vue项目中，主页代码主要在App.vue主组件中编写
在App.vue文件中，文件内容结构可分为三部分：
script标签、template标签、style标签
单文件组件SFC（Single-File Component），是一种可复用的代码组织形式。
单文件组件是将HTML、CSS、JavaScript封装在.vue文件中。
1.1 script setup标签
在App.vue文件中，script标签变成了以script setup开头、以script结尾的标签
该部分主要还是JavaScript代码的编写，不过包含了一些模块、组件、函数的引入
1.2 template标签
在App.vue文件中，template标签用于主要视图模块代码的编写，可以把它当做之前在html中的body标签，用于按钮、div块、文本、列表等的代码编写位置
1.3 style scoped标签
在App.vue文件中，style标签变成了以style scoped开头、以style结尾的标签
该部分内容就是页面样式的编写，与原来html中style标签一样
接下来开始是基础语法的演示部分
以下实例的演示都在App.vue主组件中进行，分别在各标签中实现代码即可
2. reactive()和ref()
声明式渲染（对象和变量的声明）
能在改变时触发更新的状态被称为响应式的，Vue中使用reactive() API来声明响应式状态
reactive()只适用于对象（包括数组和内置类型）
ref()则可以接受任何值类型，ref会返回一个包裹对象，并在.value属性下暴露内部值
在script setup标签中生命的响应式状态，在template模板标签中可直接使用。
双层花括号{{}}中的ref变量无需使用.value，会自动解包。
双层花括号{{}}中不仅可以使用变量，还可以使用js语法代码。
2.1 script setup
script setup标签内的代码
// 1. 声明式渲染，对象和变量的声明（reactive()和ref()）
import { ref,reactive,computed, onMounted, watch } from 'vue'
// reactive() 对象声明API，创建对象
const counter = reactive({
count:0
})
console.log(counter.count)
counter.count++
// ref() 变量声明API， 可接受任何类型，会返回一个包裹对象，在.value属性下暴露内部值
const message = ref('hello')
console.log(message.value)
message.value = 'Changed libai sssss'
// 在组件<script setup>块中声明的，可在模板<template>中直接使用
2.2 template
template标签内的代码
<!-- 1. -->
<div id="d-count">
<h2>1. 声明式渲染，对象和变量的声明（reactive()和ref()）</h2>
<button id="btn-count" @click='counter.count++'>{{ counter.count }}</button>
<br>
{{counter.count}}
<p>{{counter.count}}</p>
<!-- 在花括号中的内容可以是js的表达式 -->
<button type="text" id="btn-js">{{message.split(" ").reverse().join("")}}</button>
</div>
<br>
<br>
<br>
2.3 style scoped
style scoped标签内的代码
/* 1. */
#btn-count{
height: 50px;
width: 400px;
text-align: center;
background-color: aqua;
font-size: 30px;
}
#btn-js{
height: 50px;
width: 400px;
text-align: center;
background-color: salmon;
font-size: 30px;
}
2.4 页面效果
控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果
3. v-bind
Attribute（属性）绑定动态值
Vue中，mustache语法（双大括号）只能用于文本插值，如何插入动态值
可使用v-bind为attribute绑定一个动态值，如v-bind:id=“v1”
v-bind简写方式使用冒号加绑定的属性名和属性值，如:id=“v1”
3.1 script setup
script setup标签内的代码
// 2. Attribute绑定，attribute绑定一个动态值 使用v-bind:属性="值"，还有一个简写用法，就是将v-bind省略，以:开头
const titleClass = ref('title')
3.2 template
template标签内的代码
<!-- 2. -->
<div id="d-vbind">
<h2>2. Attribute绑定</h2>
<h1 id="h-class" v-bind:class="titleClass">make me green</h1>
<!-- <h1 :class="titleClass">make me green</h1> -->
</div>
<br>
<br>
<br>
3.3 style scoped
style scoped标签内的代码
/* 2. */
#h-class{
height: 50px;
width: 400px;
text-align: center;
background-color: darkmagenta;
font-size: 25px;
}
3.4 页面效果
控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果
4. 代码示例
以上示例的代码已打包上传到CSDN资源库，可自行下载获取示例代码
下载地址：Vue reactive ref v-bind 语法示例演示代码
5. 项目demo
本文示例代码都是基于vite构建的vue3项目编写，项目demo也已上传CSDN资源库
下载地址：Vue 基于vite构建vue3项目 以及基础语法演示
下载后如想正常运行项目，需先有node环境，可根据文章开始的链接进行下载安装node环境，以及配置node环境变量
感谢阅读，祝君暴富！
