使用Vue做评论+localStorage存储（js模块化）

未分模块化

html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>评论模块</title>
        <style>
            #root{
                width: 400px;
                padding: 2em;
                margin: 2em auto;
                border: 1px solid #e0e0e0;
                border-radius: 1em;
            }
            label{
                display: flex;
                margin: 1em 0;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <c-input @wybc='zhendeyaobaocuoa'></c-input>
            <c-list :comments="comments" @dodel="zhendeshanc"></c-list>
        </div>
            <script src="js/comment-input.js"></script>
            <script src="js/comment-list.js"></script>
            <script src="js/Vue.js"></script>
            <script>
                Vue.component('c-input',commentInput);
                Vue.component('c-list',commentList);
                Vue.component('comment',commentItem);
                var app = new Vue({
                    el:"#root",
                    data:{
                        comments:[
                        ]
                    },
                    methods:{
                        zhendeyaobaocuoa(res){
                            this.comments.push(res);
                            this.updaLocalStorage();
                        },
                        updaLocalStorage(){
                            localStorage.setItem("data",JSON.stringify(this.comments));
                        },
                        zhendeshanc(id){
                             this.comments=this.comments.filter((c) => c.id!=id)
                            this.updaLocalStorage(); 
                        }
                    },
                    created(){
                        const cs=localStorage.getItem("data");
                        if(cs){
                            this.comments=JSON.parse(cs);
                        }
                    }
                })
            </script>
            
    </body>
</html>
View Code