vue.js 2.0开发(3)

组件化

Vue.component('todo-items',{

});

定义组件，首先是标签的名字todo-items，然后里面还要配置一些选项，首先是我们的模板template，里面需要填入的内容使我们原生的html，这里我们中的是script标签添加，但是要注意它的type="text/x-template":

    <script type="text/x-template" id="todo-items-template">
        <ul class="list-group">
            <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
                {{todo.title}}
                <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
                <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
            </li>
        </ul>
    </script>

然后在组件定义中以id的方式声明：

        Vue.component('todo-items',{
            template:'#todo-items-template',
        });        

这样我们就可以使用todo-items这个标签了，刷新浏览器之后会报错

这是因为我们在组件里面没有获取到我们初始化的todos，这里可以通过属性传递进来：

<todo-items :todos="todos"></todo-items>

这里的‘：’是必须的，这就是v-bind:的缩写，如果没有的话 这个todos就相当于字符串。还要去告诉我们的组件这个属性

　　　　　Vue.component('todo-items',{
            template:'#todo-items-template',
            props:['todos']
        });

最后把我们组件的方法放进来，不然不可用

    　　Vue.component('todo-items',{
            template:'#todo-items-template',
            props:['todos'],
            methods:{
                deleteTodo(index){
                    this.todos.splice(index,1);//删除下标为index的元素
                },
                toggleCompletion(todo){
                    todo.completed = !todo.completed;
                }
            }
        });

这样就可以了，现在我们把我们的form也做成组件，创建x-template跟上面的一样，定义组件

        Vue.component('todo-form',{
            template:"#todo-add-form-template",
        });    

这样也是会报错

这里newTodo找不到事因为我们没有在组件中定义：

        Vue.component('todo-form',{
            template:"#todo-add-form-template",
            props:['todos'],
            data(){
                return {
                    newTodo:{id:null,title:"",completed:false}
                }//定义一个obj;
            },
            methods:{
                addTodo(newTodo){//es6
                    this.todos.push(newTodo);//把新的obj添加在数组中，
                    this.newTodo = {id:null,title:"",completed:false}//初始化newTodo
                },
            }
        });

这里跟我们在初始化vue中的data定义的不一样，这里是用一个函数定义的。这里依然也用到了我们的todos。在template中除了使用x-template也可以把html以字符串的形式传入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue2.0</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <style type="text/css">
        .completed{
            color: green;
            font-style: italic;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-static-top"></nav>
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">welcome Vue 2.0</div>
                    <div class="panel-body">
                        <input type="text" name="" v-model="message" class="form-control">
                        <h1>{{message}} ({{todoCount}})</h1>
                        <todo-items :todos="todos"></todo-items>
                        <todo-form  :todos="todos"></todo-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/x-template" id="todo-items-template">
        <ul class="list-group">
            <li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
                {{todo.title}}
                <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
                <button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
            </li>
        </ul>
    </script>
    <script type="text/x-template" id="todo-add-form-template">
        <form v-on:submit.prevent="addTodo(newTodo)">
            <div class="form-group">
                <input type="text" name="" class="form-gcontrol" placeholder="add a new todo" v-model="newTodo.title">
            </div>
            <div class="from-group">
                <button class="btn btn-success" type="submit">add todo</button>
            </div>
        </form>
    </script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('todo-items',{
            template:'#todo-items-template',
            props:['todos'],
            methods:{
                deleteTodo(index){
                    this.todos.splice(index,1);//删除下标为index的元素
                },
                toggleCompletion(todo){
                    todo.completed = !todo.completed;
                }
            }
        });
        Vue.component('todo-form',{
            template:"#todo-add-form-template",
            props:['todos'],
            data(){
                return {
                    newTodo:{id:null,title:"",completed:false}
                }//定义一个obj;
            },
            methods:{
                addTodo(newTodo){//es6
                    this.todos.push(newTodo);//把新的obj添加在数组中，
                    this.newTodo = {id:null,title:"",completed:false}//初始化newTodo
                },
            }
        });
        new Vue({
            el:'#app',
            data:{
                message:'this is todos',
                todos:[
                    {id:1,title:"learn vuejs",completed:false},
                ],
            },
            computed:{
                todoCount(){
                    return this.todos.length;
                }
            },
        });
    </script>
</body>
</html>