2 Vue中组件开发

2.1 todolist功能开发

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>todolist功能开发</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->
        <div>
            <input v-model="itemValue"/>
            <button @click="addList">提交</button>
        </div>
        <ul>
            <!--加:key可以提升性能，key值要求每次的循环都不能相同,如果list中有相同的元素，可以使用(item,index),这里的index是指list的下标-->
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                itemValue:'',
                list:[]
            },
            methods:{
                addList: function () {
                    this.list.push(this.itemValue);
                    this.itemValue = '';
                }
            }
        });
    </script>
</body>
</html>
View Code

2.2  Vue组件的拆分-全局组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>todoList中组件的拆分</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->
        <!-- 1 组件是指页面中的一部分,当我们做一个网页十分庞大的时候，我们可以把一个大型网页拆成几个部分，每一个部分都是一个小的组件-->
         <!--2 如何定义一个组件-->
        <!--3 组件与组件之间是如何通信的-->
        <!--4 如何进行组件之间的拆分-->
        div id='app'
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <div id="app2">
        div id='app2'
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <script>
        //Vue.component 这是Vue提供给我们创建一个组件的方法，Vue.component是一个全局组件
        //template 创建一个模板
        Vue.component('todo-item', {
        template:'<li>item</li>'
        })
        new Vue({
            el:'#app'
        });
        new Vue({
            el:'#app2'
        });
    </script>
</body>
</html>
View Code

 2.3  Vue组件的拆分-局部组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>todoList中组件的拆分-局部组件</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->
        <!-- 1 组件是指页面中的一部分,当我们做一个网页十分庞大的时候，我们可以把一个大型网页拆成几个部分，每一个部分都是一个小的组件-->
         <!--2 如何定义一个组件-->
        <!--3 组件与组件之间是如何通信的-->
        <!--4 如何进行组件之间的拆分-->
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <div id="app2">
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <script>
        //定义局部组件，局部组件需要注册到Vue实例的components里才可以使用
        var TodoItem = {
            template:'<li>item</li>'
        }
        new Vue({
            el: '#app',
            components: {
                //将TodoItem注册到该实例中
                'todo-item':TodoItem
            }
        });
    </script>
</body>
</html>
View Code

  2.4  Vue组件的传参-属性传参

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>todoList组件-参数的传递</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->

    <!-- 组件与组件之间是如何通信的,如何传参-->
    <!-- 组件传参可以根据属性的形式传参-->
    <div id="app">
        <input v-model="inputValue" />
        <button @click="itemAdd">添加item</button>
        <ul>
            <!--1 添加一个属性 content 向组件传参数-->
            <todo-item
                v-for="(item,index) of list"
                :key="index"
                :content="item"
                       >
            {{item}}
            </todo-item>
        </ul>
    </div>
    <script>
        Vue.component('todo-item', {
            //2 组件需要在 props 中接收这个属性, 这是一个数组，可以是多个属性
            props: ['content'],
            //3 在模板中使用这个属性
            template: '<li>{{content}}</li>'
        });
        new Vue({
            el: '#app',
            data: {
                inputValue:'',
                list:[]
            },
            methods:{
                itemAdd: function () {
                    if (this.inputValue.trim() != '') {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                    }
                }
            }

        });
    </script>
</body>
</html>
View Code

 2.5 组件与实例的关系

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>组件与实例的关系</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->
    <div id="app">
        <input v-model="inputValue" />
        <button @click="itemAdd">添加item</button>
        <ul>
            <todo-item
                v-for="(item,index) of list"
                :key="index"
                :content="item"
                       >
            {{item}}
            </todo-item>
        </ul>
    </div>
    <script>
        //1 每一个Vue的组件都是一个Vue的实例，组件可以称之为一个Vue实例，Vue实例也可以称之为组件
        //2 任何的一个Vue项目都是由千千万万个Vue的实例组成的
        /*
        一个Vue实例可以由以下几部分组成：
         1 props(数组，接收属性传参)
         2 template 模板
         3 methods 方法
         4 computed 计算属性
         5 watch 侦听器
         6 data
        */
        Vue.component('todo-item', {
            props: ['content'],
            template: '<li @click="handleClick">{{content}}</li>',
            //3  既然每一个组件都是一个Vue实例，则组件也可以在methods方法里定义事件,也可以写data,也可以写计算属性
            methods: {
                handleClick: function () {
                    alert("组件中的的事件");
                }
            }
        });
        new Vue({
            el: '#app',
            data: {
                inputValue:'',
                list:[]
            },
            methods:{
                itemAdd: function () {
                    if (this.inputValue.trim() != '') {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                    }
                }
            }
        });
        /*
        如果一个Vue实例没有template模板，则它会将挂载点下的所有DOM节点当做template模板
        */
    </script>
</body>
</html>
View Code

  2.6 todolist删除功能，子组件如何向父组件进行通信，发布订阅模式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>todolist的删除功能</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980-->
    <div id="app">
        <input v-model="inputValue" />
        <button @click="itemAdd">添加item</button>
        <ul>
            <!--3 父组件使用属性的形式向子组件传递了数据-->
            <!--7 @delete="handleDelete" 父组件监听子组件delete事件-->
            <todo-item v-for="(item,index) of list"
                       :key="index"
                       :content="item"
                       :index="index"
                       @delete="handleDelete">
                {{item}}
            </todo-item>
        </ul>
    </div>
    <script>
        //2 这里是 子组件
        Vue.component('todo-item', {
            props: ['content','index'],//4 子组件使用props接收父组件传过来的属性参数
            template: '<li @click="handleClick">{{content}} {{index}}</li>',
            methods: {
                handleClick: function () {
                    /*
                    6  通知父组件，删除list指定索引的数据
                    delete:这里的delete是自定义的一个事件
                    this.$emit('delete',this.index)发布订阅模式，发布了一个delete事件,这个事件携带了index的参数值
                    */
                   this.$emit('delete',this.index)
                }
            }
        });
        //1 这里称之为 父组件
        new Vue({
            el: '#app',
            data: {
                inputValue:'',
                list:[]
            },
            methods:{
                itemAdd: function () {
                    if (this.inputValue.trim() != '') {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                    }
                },
                handleDelete: function (index) {
                    //8 父组件监听子组件delete事件, 一旦点击子组件的li，则会触发
                    //删除数组所对应的下标
                    this.list.splice(index,1);
                }
            }
        });
        /*
        5 要做的功能是：点击li标签时，删除该标签。
        实现思路是：点击li时，子组件向父组件传递消息，告诉父组件，删除list中对应的数据
        难点：如何实现子组件向父组件进行通信：
        使用发布订阅模式
        */
    </script>
</body>
</html>
View Code

 

posted @ 2018-11-25 16:28  Torey_li  阅读(152)  评论(0)  编辑  收藏  举报