基于springboot+vue的毕设学习（1）-vue

一、安装vue的步骤：

命令行中：

用管理员身份启动cmd

1. 创建项目：vue create springboot-vue-demo
2. 创建好之后：cd +项目名（TAB键补全），回车
3. 进入文件夹后：npm run serve ，启动
4. 按CTR+C，可以关闭当前项目
5. 打开IDEA, 配置启动。选择npm
6. 在package.json里面----serve中，加 --open。自动打开浏览器
7. 在项目下面安装element。管理员命令打开----》进入项目中----》vue add element-plus

二、src–文件介绍

1. assets—存放静态资源，图片，css, js
2. components----存放组件
3. router—写路由的位置
4. store—定义一些页面的变量。比如页面之间跳转时需要携带的参数，用户登录数据
5. views—视图存放位置
6. package.json—定义项目的依赖
   

运行vue–控制台运行

管理员打开cmd
C:\WINDOWS\system32>d:

D:>cd D:\Java项目文件夹\vueTest\springboot-vue-demo-master\vue

D:\Java项目文件夹\vueTest\springboot-vue-demo-master\vue>npm i

三、具体细节

VUE各个文件夹下面放的是什么：

• component--------- 存放组件
  • Aside.vue----- -侧边栏
  • Header.vue------导航栏
• App.vue----- 引入Aside,Header，全局样式
• main.js------ 配置，比如说国际化，引入echarts

1.双向数据绑定v-model

• 当数据发生变化的时候，视图也就发生变化

• 当视图发生变化的时候，数据也会跟着同步变化

• v-model是一个指令，可以实现数据的双向绑定，限制在 <input>、<select>、<textarea>、components中使用

2.v-on

• 用来绑定事件的
• 形式如：v-on:click 缩写为 @click;

3.v-if 使用场景

• 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
• 2- 进行两个视图之间的切换

4.v-for

• 用于循环的数组里面的值可以是对象，也可以是普通元素

• 不推荐同时使用 v-if 和 v-for

• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

5.template slot-scope=“scope”

template（模版） 在这里属于一个固定用法：

我们主要说一下这个scope是个什么东西，按照element上的提示：

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

我们可以理解为：tableData是给到table的记录集，scope是table内部基于tableData生成出来的，我们可以用Excel描绘一下

我们传进去的tableData，在table内部生成了类似于Excel的scope，因此，通过scope.row.date，我们就可以读取到每一行中的date。