Vue组件和实例的关系

最新推荐文章于 2022-08-22 21:12:14 发布

wenhuixl

最新推荐文章于 2022-08-22 21:12:14 发布

阅读量1.1k

点赞数

分类专栏： Vue学习文章标签： Vue

本文链接：https://blog.csdn.net/qq_31519989/article/details/99172373

版权

Vue学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue组件和实例的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
</head>
<script src="./vue.js"></script>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="submit">提交</button>
        </div>
        <ul>
            <todo-item v-for="item in list" :content="item"></todo-item>
        </ul>
    </div>
    <script>
        // 全局组件
        Vue.component('todo-item', {
            props: ['content'], // 接收属性值
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function () {
                    console.log('---handleClick---');
                }
            }
        })

        // 局部组件
        // var TodoItem  = {
        //     props: ['content'], // 接收属性值
        //     template: '<li>{{content}}</li>'
        // }

        new Vue({ // 创建实例
            el: '#root', // 挂载点
            // components: {
            //     'todo-item': TodoItem
            // },
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                submit: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

wenhuixl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件和实例的关系

Vue组件和实例的关系<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title></head><script src="./vue.js"></script&gt...
复制链接

扫一扫