Vue中的组件

最新推荐文章于 2024-10-04 00:46:18 发布

子非鱼921

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量1k

点赞数 19

分类专栏： Vue.js入门及实战文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/weixin_45980065/article/details/141720002

版权

Vue.js入门及实战专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1 todolist功能开发
2 todolist组件拆分
3 组件与实例的关系
4 实现todolist的删除功能

1 todolist功能开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist功能开发</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <li v-for="(item, index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data:{
                inputValue: '',
                list: []
            },
            methods:{
                handleSubmit: function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

2 todolist组件拆分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist组件拆分</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <todo-item v-for="(item, index) of list"
            :key="index"
            :content="item">
            </todo-item>
        </ul>
    </div>
    <script>
        /*全局组件*/
        Vue.component('todo-item', {
            /*组件接收content*/
            props: ['content'],
            template: '<li>{{content}}</li>'
        })
        
        /*局部组件*/
        /*var todoItem = {
            template: '<li>time</li>'
        }*/

        new Vue({
            el: "#root",
            /*对局部组件注册*/
            /*components:{
                'todo-item': todoItem
            },*/
            data:{
                inputValue: '',
                list: []
            },
            methods:{
                handleSubmit: function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

3 组件与实例的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件与实例的关系</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <todo-item v-for="(item, index) of list"
            :key="index"
            :content="item">
            </todo-item>
        </ul>
    </div>
    <script>
        /*每一个组件也是一个实例*/
        Vue.component('todo-item', {
            props: ['content'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods:{
                handleClick: function(){
                    alert('clicked')
                }
            }
        })
        
        new Vue({
            /*如果不定义template模板，会将挂载点下的所有DOM标签作为实例的模板*/
            el: "#root",
            data:{
                inputValue: '',
                list: []
            },
            methods:{
                handleSubmit: function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

4 实现todolist的删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <todo-item v-for="(item, index) of list"
                :key="index"
                :content="item"
                :index="index"
                @delete="handleDelete"
            >
            </todo-item>
        </ul>
    </div>
    <script>
        /*子组件*/
        Vue.component('todo-item', {
            props: ['content', 'index'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods:{
                handleClick: function(){
                    /*发布订阅模式：子组件和父组件的通信*/
                    this.$emit('delete', this.index)
                }
            }
        })
        
        /*父组件，父组件通过属性的形式传递给子组件内容*/
        new Vue({
            /*如果不定义template模板，会将挂载点下的所有DOM标签作为实例的模板*/
            el: "#root",
            data:{
                inputValue: '',
                list: []
            },
            methods:{
                handleSubmit: function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleDelete: function(index){
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>