vue组件案例----发表评论功能

页面展示

1.引入样式bootstrap.css和vue.js文件

<link rel="stylesheet" href="../bootsrtrap/css/bootstrap.css">
<script src="./vue.js"></script>

2.1定义vue组件content-mode为评论模块区域，并渲染到页面
2.2自定义评论列表数据并使用插值表达式渲染到页面

<div id="app">
        <content-mode @func="loadComments"></content-mode>
        <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="tmp">
        <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">
                <button class="btn btn-primary" @click="postComment">添加评论</button>
            </div>
        </div>
</template>

3.发表评论数据方法postComment实现步骤
3.1先组织出一个最新的评论数据对象
3.2把得到的评论对象，保存到 localStorage 中：
3.3 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据，转换为 一个 数组对象， 然后把最新的评论， unshif到这个数组
3.4如果获取到的 localStorage 中的 评论字符串，为空不存在， 则 可以返回一个 ‘[]’ 让 JSON.parse 去转换

  var contBox = {
        data() {
            return {
                user: '',
                content: ''
            }
        },
        template: '#tmp',
        methods: {
            postComment() {
                var comments = {
                        id: Date.now(),
                        user: this.user,
                        content: this.content
                    }
                    // 从 localStorage 中获取所有的评论
                var list = JSON.parse(localStorage.getItem('cmts') || '[]');
                list.unshift(comments);
                // 重新保存最新的评论数据
                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: '圆舞曲降D大调「小狗」Op. 64-1'
            }, {
                id: Date.now(),
                user: '柴可夫斯基',
                content: '（悲怆）交响曲'
            }]
        },
        created() {
            this.loadComments()
        },
        methods: {
            loadComments() { // 从本地的 localStorage 中，加载评论列表
                var list = JSON.parse(localStorage.getItem('cmts') || '[]');
                this.list = list;
            }
        },
        components: {
            contentMode: contBox
        }
    })