Vue 定义组件及简单使用（四）

最新推荐文章于 2024-04-04 18:19:54 发布

Yee Jason

最新推荐文章于 2024-04-04 18:19:54 发布

阅读量426

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_38287952/article/details/88079549

版权

vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

组件是为了更好的管理、维护代码

定义全局组件

Vue.component("TodoItem", {
            props: ['content'],
            template: "<li>{{content}}</li>"
});

定义局部组件

// 局部组件
var TodoItem = {
     props: ['content'],
     template: "<li>{{content}}</li>"
}

 var app = new Vue({
   el: '#app',
   components: {
       TodoItem: TodoItem // 绑定局部组件
   },
   data: {
         list: [],
        inputValue: ''
   },
    methods: {
       handleClick: function () {
             this.list.push(this.inputValue);
            this.inputValue = '';
        }
   }
});

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="handleClick">提交</button>
        <ul>
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>
    <script>

        // 全局的组件
        /*Vue.component("TodoItem", {
            props: ['content'],
            template: "<li>{{content}}</li>"
        });*/

        // 局部组件
        var TodoItem = {
            props: ['content'],
            template: "<li>{{content}}</li>"
        }

        var app = new Vue({
            el: '#app',
            components: {
                TodoItem: TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                }
            }
        });
    </script>
</body>
</html>

Yee Jason

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 定义组件及简单使用（四）

组件是为了更好的管理、维护代码定义全局组件Vue.component("TodoItem", { props: ['content'], template: "&lt;li&gt;{{content}}&lt;/li&gt;"}); 定义局部组件// 局部组件var TodoItem = { pr...
复制链接

扫一扫