使用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

comment-input.js

                    var commentInput={
                    template:`
                    <div class='cinput'>
                    <label>
                    <span>用户名</span>
                    <input v-model='author'/>
                    </label>
                    <label>
                        <span>评论内容</span>
                        
                        <textarea v-model='content'></textarea>
                    </label>
                    <button @click='doSave()'>发布</button>
                    </div>
                    `,
                    data(){
                        return {
                            author:'',
                            content:''
                        }},
                        methods:{
                            doSave(){
                                this.$emit('wybc',{
                                    id:+new Date(),
                                    author:this.author,
                                    content:this.content
                                })
                            }
                        }
                    }

View Code

comment-list.js

                var  commentList={
                    props:['comments'],
                    template:`
                    <div class='clist'>
                        <comment v-for='c in comments'
                            v-bind:comment='c'
                            @dodel="dodel">
                        </comment> 
                    </div>
                    `,
                    methods:{
                        dodel(id){
                            this.$emit("dodel",id);
                        }
                    }
                };
                var commentItem={
                    props:['comment'],
                    template:`
                    <div>
                    {{comment.author}}:
                        <span ></span>
                        <span>{{comment.content}}</span>
                        <a href @click.prevent='del'>删除</a>
                    </div>
                    `,
                    methods:{
                        del(){
                            this.$emit("dodel",this.comment.id);
                        }
                    }
                }

View Code

分好模块化

html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>评论模块</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <comment></comment>
        </div>

        <script type="module">

         import commentComp from './component/comment/comment-comp.js';

         Vue.component('comment', commentComp);

         var vm = new Vue({
             el: '#root'
         });

        </script>
    </body>
</html>

View Code

comment-comp.js

import commentInput from './comment-input.js';
import commentList from './comment-list.js';

export default {
        template:`
        <div>
            <cinput @wybc='zhendeyaobaocuoa' ></cinput>
            <clist :comments="comments" @dodel="zhendeshanc"></clist>
            </div>`,
            data() { return {
            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);
                        }
                    },
                    components:{
                        cinput:commentInput,
                        clist:commentList
                    }
                    }

View Code

注意

comment-input.js

                    
                    var commentInput={
                    template:`
                    <div class='cinput'>
                    <label>
                    <span>用户名</span>
                    <input v-model='author'/>
                    </label>
                    <label>
                        <span>评论内容</span>
                        
                        <textarea v-model='content'></textarea>
                    </label>
                    <button @click='doSave()'>发布</button>
                    </div>
                    `,
                    data(){
                        return {
                            author:'',
                            content:''
                        }},
                        methods:{
                            doSave(){
                                this.$emit('wybc',{
                                    id:+new Date(),
                                    author:this.author,
                                    content:this.content
                                })
                            }
                        }
                    }
export  default commentInput;

View Code

comment-item.js

export default {
                    props:['comment'],
                    template:`
                    <div>
                    {{comment.author}}:
                        <span ></span>
                        <span>{{comment.content}}</span>
                        <a href @click.prevent='del'>删除</a>
                    </div>
                    `,
                    methods:{
                        del(){
                            this.$emit("dodel",this.comment.id);
                        }
                    }
};

View Code

comment-list.js

            import commentItem from './comment-item.js';
                
                export default{
                    props:['comments'],
                    template:`
                    <div class='clist'>
                        <comment v-for='c in comments'
                            v-bind:comment='c'
                            @dodel="dodel"
                            v-bind:key=c.id>
                        </comment> 
                    </div>
                    `,
                    methods:{
                        dodel(id){
                            this.$emit("dodel",id);
                        }
                    },
                     components: {
                comment: commentItem
                    }
                };

View Code

index.css

#root {
    width: 400px;
    padding: 2em;
    margin: 2em auto;
    border: 1px solid #e0e0e0;
    border-radius: 1em;
}
.cinput {
    margin-bottom: 1em;
}
label {
    display: flex;
    margin: 1em 0;
}
label span {
    flex-basis: 100px;
}
input, textarea {
    flex: 1;
}
.cinput footer {
    text-align: right;
}
.cinput button {
    border: none;
    background-color: orange;
    padding: .4em 1em;
    color: white;
    font-size: 16px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #e0e0e0;
}


.comment {
    padding: 1em;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
}
.comment-author {
    color: steelblue;
    flex-basis: 80px;
}
.comment-delete {
    margin-left: auto;
}

View Code