【学习笔记06】脚手架的安装和使用

---

一、建立脚手架项目

1、搭建脚手架项目

• npm init vue@latest
• npm run dev （启动开发环境项目）
• npm run build （打包）

2、项目结构

3、单文件组件（.vue)

4、todolist的案例

• 删除App.vue的所有内容
• 删除components的所有文件
• 在components下面新建一个文件夹TodoList.vue

4.1 案例效果

4.2 代码实现

二、数据的增删改查

1、案例要求

1. 实现页面布局
2. 将数据列表抽离成一个单独的组件
3. 将添加表单所在模态框抽离成一个单独的组件
4. 源代码：https://gitee.com/zhong-qing-wang/list.git

2、效果图

3、代码实现

App.vue

	<template>
	  <div>
	    <MainLayoutVue></MainLayoutVue>
	  </div>
	</template>
	
	<script>
	import MainLayoutVue  from './components/MainLayout.vue';
	export default {
	  components:{
	    MainLayoutVue
	  }
	}
	</script>
	
	<style scoped>
	</style>

MainLayout.vue

• template

<template>
    <div class="box">
        <div class="box1">
            <p>
                <input type="text" v-model="str" />
                <button class="Search" @click="kw = str">搜索</button>
            </p>
            <button class="addTo" @click="showDia">添加</button>
        </div>
        <hr>
        <table border="1">
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>内容</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in filterList" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.title }}</td>
                <td>{{ item.content }}</td>
                <td>
                    <button class="Revise" @click="edit(item)">修改</button>
                    <button class="del" @click="remove(item.id)">删除</button>
                </td>
            </tr>
        </table>
        <CustomDiaVue ref="dia" @addevt="receive" @modifyevt="editOk"></CustomDiaVue>
    </div>
</template>

• script

<script>
import CustomDiaVue from "./CustomDia.vue";
export default {
    components: {
        CustomDiaVue,
    },
    computed: {
        filterList() {
            //根据标题进行模糊搜索
            return this.list.filter((item) => item.title.includes(this.kw));
        },
    },
    data() {
        return {
            list: [
                { id: 1, title: '娱乐新闻', content: '娱乐新闻内容' },
                { id: 2, title: '娱乐新闻', content: '娱乐新闻内容' },
                { id: 3, title: '娱乐新闻', content: '娱乐新闻内容' },
            ],
            str: "", // 文本框输入的内容
            kw: "", //点搜索按钮后进行搜索的关键词
        };
    },
    methods: {
        remove(id) {
            //删除功能
            let index = this.list.findIndex((xm) => xm.id == id);
            this.list.splice(index, 1);
        },
        edit(item) {
            //对话框显示
            this.$refs.dia.flag = true;
            //对话框设置为修改状态
            this.$refs.dia.type = 2;
            //把修改的内容放到对话框里
            this.$refs.dia.title = item.title;
            this.$refs.dia.content = item.content;
            this.$refs.dia.id = item.id;
        },
        editOk(item) {
            //修改数据的方法
            //找到修改数据的下标
            let index = this.list.findIndex((xm) => xm.id == item.id);
            this.list[index].title = item.title;
            this.list[index].content = item.content;
        },
        showDia() {
            //this.$refs.dia找到子组件
            this.$refs.dia.flag = true; //打开添加对话框
        },
        receive(obj) {
            //父组件列表添加子组件传递过来的数据
            this.list.push(obj);
        },
    },
};
</script>

• style

<style scoped>
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #eeeeee;
}

.box {
    width: 1000px;
    height: 600px;
    border: 3px solid blue;
}

.box1 {
    display: flex;
    justify-content: space-between;
}

p {
    margin: 10px 0 20px 20px;
}

p>input {
    width: 250px;
    height: 30px;
    background-color: #fff;
}

.Search {
    height: 30px;
    border: 0;
    color: #fff;
    width: 30px;
    line-height: 30px;
    text-align: center;
    background-color: blue;
}

table {
    border-collapse: collapse;
    border: 1px solid #000;
    margin: 20px auto;
}

th,
td {
    width: 150px;
    text-align: center;
    height: 40px;
    font-size: 18px;
}

.addTo {
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 15px 20px 0 0;
}

.Revise,
.del {
    width: 40px;
    height: 30px;
    margin-top: 3px;
    text-align: center;
}

.Revise {
    margin-right: 5px;
}
</style>

CustomDia.vue

• template

<template>
  <div v-show="flag" class="Box">
    <h2 v-if="type===1">添加</h2>
    <h2 v-else>修改</h2>
    标题：<input type="text" v-model="title" /><br />
    内容：<input type="text" v-model="content" /><br />
    <button @click="add" v-if="type===1" class="judgment">确定</button>   
    <button @click="modify" v-else>确认修改</button>   
    <button @click="close" class="judgment">取消</button>
  </div>
</template>

• script

<script>
export default {
    data(){
        return {
            type:1, //1.添加功能 2.修改功能
            flag:false, //控制对话框显示隐藏
            id:-1, //添加或修改项目的id
            title:"",//添加或修改项目的标题
            content:"",//添加或修改项目的内容
        }
    },
    methods:{
        modify(){
           // 确认修改功能
           this.$emit("modifyevt",{
            id:this.id,
            title:this.title,
            content:this.content
           })
           this.close();
        },
        add(){
            this.$emit("addevt",{
                id:Date.now(),
                title:this.title,
                content:this.content
            })
            this.close();
        },
        close(){
            this.type=1;
            this.id=-1;
            this.title=""
            this.content=""
            this.flag=false //关闭对话框
        }
    }
}
</script>

• style

<style scoped>
.Box{
    width: 400px;
    height: 250px;
    margin: 0 auto;
    border: 2px solid blue;
    background-color: #fff;
}
.box:first-child h2{
    text-align: center;
    color: #fff;
    background-color: blue;
}
</style>

4、最终效果