vue2 学习

1为什么项目启动时需要先npm install？

npm 会找到项目根目录下package-json文件下载相关依赖，并且安装node.js，相当Java的JDK，用于运行JS代码。

vue标签含义

1、 <el-button :logding="buttonLoading" type="primary" @click="submitForm">确 定</el-button>   
<!-- 1，logding属性=true 会一直现在转圈圈显示状态。 2.buttonLoading属性=ture,还不知道干甚用。2，submitForm是method -->

Vue 组件中，export default {} 中组件内容

name：组件的名称，用于调试和错误提示。

components：组件依赖的子组件列表。

props：组件的属性列表，用于接收父组件传递过来的数据。

data：组件的数据对象，用于存储组件的内部状态。
　　

　　　　data() {
  　　　　return {
    　　　　buttonLogding: false,
    　　　　//遮盖层不到是啥
    　　　　loading: true,
    　　　　ids: [],
    　　　　//用在修改按钮中，非单个禁用  下面选项框中有对single值做判断， if（！== 1）{true}true为不可一操作
    　　　　single: true,
    　　　　//用在删除按钮中 非多个禁用 也不知道嘛意思
    　　　　multiple: true,
    　　　　//展示搜素条件
    　　　　showSearch: true,
    　　　　// 总条数
    　　　　total: 0,
    　　　　// 主体信息表格数据
    　　　　equipmentList: [],
    　　　　// 弹出层标题没卵用
    　　　　title: "",
    　　　　// 是否显示弹出层 这里选择弹出，每次点开会弹出页面
    　　　　open: false,
    　　　　queryParams: {
      　　　　pageNum: 1,
      　　　　pageSize: 10,
      　　　　equipmentName: undefined,
      　　　　createdTime: undefined,
      　　　　departmentId: undefined,
      　　　　workingStatus: undefined,
      　　　　healthStatus: undefined,
      　　　　healthScore: undefined,
    　　　　},
    　　　　form:{},
    　　　　rules: {
      　　　　// <el-form ref="form" :modal="form" rules="rules" lable-width="80px"> 上面添加修改的时候加认证标签
      　　　　equipmentName:[{required:true, message:"设备名称不能为空",trigger: "blur"}],
      　　　　createdTime: [{required: true, message: "设备名称不能为空", trigger: "blur"}],
      　　　　departmentId:[{required:true, message:"设备名称不能为空",trigger: "blur"}],
      　　　　workingStatus:[{required:true, message:"设备名称不能为空",trigger: "blur"}],
      　　　　healthStatus:[{required:true, message:"设备名称不能为空",trigger: "blur"}],
      　　　　healthScore:[{required:true, message:"设备名称不能为空",trigger: "blur"}],
    　　　　}
  　　　};
　　},

computed：计算属性列表，用于根据组件的数据对象计算出新的衍生数据。

watch：监听属性变化的列表，用于在属性变化时执行一些操作。

methods：组件的方法列表，用于定义组件的行为。

created：组件创建时执行的方法。

mounted：组件挂载到 DOM 上时执行的方法。

updated：组件更新时执行的方法。

destroyed：组件销毁时执行的方法。

3，button按钮的使用

<el-row :gutter="10" class="mb8">
  <el-col :span="1.5">
    <el-button
      type="success"

<!--

"default"：默认类型，通常用于普通操作按钮。
"primary"：主要类型，通常用于重要操作按钮。
"success"：成功类型，通常用于表示操作成功或者确认操作按钮。
"info"：信息类型，用于表示提示信息或者帮助按钮。
"warning"：警告类型，用于表示警告信息或者危险操作按钮。
"danger"：危险类型，用于表示危险操作或者删除操作按钮。























-->
      plain
      icon="el-icon-edit"
      size="mini"
      :disabled="single"  

<!-- :disabled="single"   single=true 表示至少有一个选项才能按键 -->
      @click="handleUpdate"
      v-hasPermi="['system:department:edit']"
    >修改
    </el-button>
  </el-col>
  <el-col :span="1.5">
    <el-button
      type="danger"
      plain
      icon="el-icon-delete"

<!--表示当前按钮会显示一个名为 "el-icon-delete" 的图标。这里会显示一个垃圾箱 -->
      size="mini"
      :disabled="multiple"

<!-- :disabled="multiple"   multiple属性=true 表示非多个禁用，没选择则禁用
 -->
      @click="handleDelete"
      v-hasPermi="['system:department:remove']"
    >删除
    </el-button>
  </el-col>

 4,设置表单背影为#003C9E,字体颜色#FFF

<el-table v-loading="loading" :data="equipmentList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="105" align="center"/>

5，<span>的标签的作用：标识文本中的一小部分或者相邻内容，比如一段话中“<span>",中间是不同样式，就可以用<span>的。设备两个<span>间距可以使用<span style=“margin-left：20px”>

6获取当前时间

1，直接显示时间：<span>当前时间：{{ new Date().toLocaleString() }}</span>
2.根据年月日格式显示:  <span>当前时间：{{ formatDate(new Date()) }}</span>
<javascript>
methods: {
  formatDate(date) {
    const options = {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      weekday: 'long',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      timeZone: 'Asia/Shanghai'
    };
    return new Intl.DateTimeFormat('zh-CN', options).format(date);
  }
}

 7，页面获取用户参数，可以设置一个全局变量js.需要使用时候从js中获取。使用<javascript>conputed中获取例如如下格式（这个不全面，不知道..mapGetters是怎么来的，不知道getters.js数据怎么来的）

1，vue中的使用 computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'

    ]),

getters.js中的内容
onst getters = {
  sidebar: state => state.app.sidebar,
  size: state => state.app.size,
  device: state => state.app.device,
  dict: state => state.dict.dict,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  introduction: state => state.user.introduction,
  roles: state => state.user.roles,
  permissions: state => state.user.permissions,
  permission_routes: state => state.permission.routes,
  topbarRouters:state => state.permission.topbarRouters,
  defaultRoutes:state => state.permission.defaultRoutes,
  sidebarRouters:state => state.permission.sidebarRouters,
}
export default getters

8，无法获取页面数据，无法保存更新都是启动的问题，莫名其妙