天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
树深时见鹿，溪午不闻钟。
------《访戴天山道士不遇》
文章目录
- Vue入门（基本语法、实例演示）
Node.js的下载、安装和配置
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏
Vue入门（基本语法、实例演示）
文末附本文所有示例代码的下载地址以及基于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. v-on
事件监听
使用v-on指令监听DOM事件，如v-on:click="add"
v-on的简写语法使用@，如@click="add"
触发的事件add需要在script setup标签中声明函数add()
4.1 script setup
script setup标签内的代码
// 3. 事件监听，使用v-on指令监听DOM事件，v-on也有一个简写语法省去v-on:，替换为@即可
const count2 = ref(0)
function increment(){
count2.value++
}
4.2 template
template标签内的代码
<!-- 3. -->
<div>
<h2>3. 事件监听</h2>
<button id="btn-increment" v-on:click="increment">count2 is :{
{ count2 }}</button>
</div>
<br>
4.3 style scoped
style scoped标签内的代码
/* 3. */
#btn-increment{
height: 50px;
width: 400px;
text-align: center;
background-color: seagreen;
font-size: 20px;
}
4.4 页面效果
控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果，点击绿色区域，即可实现数值累加效果
5. v-model
双向绑定
同时使用v-bind和v-on可以实现双向绑定
但为了更方便的使用，Vue中简化为v-model进行双向绑定的实现，此时可不用再写事件处理函数
如下进行了两种双向绑定的实现
5.1 script setup
script setup标签内的代码
// 4. 表单绑定
// 4.1 双向绑定 使用v-bind和v-on在表单的输入元素上创建双向绑定
const text = ref('')
function onInput(e){
// v-on 处理函数会收到原生DOM事件作为其参数
text.value = e.target.value
}
// 4.2 表单绑定 简化双向绑定，使用v-model，会同步数据，不用使用事件绑定了，（除文本类型外其余输入也可使用该方法，如多选框、单选框、下拉框等）
cons
原文链接: https://hanshan.blog.csdn.net//article/details/140429931