vue 页面

一、创建一个vue项目。

打开命令行：

1、npm init vite-app 项目名   //项目

2、npm i                                 //安装依赖包

3、npm rum dev                     //运行

二、vue项目的格式

<template>

//中间放内容 -- 可以是普通的HTML网页代码

//           或者是：<todoList :todolist="todoList"></todoList>    一个列表

//           或者是：<todoButton @changeActive="changeActive"></todoButton>  一个方法

</template>

<script>

//1、引用多个vue文件    import todoList from "./components/todoList.vue";

export default{

        name:'文件名',

        data(){

                return{

                        //放数据  可以是数组，可以是单个数据

                }

        },

        computed:{

                //监听      放自定义方法，方法名是@xxx的值。

        },

        emits:["方法名"],   //提供给父组件用

        methods:{  //放方法

                方法名（参数）{

                        实现的方法

                }

        },

        components:{

                todoList,     //放组件（导入的vue文件）

        },

        props:{

                /放从App.vue父组件传来的数据

        }

}

</script>

<style scoped>

//放样式

</style>

三、vue项目示例

1、首先将‘bootstrap.min.css’样式表放入assets文件夹下，然后在main.js中导入  

import './assets/bootstrap.min.css'

2、编写App.vue

App.vue
<template>
    //3、引用组件，将内容或功能显示在页面上
    <todoList></todoList>
</template>

<script>
    //1、导入vue文件
    import todoList from "./components/todoList.vue";
  
    export default {
        name: 'App',
        components: {
            //2、将组件加入
            todoList,
        }
    }
</script>


todoList.vue
<template>
    <h1>这是todoList.</h1>   //最终将本句内容显示到页面上
</template>

<script>
    export default {
        name: "todoList",
    }
</script>

<style scoped>
    
</style>

3、在终端输入‘npm run dev’，运行项目。

四、复选框的实现（不太懂）

App.vue
<template>
    //7、引入组件
    <todoList :todolist="todoList"></todoList>
</template>

<script>
    //1、导入vue文件
    import todoList from "./components/todoList.vue";
    export default {
        name: 'App',
        data() {
            return {
                //3、将数据准备好（数组）
                todoList: [
                    {id: 1, task: '吃饭', isCompleted: true},
                    {id: 2, task: '睡觉', isCompleted: false},
                    {id: 3, task: '碎觉', isCompleted: false},
                 ]
            }
        },
        //2、加入组件
        components: {
            todoList,
        }
    }
</script>


todoList.vue
<template>
//4、这是从 ‘https://v4.bootcss.com/’ 网站上复制下来的。（列表+复选框+两个span）
//6、修改参数--将从App.vue中的数据分别填入到对应的地方。
    <ul class="list-group">
        <li class="list-group-item"
            v-for="item in todolist" :key="item.id">
            //v-for="item in todolist"等价于foreach :key="item.id" 用它做item.id索引
            <!--复选框-->
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" :id="item.id"
                v-model="item.isCompleted">   //v-model App.vue与本vue文件的值保持一致。  
                <label class="form-check-label" :for="item.id" :class="item.isCompleted ? 'delete' : ''">
                    {{item.task}}   //使用item.task
                </label>
            </div>
            // v-if 与 v-else是一对
            <span class="badge badge-primary badge-pill" v-if="item.isCompleted">已完成</span>
            <span class="badge badge-warning badge-pill" v-else>未完成</span>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "todoList",
        //5、接收从App.vue传过来的数据
        props:{
            todolist:{
                type:Array,
                required:true,
                default:[]
            }
        }
    }
</script>

<style scoped>
    // 添加样式
    .list-group {
        width: 500px;
        margin: 0 auto;
    }
    //删除线
    .delete{
        text-decoration: line-through;
    }
</style>

五、在四的基础上，添加分类按钮。

App.vue
<template>
    <todoList :todolist="todoList"></todoList>
    //6、@xxx 自定义事件
    <todoButton @changeActive="changeActive"></todoButton>
</template>

<script>
    import todoList from "./components/todoList.vue";
    //1、添加组件
    import todoButton from "./components/todoButton.vue";
    export default {
        name: 'App',
        data() {
            return {
                todoList: [
                    {id: 1, task: '吃饭', isCompleted: true},
                    {id: 2, task: '睡觉', isCompleted: false},
                    {id: 3, task: '碎觉', isCompleted: false},
                 ],
                active:0,    //4、添加一个数据
            }
        },
        //5、computed 监听属性。 vue上的数据(active)发生变化时，触发todoList()方法
        computed:{
            todoList(){
                if(this.active === 0){
                    return this.todoList;
                }else if(this.active === 1){
                    return this.todoList.filter(item => item.isCompleted);
                }else{
                    return this.todoList.filter(item => !item.isCompleted);
                }
            }
        },
        //3、添加方法
         methods:{
            changeActive(active){
                this.active=active;
                console.log(this.active);
            }
        },
        components: {
            todoList,
            todoButton,  //2、添加组件
        }
    }
</script>


todoButton.vue
<template>
    //从网站上复制的按钮组, 添加了一个属性 :class="三元表达式"。 添加@click调用函数
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn" :class="active === 0 ? 'btn-primary' : 'btn-secondary'" @click="changeActive(0)">全部</button>
        <button type="button" class="btn" :class="active === 1 ? 'btn-primary' : 'btn-secondary'" @click="changeActive(1)">已完成</button>
        <button type="button" class="btn" :class="active === 2 ? 'btn-primary' : 'btn-secondary'" @click="changeActive(2)">未完成</button>
    </div>
</template>

<script>
    export default {
        name: "todoButton",
        data() {
            return {
                //初始化数据
                active: 0
            };
        },
        //组件功能封装，外部要用时，使用 @xxxx 来接收使用、响应
        emits:["changeActive"],
        //触发函数
        methods:{
            changeActive(index){
               this.active=index;
               this.$emit("changeActive",index);
                // 父组件自定义的事件名，传给绑定事件的参数。
           }
        },
    };
</script>

<style scoped>
    //样式
    .btn-group {
        width: 500px;
        margin: 10px auto;
    }
</style>

六、在五的基础上，添加一个输入框实现添加。

App.vue
<template>
    //4、自定义事件
    <todoInput @addTask="addTask"></todoInput>
    <todoList :todolist="todoList"></todoList>
    <todoButton @changeActive="changeActive"></todoButton>
</template>

<script>
    import todoList from "./components/todoList.vue";
    import todoButton from "./components/todoButton.vue";
    //1、导入组件
    import todoInput from "./components/todoInput.vue";
    export default {
        name: 'App',
        data() {
            return {
                todoList: [
                    {id: 1, task: '吃饭', isCompleted: true},
                    {id: 2, task: '睡觉', isCompleted: false},
                    {id: 3, task: '碎觉', isCompleted: false},
                ],
                active:0,
            }
        },
        computed:{
            todoList(){
                if(this.active === 0){
                    return this.todoList;
                }else if(this.active === 1){
                    return this.todoList.filter(item => item.isCompleted);
                }else{
                    return this.todoList.filter(item => !item.isCompleted);
                }
            }
        },
        methods:{
            changeActive(active){
                this.active=active;
                console.log(this.active);
            },
            //3、添加一个函数
            addTask(taskname){
                this.todoList.push({
                    id: this.todoList.length+1,
                    task:taskname,
                    isCompleted:false,
                })
            }
        },
        components: {
            todoList,
            todoButton,
            //2、导入组件
            todoInput
        }
    }
</script>


todoInput.vue
<template>
    //1、复制一个文本框代码  修改一下内容
    <div class="input-group flex-nowrap">
        <div class="input-group-prepend">
            <span class="input-group-text" id="addon-wrapping">新建任务</span>
        </div>
        <input type="text" class="form-control"
               placeholder="请输入任务" aria-label="Username" aria-describedby="addon-wrapping"
            v-model="taskname">  //与App.vue中的taskname保持一致。
        <button class="btn-primary" @click="onsubmit">提交</button>//点击时，触发onsubmit函数
    </div>
</template>

<script>
    export default {
        name: "todoInput",
        data(){
            return{
                //2、数据
                taskname:""
            }
        },
        //4、将 addTask 提供给父组件使用
        emits:["addTask"],
        //3、写一个函数
        methods:{
            onsubmit(){
                this.$emit("addTask",this.taskname);
                this.taskname="";
            }

        }
    }
</script>

<style scoped>
    //样式
    .input-group{
        width:500px;
        margin:10px auto;
    }

</style>