Vue basic introductory notes 14: comment demo

Time:2021-9-9

Vue basic introduction notes 14

<!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/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div id="app">
        <!--  The method name passed should not be named after the hump. It's a pit. I haven't found the reason for it for a long time -- >
        <!--  Two components are defined, one is the publishing component, and the other is the comment list component -- >
        <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 > comment < / legend >
            <div class="form-group">
                < label > user name < / label >
                < input V-model = "name" type = "text" class = "form control" id = "" placeholder = "enter user name" >
                < label > comment box < / label >
                < textarea V-model = "content" class = "form control" id = "" placeholder = "input content" > < / textarea >
            </div>
            < button @ click. Prevent ='addmessage 'type = "submit" class = "BTN BTN primary" > submit < / button >
        </form>
    </template>
    <script>
        //Add filter add:
        // Vue.filter('addS', function (msg) {
        //     return msg + ":"
        // })
        var vm = new Vue({
            el: '#app',
            data: {
                name: '',
                content: '',
                list: [{
                    'name': 'LeBron',
                    'content': 'who's coming to the Lakers'
                }],
            },
            methods: {
                addMessage(name, content) {
                    Console.log (name, content, "parent component event")
                    this.list.push({ 'name': name, 'content': content })
                    this.name = this.content = ''
                    //this.list = newlist
                },
                show(data) {
                    Console.log ("event a ------" + data executed)
                }
            },
            components: {
                'list2': {
                    template: '#list',
                    props: ['list']
                },
                'submit': {
                    template: '#submit',
                    props: ['name', 'content'],
                    methods: {
                        //Add comment method
                        addMessage() {
                            console.log(this.name, this.content)
                            //Use $emit to call func to pass name and content
                            this.$emit('func', this.name, this.content)
                        },
                    },
                }
            }

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

</html>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer

Recommended Today

“Self test” stay up late to summarize 50 Vue knowledge points, all of which will make you God!!!

preface Hello everyone, I’m Lin Sanxin. A lot of things have happened these days (I won’t say what’s specific). These things have scared me to treasure my collection these yearsVue knowledge pointsI took out my notes and tried my best to recall them. Finally, I realized these 50Knowledge points(let’s not be too vulgar. It’s not […]