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