vue.js 入门案例 my todos

来源：互联网发布：域名地址解析编辑：程序博客网时间：2024/06/08 13:35
<html><head>    <title>project</title>    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"></head><body><nav class="navbar navbar-default navbar-static-"><div class="container" id="app"><div class="row"><div class="clo-md-4 clo-md-offset-2"><div class="panel panel-default"><div class="panel-heading">Welcome Vue js 2.0</div><div class="panel-body">    <h1>my todos</h1>    <ul class="list-group">        <li class="list-group-item" v-for="(todo,index) in todos">{{todo.title}}        <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>        </li>    </ul>    <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 todo">        </div>        <div class="from-group">            <button class="btn btn-success" type="submit">Add todo</button>        </div>    </form></div></div></div>  </div></div></nav></body><script src="vue.js"></script><script>    new Vue({        el:'#app',        data:{            message:'hello world',            //数组            todos:[{id:1,title:'go to school'}],            newTodo:{id:null,title:''}        },        methods:{            addTodo(newTodo){                this.todos.push(newTodo)                this.newTodo={id:null,title:''}            },            deleteTodo(index){            //  this.todos.$remove(todo)   删除                this.todos.splice(index,1)            }        }    })/*    v-on:submit.prevent 的 prevent 是阻止默认提交事件;    addTodo(newTodo){} 等同 addtodo:function(){};    this.todos.push(newTodo) 将newTodo添加到todos里    this.newTodo={id:null,title:''} 添加完成后input里为空*/</script></html>
1 0