Vue入门demo
站长
· 阅读数 17
概要
使用Vue.js库，结合Element-ui库，实现一个表单添加，列表展示，支持搜索和分页的demo。 v2.x 版本
环境准备
-
打开Node的官网地址nodejs.org/en/， 选则稳定判断。如下图：
-
下载完成之后，解压，一路回车就可以了。
-
检查是否安装成功。打开cmd,运行下边的指令，输出安装的版本，表示安装成功。
-
node -v
-
官网给我们提供了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查看。如下图：
引入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
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" 日期格式 -
这里遇到一个问题： 问题描述,控制台报错如下：
-
方法：$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>
最终效果
