Vue——21——发表评论和自动刷新列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap3.3.7.css">
</head>

<body>

    <div id="app">
        <cmt-box @func="loadComments"></cmt-box>  <!-- 父组件给子组件传递方法 -->
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人:{{item.user}}</span>
                {{item.content}}
            </li>
        </ul>
    </div>
    <template id="tmp1">
        <!-- 唯一根组件div -->
        <div>
            <div class="form-group">
                <lable>评论人:</lable>
                <!-- form-control是bootstrap3里的 -->
                <input type="text" class="form-control" v-model="user">
            </div>
            <div class="form-group">
                <lable>评论内容:</lable>
                <textarea class="form-control" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
            </div>

        </div>
    </template>
    <script>
        var commentBox = {
            template: '#tmp1',
            data() {
                return {
                    user: "",
                    content: ""
                }
            },
            methods: {
                postComment() { //发表评论的方法
                    //分析：发表评论的业务逻辑
                    //1.评论数据存到localStorage中
                    //2.先组织出一个最新的评论数据对象
                    //3.想办法把第二步中得到的评论对象保存到localStorage中
                    //3.1 localStorage只支持存放字符串数据,要先调用JSON.stringify
                    //3.2 在保存最新的评论数据之前,要先从localStorage获取到之前的评论数据(string),转换为一个数组对象
                    //然后把最新的评论push到这个数组
                    //3.3如果获取到的localStorage中的评论字符串为空,则可以返回一个'[]'让JSON.parse去转换
                    //3.4把最新的评论列表数组,再次调用JSON.stringify转为数组字符串,然后调用localStorage.setItem()
                    //localStorage可以在控制台里的Application里找到
                    var comment={id:Date.now(),user:this.user,content:this.content}
                     //从LocalStorage中获取所有的评论
                     var list=JSON.parse(localStorage.getItem('cmts')||'[]')
                     list.unshift(comment)
                    //重新保存最新的评论数据
                    localStorage.setItem('cmts',JSON.stringify(list))
                    this.user=this.content=""
                    this.$emit('func')
                   

                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                        id: Date.now(),
                        content: '行到水穷处，坐看云起时',
                        user: '王维'
                    },
                    {
                        id: Date.now(),
                        content: '幽愁秋气上青枫，凉夜波间吟古龙',
                        user: '李贺'
                    },
                    {
                        id: Date.now(),
                        content: '鸟宿池边树，僧敲月下门',
                        user: '贾岛'
                    }
                ]
            },
            beforeCreate() {//注意:这里不能调用loadComments方法,因为在执行这个钩子函数的时候,data和methods都还没有被初始化好
                
            },
            created() {
                this.loadComments()
            },
            methods: {
            loadComments(){//从本地的localStorage中,加载评论列表
                var list=JSON.parse(localStorage.getItem('cmts')||'[]')
                this.list=list
                }
            },
            components: {
                'cmt-box': commentBox
            }
        })
    </script>
</body>

</html>
Vue——21——发表评论和自动刷新列表

猜你喜欢
