七亿少女的劫丨
学习Vue js 2.0 第一天-1
webstorm 引用 Vue js 2.0 CDN 使用
1.v-bind
2.v-model
3.template标签生成
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 2.0</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Css/bootstrap.css">
</head>
<style>
.completed {
color: #4cae4c;
text-decoration:line-through;
}
.margin-right-10{
margin-right: 10px;
}
</style>
<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 panel-danger">Welcome vue js 2.0 Tutorial</div>
<div class="panel-body">
<h1>{{message}}</h1>
<input type="text" class="form-control" v-model="message">
<h1>My todos {{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-bind:class="{'completed':todo.completed}"
v-for="(todo,index) in todos">{{todo.title}}
<button type="button" class="btn btn-warning btn-xs pull-right"
v-on:click="deletetodo(index)">deleted
</button>
<button type="button" class="btn btn-xs pull-right margin-right-10"
v-bind:class="[todo.completed ? 'btn-danger':'btn-success']"
v-on:click="toggleCompletion(todo)">{{todo.completed ? 'undo' :'completed'}}
</button>
</li>
</ul>
</script>
<script type="text/x-template" id="todo-form-template">
<form v-on:submit.prevent="addtodo(newtodo)">
<div class="form-group" >
<input type="text" v-model="newtodo.title" class="form-control" placeholder="Add a new">
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Add Todo</button>
</div>
</form>
</script>
<script src="Js/vue.js"></script>
<script>
Vue.component('todo-items',{
template:'#todo-items-template',
props:['todos'],
methods:{
deletetodo(index){
this.todos.splice(index,1)
},
toggleCompletion(todo){
todo.completed = ! todo.completed
}
}
});
Vue.component('todo-form',{
template: '#todo-form-template',
props:['todos'],
data(){
return{
newtodo:{id:null,title:'',completed:false}
}
},
methods:{
addtodo(newtodo) {
this.todos.push(newtodo);
this.newtodo={id:null,title:'',completed:false}
},
}
});
new Vue({
el:'#app',
data:{
message:'hello Vue js 2.0',
todos:[
{id:1,title:'learn Vue js',completed:false}
],
},
computed:{
todoCount(){
return this.todos.length
}
},
})
</script>
</body>
</html>
最终效果
