vue.js 入门案例 my todos

<html>
<head>
    <title>projecttitle>
    <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.0div>
<div class="panel-body">

    <h1>my todosh1>
    <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)">Deletebutton>
        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 todobutton>
        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>

你可能感兴趣的:(vue)