Vue和element第四节,整体小demo测试

 我的笔记   2019-06-20 09:25   777 人阅读  1 条评论

一、新建项目

按照昨天那篇文章即可https://wdnote.com/post/710.html

这里是这次demo的源码

https://gitee.com/upyadong/vue-element-demo01.git

新建好项目,这是建好的项目目录层级

image.png



名称说明
build项目构建的一些代码
config开发环境的配置
node_modules一些依赖包
src源码,我们就在这个文件夹内写代码
static静态文件
.babelrcES6编译的一些配置
.editorconfig代码风格配置文件
.gitignoregit上传时忽略的一些文件,比如node_modules这个文
.postcssrc.js听说是转换CSS样式的
index.html入口页面
package-lock.json听说是更详细的package.json
package.json项目信息,项目名称,开发的依赖的记录等,一个JSON文件

打开package.json,找到devDependencies并在最后加上"element-ui": “^2.2.1”


image.png

打开main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)


image.png

components目录下新建people.vue

<template>
    <div>
        <el-form  label-width="80px" style="width: 500px;margin: 0 auto">
            <el-form-item label="姓名">
                <el-input v-model="newPeople.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="newPeople.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="newPeople.sex" placeholder="请选择">
                    <el-option label="男" value="nan"></el-option>
                    <el-option label="女" value="nv"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-col>
                    <el-date-picker type="date" placeholder="选择日期" 
                    v-model="newPeople.date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col>
                    <el-button @click="createPeople" type="success">创建人员</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" align="left" style="width: 500px;margin: 0 auto">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="date" label="生日"></el-table-column>
            <el-table-column label="操作"><el-button  @click="deletePeople(index)">删除</el-button>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: "People",
        mounted:function () {//挂载函数
            
        },
        methods:{
            createPeople:function () {
                this.dataList.push(newPeople);
            },
            deletePeople:function (index) {
                this.dataList.splice(index,1);
            }
        },
        watch:{
            people(val) {
                console.log("改变了people....")
            }
        },
        data:function(){
            return {
                newPeople: {
                    name: '',
                    age: null,
                    sex: '',
                    date:''
                },
                dataList:[{
                    name: '张三',
                    age: 20,
                    sex: 'nv',
                    date:'2019-09-01'
                }]

            }
        }
    }
</script>
<style scoped>

</style>


打开router.js,添加路由

image.png


访问http://localhost:8080/people可以看到表单和数据列表

image.png

最后对按钮加上相应事件,即可完成这个基本效果

<template>
    <div>
        <el-form  label-width="80px" style="width: 500px;margin: 0 auto">
            <el-form-item label="姓名">
                <el-input v-model="newPeople.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="newPeople.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="newPeople.sex" placeholder="请选择">
                    <el-option label="男" value="nan"></el-option>
                    <el-option label="女" value="nv"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-col>
                    <el-date-picker type="date" placeholder="选择日期" 
                    v-model="newPeople.date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col>
                    <el-button @click="createPeople" type="success">创建人员</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="dataList"  align="left" style="width: 500px;margin: 0 auto">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="date" label="生日"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  @click="deletePeople(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: "People",
        mounted:function () {//挂载函数
            
        },
        methods:{
            createPeople:function () {
                console.log(this.dataList);
                this.dataList.push(this.newPeople);
                this.newPeople =  {name: '', age: null, sex: ''}
            },
            deletePeople:function (index) {
                this.dataList.splice(index,1);
            }
        },
        watch:{
            people(val) {
                console.log("改变了people....")
            }
        },
        data:function(){
            return {
                newPeople: {
                    name: '',
                    age: null,
                    sex: '',
                    date:''
                },
                dataList:[{
                    name: '张三',
                    age: 20,
                    sex: 'nv',
                    date:'2019-09-01'
                }]

            }
        }
    }
</script>
<style scoped>

</style>

二、把数据存储在localStorage

我们在src内新建一个store文件夹,和App.vue、components同一个层级,在里面新建一个store.js,内容如下

const STORAGE_KEY = 'tabale-vuejs'//名字随便起
export default {//向往输出,以便组件接收
    fetch() {//我们定义的获取数据的方法
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY)
            || '[]')
    },
    save(items) {//我们定义的保存数据的方法
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
    }
}

getItemsetItem是window.localStorage的获取和保存数据的方法
我们用JSON.stringify和JSON.parse把数据转成字符串和解析,这样就方便我们写入tabledata
接下来我们添加新代码

我把people.vue复制一个新页面命名为people2.vue

image.png

然后router.js添加新路由

image.png

修改people.vue为

<template>
    <div>
        <el-form  label-width="80px" style="width: 500px;margin: 0 auto">
            <el-form-item label="姓名">
                <el-input v-model="newPeople.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="newPeople.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="newPeople.sex" placeholder="请选择">
                    <el-option label="男" value="nan"></el-option>
                    <el-option label="女" value="nv"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-col>
                    <el-date-picker type="date" placeholder="选择日期" v-model="newPeople.date" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col>
                    <el-button @click="createPeople" type="success">创建人员</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="dataList"  align="left" style="width: 500px;margin: 0 auto">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="date" label="生日"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  @click="deletePeople(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import Storage from '../store/store'//新添加,把刚写的localStorage导入
    export default {
        name: "People2",
        mounted:function () {//挂载函数
            
        },
        methods:{
            createPeople:function () {
                console.log(this.dataList);
                this.dataList.push(this.newPeople);
                this.newPeople =  {name: '', age: null, sex: ''}
            },
            deletePeople:function (index) {
                this.dataList.splice(index,1);
            }
        },
        watch:{//watch是vue的监听,一旦监听对象有变化就会执行相应操作
            //被监听的对象
            dataList: {
                handler(items) {
                    Storage.save(items)//新添加,监听对象变化后所做的操作,一个函数,保存数据
                },
                deep: true//深度监听,避免数据的嵌套层数太多,要使用深度监听,防止数据层级过多监听不到
            }
        },
        data:function(){
            return {
                newPeople: {
                    name: '',
                    age: null,
                    sex: '',
                    date:''
                },
                dataList:Storage.fetch()

            }
        }
    }
</script>
<style scoped>

</style>

访问http://localhost:8080/people2

image.png

f12在Application选项卡下找到刚才存的人员

image.png






我的笔记博客版权我的笔记博客版权
本文地址:https://wdnote.com/post/711.html
版权声明:本文为原创文章,版权归 我的笔记 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

 评论列表

  1. 今日新鲜事
    今日新鲜事  @回复

    文章不错非常喜欢