转载

利用Vue中组件实现界面

<!doctype html>

<html lang="zh">

 

<head>

    <title>组件化构造界面</title>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 内网Vue.js -->

    <script src="D:\WebCode\Vue.js"></script>

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

 

<body>

    <!-- view -->

 

    <!-- 容器 -->

    <div id="app" class="container">


 

        <!-- 展板 -->

        <my-jumbotron></my-jumbotron>

        <!-- 输入 -->

        <my-input :ss="Lists" ></my-input>

        <!-- 列表 -->

        <my-list :lists="Lists"></my-list>


 

    </div>


 

    <!-- JS -->

    <script>

        // 创建组件

        Vue.component('my-jumbotron',

 

            {

                data() {

                    return {

                        title: 'Vue组件',

                    }

                },

                template: ` 

            <div class="jumbotron">

                <h1 class="display-3">{{title}}</h1>

                <hr class="my-2">

            </div>`,

            }

        );

 

        Vue.component('my-input',

            {

                props:['ss'],

                data() {

                    return {

                        title:'创建',

                        task:'',

                        yincang:'隐藏'

                      

                    }

                },

 

                methods: {

                    add:function(){

                        // 创建新任务

                      

                    //    console.log(Lists);

                       this.ss.unshift(this.task);

                      this.task='';

                    },

 

                    hide:function(){

 

                    }

 

                  

                },

                template: `

                <div class="form-group">

                    <label for=""></label>

                    <input v-model="task" type="text" class="form-control mb-3" name="" id="" aria-describedby="helpId" placeholder="新任务">

                    <button @click="add()" type="button" name="" id="" class="btn btn-primary  btn-lg btn-block">{{title}}</button>

                 

                </div>`,

 

            }

        );

 

        Vue.component('my-list', 

        {

            data() {

                return {

                    title:'清空',

                }

            },

            props:['lists'],

            methods: {

                del:function(i){

                    this.lists.splice(i,1);

                },

 

                // 清空

                remove:function(i){

                    this.lists.splice(i);

                }

            },

            template:`

            <ul class="list-group  ">

           

           <li v-for="(item, index) in lists" :key="index" class="list-group-item">

           <button @click="del(index)" type="button" class="btn btn-outline-danger float-right">X</button>

           {{item}}</li>

           <button @click="remove(index)" type="button" name="" id="" class="btn btn-primary btn-lg btn-block mt-3">{{ title}}</button>

         

       </ul>`,

        }

        );

        //    创建Vue实例

        new Vue({

            el: '#app',

            data:{

                Lists:['起床','吃饭'],

            },

            methods: {

               

            },


 

        })

    </script>

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</body>

 

</html>

正文到此结束
本文目录