vue学习笔记：6.4.组件案例-评论列表

组件案例-评论列表

这里使用的 bootstrap 做布局
效果图如下：

HTML

<div id="app">
   <!-- locadComments 为父组件中的方法名 -->
    <cmt-box @func="locadComments"></cmt-box>
    <ul class="list-group">
        <li class="list-group-item" v-for="(item, index) in list" :key="index">
            <span class="badge">评论人：{{ item.user }}</span>
            {{ item.content }}
        </li>
    </ul>
</div>

<template id="tmpl">
    <div>
        <div class="form-group">
            <label>评论人：</label>
            <input type="text" class="form-control" v-model="user">
        </div>
        <div class="form-group">
            <label>评论内容：</label>
            <textarea class="form-control" v-model="content"></textarea>
        </div>
        <div class="form-group">
            <input type="button" class="btn btn-primary" value="发表评论" @click="postComment">
        </div>
    </div>
</template>

JS

var commentBox = {
    data() {
        return {
            user: "",
            content: ""
        }
    },
    template: "#tmpl",
    methods: {
        postComment() {     //发表评论的方法
            // 分析：
            // 1.组织出一个最新的评论数据对象
            // 2.评论数据存储到 localStorage 中
            //  2.1 localStorage 只支持存放字符串数据，要先调用 JSON.stringify
            //  2.2 载保存最新的评论数据之前，要先从 localStorage 获取到之前的评论数据（string），转换为一个数组对象，然后把最新的评论push进去
            //  2.3 如果获取到的 localStorage 中的 评论字符串 为空，则 可以返回一个 "[]"， 让 JSON.parse 去转换
            //  2.4 把最新的评论列表数组，再次调用 JSON.stringify 转为数组字符串，然后调用 localStorage.setItem()

            if(this.user != "" && this.content != "") {
                var comment = { id: Date.now(), user: this.user, content: this.content };
                // console.log(comment);
                // 从 localStorage 中获取所有评论
                var list = JSON.parse(localStorage.getItem("cmts") || "[]");
                list.unshift(comment);  // unshift 在数组最上面添加
                console.log(list);

                // 重新保存 最新的 评论数据
                localStorage.setItem("cmts", JSON.stringify(list));

                this.user = this.content = "";
                this.$emit("func");
            }
        }
    },
}

var vm = new Vue({
    el: '#app',
    data: {
        list: [
            { id: Date.now(), user: "张三", content: "五百里滇池，奔来眼底" },
            { id: Date.now(), user: "李四", content: "披襟岸帻，喜茫茫空阔无边" },
            { id: Date.now(), user: "王五", content: "看：东骧神骏，西翥领仪" },
            { id: Date.now(), user: "马六", content: "北走蜿蜒，南翔缟素" },
        ]
    },
    components: {
        "cmt-box": commentBox
    },
    created() {
        this.locadComments();
    },
    methods: {
        locadComments() {   //从本地的 localStorage 中，加载评论列表
            var list = JSON.parse(localStorage.getItem("cmts"));
            this.list = list;
        }
    }
});
</script>