Vue组件基本使用

2018-05-10 本文已影响12人 Koko_滱滱

[TOC]

todolist功能开发

代码 2

<body>
    <div id="app">
        <div>
            <input v-model="newItem" />
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <hr/>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            newItem: '',
            list: ["text1", "text2"]
        },
        methods: {
            handleClick: function () {
                this.list.push(this.newItem);
                this.newItem = '';//数据新增后，让输入框处于空
            }
        }

    })
</script>

每次点击提交，就将输入框中的内容添加到列表上进行显示。
用到了数据的双向绑定、事件绑定、v-for指令等知识

todolist组件拆分

组件的定义

定义组件

    Vue.component("todo-item",{
        template:"<li>item</li>"
    })

使用组件

<todo-item></todo-item>

使用Vue.component定义的组件，称为全局组件。定义后可以在任意地方使用。

如果要定义局部组件

<script>
    var TodoItem = {
        template:"<li>item</li>"
    }

    var app = new Vue({
        el: '#app',
        comments:{
            'todo-item':TodoItem//局部组件的注册
        },
        data: {
            newItem: '',
            list: ["text1", "text2"]
        },
        methods: {
            handleClick: function () {
                this.list.push(this.newItem);
                this.newItem = '';
            }
        }

    })
</script>

局部组件在定义后，需要在使用的Vue实例中进行声明

组件化后的todolist

代码 2-1

<body>
    <div id="app">
        <div>
            <input v-model="newItem" />
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
        </ul>
    </div>
    <hr/>
</body>
<script>

    Vue.component("todo-item",{
        props:["content"],//接收外部参数名
        template:"<li>{{content}}</li>"
    })

    var app = new Vue({
        el: '#app',
        data: {
            newItem: '',
            list: ["text1", "text2"]
        },
        methods: {
            handleClick: function () {
                this.list.push(this.newItem);
                this.newItem = '';
            }
        }

    })
</script>

点击提交后，item的值以content为名传递给了组件，组件再通过{{content}}获取值
也就是说，父组件通过属性的形式，向子组件传递值。

目前为止，我们把<li>标签拆成了组件进行管理

组件与实例的关系

每一个Vue组件，就是一个Vue实例

在一个Vue项目中，都是有很多个Vue实例组成的。

如果一个Vue实例没有定义模板，那么挂载点下的所有内容会被当做模板

实现todolist的删除功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="../vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <div>
            <input v-model="newItem" />
            <button @click="handleClick">提交</button>
        </div>
        <ul>
            <!-- 父组件监听子组件的delete事件 -->
            <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
        </ul>
    </div>
    <hr/>
</body>
<script>

    Vue.component("todo-item", {
        props: ["content", "index"],//接收外部参数名
        template: "<li @click='handleClick'>{{content}}</li>",
        methods: {
            handleClick: function () {
                this.$emit("delete", this.index);//向外触发delete事件
            }
        }
    })

    var app = new Vue({
        el: '#app',
        data: {
            newItem: '',
            list: ["text1", "text2"]
        },
        methods: {
            handleClick: function () {
                this.list.push(this.newItem);
                this.newItem = '';
            },
            handleDelete:function(index){
                this.list.splice(index,1);//删除一条数据
            }
        }

    })
</script>

</html>

实现了点击列表后，删除数据的功能