Vue入门demo

站长

2022年12月10日 22:54 · 阅读数 51

概要

使用Vue.js库，结合Element-ui库，实现一个表单添加，列表展示，支持搜索和分页的demo。 v2.x 版本

环境准备

Node环境安装

打开Node的官网地址nodejs.org/en/，选则稳定判断。如下图：
下载完成之后，解压，一路回车就可以了。
检查是否安装成功。打开cmd,运行下边的指令，输出安装的版本，表示安装成功。
```
node -v
```

Vue安装

官网给我们提供了CDN的方式和NPM的方式。我这里使用的NPM的安装方式。
```
npm install vue
```
检查是否安装成功。打开cmd,运行下边的指令，输出安装的版本，表示安装成功。
```
vue -V
```

webpack安装

 npm install -g webpack

vue-cli脚手架安装

npm install -g vue-cli

Vue-cli脚手架，提供了一系列的工具和库，方便我们快速的进行开发。具体功能包括单文件 Vue 组件，热加载，保存时检查代码，单元测试等。

因为vue-cli依赖webpack,所以安装webpack工具。

创建Vue项目

打开cmd运行以下命令。

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

执行完成后在浏览器中localhost:8080查看。如下图： Vue入门demo

引入Element-ui库

下载依赖
```
npm i element-ui -S
```
为什么要这样做呢？答案
在项目src/main.js，中使用。如下代码：

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Element-ui快速上手，我在这里使用了全量引入。
结果如下，表明引入成功：

修改目录

form.vue 表单
list.vue 列表展示，包裹form.vue
index.vue 样式布局，包裹list.vue
App.vue 页面入口，包裹index.vue

Vue入门demo

list.vue页面

list页面用于列表的展示。支持删除、编辑等功能。

布局：el-card和el-divider
表格：el-table
组件：formData。是我们自己封装的一个组件。在这里你就要疑问了，什么是组件？哪里来的？
方法解读： createForm(): 打开弹窗。这里用了Vue中的**$refs**属性。戳这里。用于获取子组件，提供的方法或者属性。

<template>
  <div class="list">
    <el-card shadow="hover">
      <el-button type="primary" @click="createForm">新 增</el-button>
    </el-card>
    <el-divider></el-divider>
    <el-card shadow="hover">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleDelete(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
            <!-- <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 表单添加 -->
    <form-data ref="form1" @submitForm="handleSubmitForm" />
  </div>
</template>

<script>
import formData from "./form.vue";
export default {
  name: "List",
  components: {
    formData,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    createForm() {
      this.$refs.form1.openDialog();
    },
    handleSubmitForm(val) {
      console.log(val);
      this.tableData.push(val);
    },
    handleDelete(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

form.vue页面

用于数据录入。

组件：el-dialog【弹出框】，el-form【表单】。
日期组件：el-date-picker。使用format指定输入框的格式；使用value-format指定绑定值的格式。value-format="yyyy-MM-dd" 日期格式
这里遇到一个问题：问题描述,控制台报错如下：
解决方案：解决控制台Prop being mutated: "placement"报错
方法：$emit();父子组件通信的一种方式。戳这里

<template>
  <div class="form">
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <el-input type="textarea" v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">立即创建</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "FormData",
  data() {
    return {
      dialogFormVisible: false,
      form:{},
    };
  },
  methods:{
    initForm() {
      return {
        name: "",
        date: "",
        address: "",
      }
    },
    openDialog() {
      this.form = this.initForm();
      this.dialogFormVisible = true;
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    submitForm() {
      this.$emit('submitForm', this.form);
      this.closeDialog();
    },
    getFormData() {
      return this.form;
    }
  }
};
</script>

最终效果

Vue入门demo

总结

我们完成一个基本的添加、展示、删除的功能。
Element-ui,是一个傻瓜式的UI框架，很容易上手。
Vue.js库，需要们先了解基本功能。如：对于表单的操作，表单：v-model等等，最基本的指令。内置指令总结组件和插件。
组件: 依据不同的需求，划分为不同的块。组件基础
通信：父子组件通信，兄弟组件。组件通信

转载自:https://juejin.cn/post/7136897589772812319