组件化
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>