未分模块化

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>

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

                                })

                            }

                        }

                    }

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);

                        }

                    }

                }

分好模块化

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>

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

                    }

                    }

注意

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;

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);

                        }

                    }

};

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

                    }

                };

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:;

}

.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;

}

使用Vue做评论+localStorage存储（js模块化）的更多相关文章

  1. 使用Vue做个简单的评论 + localstorage存储

     1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...

  2. vue中使用localStorage存储信息

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...

  3. Android WebView js混合cookie和localStorage存储

    一.cookie存储和取出: (1)存储: ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ ...

  4. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

  5. 使用sessionStorage、localStorage存储数组与对象（转）

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

  6. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  7. LocalStorage存储

     1.localStorage存储服务: .factory('storageSvc', [function () { return { //保存数据 save: function (key, valu ...

  8. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...

  9. 面试指南」JS 模块化、组件化、工程化相关的 15 道面试题

    JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.exp ...

随机推荐

  1. Ubuntu以及CentOS7修改ssh端口号详细步骤

    1.Ubuntu修改ssh端口号步骤: 1.修改sshd.config文件.执行vim etc/ssh/sshd_config.增加上我们需要增加的ssh的端口号.图例增加了5309的端口号. ESC ...

  2. win10的xbox下载应用或者游戏时，出现0x80070422和0x80073D0A的解决办法

    这个错误:0x80070422是因为关闭了windows update这个服务导致的 这个错误:0x80073D0A是因为关闭了windows firewall这个服务导致的 具体操作: cmd下se ...

  3. Log4j和Slf4j的比较

    简单日记门面(simple logging Facade for java)SLF4J是为各种loging APIs提供一个简单统一的接口,从而使得最终用户能够在部署的时候配置自己希 望的loging ...

  4. solidity数据类型

    1.Bool类型 取值:true/false 运算符:!  && || == != 2.Integer整型 uint8-uint256 int8-int256 uint == uint ...

  5. artDialog组件应用学习（三）

    一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...

  6. 2、Spring之AOP

    AOP术语 通知:定义了切面是什么以及何时使用.除了要描述页面要完成的工作,通知还解决了何时执行这个工作的问题. 连接点:连接点是一个物理的存在.这个点可以是调用方法时.抛出异常时.甚至是修改一个字段 ...

  7. cf1064E. Dwarves, Hats and Extrasensory Abilities(二分 交互)

    题意 题目链接 \(n\)次操作,每次你给出一个点的坐标,系统会返回该点的颜色(黑 / 白),程序最后输出一条直线把所有黑点和白点分隔开 Sol 一个很直观的想法:首先询问\((dx, 0)\),然后 ...

  8. mac上如何卸载node

    homebrew安装的 直接一条命令 brew uninstall node 官网下载pkg安装包的 一条命令 sudo rm -rf /usr/local/{bin/{node,npm},lib/n ...

  9. Easy deployment

    Use simple ssh and shell scripts to deploy, upgrade, rollback and reconfigure linux servers. https:/ ...

  10. 在Eclipse安装Genymotion插件的经验心得

    个人心得分享,不当之处还请指正. Eclipse自带的Android模拟器已经无力吐槽了,新手刚上手时或许配置完环境已经精疲力尽了,或许还沉浸在开发成功的喜悦当中,对AVD模拟器的运行情况关注不大,渐 ...