Node.js安装

1. 检查是否已经安装 node -v
  如果显示：'node' 不是内部或外部命令，也不是可运行的程序，说明没有安装过。
  
  2. 直接官网下载： https://www.nodejs.com.cn/download.html 

    然后点击，傻瓜式安装即可。
    
 3. 安装完毕，打开cmd窗口，输入 node -v 可以看到对应的版本信息。

NPM

1. 首先检查是否已经安装完成， npm -v 

2. npm简单介绍；
  npm: node package manager, Node的包管理器。就是一个在线的超级巨大的可复用的代码包。
  功能：npm两个功能
  1. 在线平台仓库：可以认为就是一个超级大的仓库，我们也可以上传我们自己的包。
  2. 命令行工具：可以使用命令安装，更新，删除，管理各种包。
  
  npm 是 JavaScript 世界的基石，它通过模块化的思想极大地提升了开发效率。
  
  3. 配置淘宝镜像：
    npm install <package-name> --registry  https://registry.npmmirror.com/ 

    
    可以永久配置：
    npm config set registry https://registry.npmmirror.com/

Vue创建项目

 https://cn.vuejs.org/ 官网 


1. 创建Vue项目
npm create vue@latest
创建完项目：
cd vue-project
npm install
npm run dev

其实就已经启动起来整个项目了，总体还是非常简单的。
webstrom打开目录。非常简单。详细流程就不写了


2. 项目瘦身：
  App.vue中，只需要保留下面的一点内容就可以了。其他的应该知道怎么修改。
  <template>
    <RouterView />
  </template>

Vue3的基本语法

css的几个常见语法：
  加粗：font-weight： bold
        font-style:  italic
        text-decoration： underline
      
整体流程：导包--> 定义 --> 渲染/使用

0. Vue中的ref
  用于创建一个响应式的引用。
  1. ref是一个函数，接受一个内部值。，返回一个响应式的，可变的ref, 这个对象只有一个.value属性，指向内部值。
  2. 在《template》中，vue会自动解包，不需要用.value访问
  3. 在 《script setup》中，要使用.value访问和修改。


1. 差值表达式：
  {{ }}
  
2. v-model： 用来绑定数据。双向绑定数据。（重要：通常用来绑定用户的输入数据）
  <input type="text" v-model="inputData"/>
  const inputData = ref(10);
  
3. v-bind: 单向绑定，通常用来绑定属性类的。比如 src, 图片属性等
  <div :class="className"></div>    // 正常是 class='xxxx',没有冒号
  
4. v-if v-else
  <div>
    <h2>进行测试</h2>
    <input type="text" v-model="inputName">          
    <h3 v-if="inputName==='佩奇'">我是小猪佩奇</h3>               // 易错点：用三个等号
    <h3 v-else>我输入的不是小猪佩奇</h3>
  </div>
  
  
5. v-for的使用
  <div>
    展示key和value
    <div v-for="(item, index) in nameList">{{index}}, {{item}} </div>
  </div>
  
6. v-on 绑定事件  @
  鼠标移动，点击等事件，一般绑定button
  点击提交所有的信息到后端。
  
  
7. onMounted: 页面元素加载结束，执行操作

常见的vue组件

1. 文本输入框
  单行文本输入框： <input type='text' placeholder='单行文本'>
  多行文本输入框： <textarea placeholder='多行文本输入框'> </textarea>
  密码输入框：     <input type='password' placeholder='密码框'>

2. 选择器：
  单选：    
      <input type='radio' name='gender' value='male'>男
      <input type='radio' name='gender' value='female'>女
      
  多选：
      <input type='checkbox' name='sing'> 唱
      <input type='checkbox' name='dance'> 跳
      

3. 下拉框：
    普通下拉框：
      <select> 
        <option value='1'> 选项1 </option>
        <option value='2'> 选项2 </option>
      </select> 
      
     多选下拉框：
     <select multiple>
       <option value="1">选项1</option>
       <option value="2">选项2</option>
     </select>
       

4. 日期选择器：
    <date-picker v-model="selectedDate" />
    <time-picker v-model="selectedTime" />

实战：用上面的内容写一个用户输入的案例

<template>
<div>

  <h1 >学生基本信息</h1>
  <div class="baseInfo">
    <div>
      <label class="username">姓名 :</label> <input type="text" v-model="userInfo.username">
    </div>

    <label class="userpasswd">密码 :</label> <input type="password" v-model="userInfo.userpasswd"></input>
    <br>

    <label for="" class="usersex">性别 :</label>
    <!--    当多个单选框共享相同name时，用户只能选择其中一个，这是实现单选逻辑的基础-->
    <label for=""><input type="radio" name="sex" value="1" v-model="userInfo.gender"> 男</label>
    <label for=""><input type="radio" name="sex" value="0" v-model="userInfo.gender"> 女</label>

    <div>
      <label>出生日期：</label>
      <input type="date" v-model="userInfo.birthday">
    </div>

    <div>
      <label for="" >学院 :</label>
      <select name="college" id="" v-model="userInfo.college">
        <option value="">请选择</option>
        <option value="计算机科学与技术">计算机科学与技术</option>
        <option value="软件工程">软件工程</option>
        <option value="英语学院">英语学院</option>
        <option value="马克思学院">马克思学院</option>
      </select>
    </div>

    <div>
      <label for="">年级：</label>
      <select name="grade" id="" v-model="userInfo.grade">
        <option value="">请选择</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
      </select>
    </div>

    <div>
      <label for="" >兴趣爱好： </label>
       <input type="checkbox" name="hobby" value="1" v-model="userInfo.hobby"> 唱
       <input type="checkbox" name="hobby" value="2" v-model="userInfo.hobby"> 跳
      <label for=""> <input type="checkbox" name="hobby" value="3" v-model="userInfo.hobby"> rap</label>
      <label for=""> <input type="checkbox" name="hobby" value="4" v-model="userInfo.hobby"> 篮球</label>
    </div>

<!--    <div>-->
<!--      <label for="">参加的社团（多选）：</label>-->
<!--      <select name="clubs" v-model="userInfo.clubs" multiple size="4">-->
<!--        <option value="篮球社">篮球社</option>-->
<!--        <option value="音乐社">音乐社</option>-->
<!--        <option value="编程社">编程社</option>-->
<!--        <option value="舞蹈社">舞蹈社</option>-->
<!--        <option value="志愿者协会">志愿者协会</option>-->
<!--      </select>-->
<!--      <div style="font-size: 12px; color: #666; margin-top: 5px;">-->
<!--        提示：按住Ctrl键可以多选-->
<!--      </div>-->
<!--    </div>-->

    <button @click="submitForm">提交</button>
  </div>
</div>


</template>

<script setup>
// 引入Vue组件
import { ref } from 'vue'
const userInfo = ref({
  username: '',
  userpasswd: '',
  birthday: '',
  gender: '',
  college: '',
  grade: '',
  hobby: []
})

const submitForm = () => {
  console.log(userInfo.value)
}

</script>