vue 基礎入門筆記 14:發表評論 demo

September發表於2019-08-16
Vue筆記
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div id="app">
        <!-- 傳遞的方法名不要是駝峰命名，這是個坑 ，找了好久沒找到原因 -->
        <!-- 定義了兩個元件，一個是發表元件，一個是評論列表元件 -->
        <submit @func='addMessage'></submit>
        <list2 :list='list'></list2>
    </div>
    <template id="list">
        <div class="list-group">
            <a v-for="item in list" href="#" class="list-group-item active">
                <h4 class="list-group-item-heading">{{item.name | addS}}</h4>
                <p class="list-group-item-text">{{item.content}}</p>
            </a>
        </div>
    </template>
    <template id="submit">
        <form action="" method="POST" role="form">
            <legend>發表評論</legend>
            <div class="form-group">
                <label>使用者名稱</label>
                <input v-model="name" type="text" class="form-control" id="" placeholder="輸入使用者名稱">
                <label>評論框</label>
                <textarea v-model="content" class="form-control" id="" placeholder="輸入內容"></textarea>
            </div>
            <button @click.prevent='addMessage' type="submit" class="btn btn-primary">提交</button>
        </form>
    </template>
    <script>
        //新增過濾器  增加：
        // Vue.filter('addS', function (msg) {
        //     return msg + ":"
        // })
        var vm = new Vue({
            el: '#app',
            data: {
                name: '',
                content: '',
                list: [{
                    'name': '勒布朗',
                    'content': '誰來湖人呀'
                }],
            },
            methods: {
                addMessage(name, content) {
                    console.log(name, content, "父元件事件")
                    this.list.push({ 'name': name, 'content': content })
                    this.name = this.content = ''
                    //this.list = newlist
                },
                show(data) {
                    console.log("執行了事件A------" + data)
                }
            },
            components: {
                'list2': {
                    template: '#list',
                    props: ['list']
                },
                'submit': {
                    template: '#submit',
                    props: ['name', 'content'],
                    methods: {
                        // 新增評論方法
                        addMessage() {
                            console.log(this.name, this.content)
                            // 使用$emit呼叫func 傳遞 name,content
                            this.$emit('func', this.name, this.content)
                        },
                    },
                }
            }

        });
        Vue.config.devtools = true
    </script>
</body>

</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章