a359611223

2156 经验值

安装vue-2.0-cli的时候 现在多了一条 Install vue-router?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2.0</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
    <style>
        .completed{
            color:aquamarine;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-static top">Vue js 2.0</nav>
        <div id="app" class="container">
            <div class="row">
                <div class="col-md-8 col-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 {todoCount}</h1>
                            <todo-items :todos="todos"></todo-items>
                            <todo-form :todos="todos"></todo-form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
<script type="text/x-temlpate" 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 class="btn btn-warning btn-xs pull-right"
                v-on:click="deleteTodo(index)"
            >Delete
            </button>
            <button class="btn  btn-xs pull-right"
                    v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
                    v-on:click="toggleCompletion(todo)"
            >{todo.completed? 'Done' : 'Do'}
            </button>


        </li>
    </ul>
</script>
<script type="text/x-template" id="todo-add-form-template">
    <form v-on:submit.prevent="addTodo(newTodo)">
        <div class="from-group">
            <input type="text"
                   v-model="newTodo.title"
                   class="form-control"
                   placeholder="Add a new todo">
        </div>
        <br>
        <div class="form-group">
            <button class="btn btn-success" type="submit">Add Todos</button>
        </div>
    </form>
</script>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.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-add-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 World',
            todos:[
                {id:1,title:'Learn Vuejs',completed:false}
            ],
        },
        computed:{
            todoCount:function(){
                return this.todos.length;
            }
        },

    })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2.0</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
    <style>
        .completed{
            color:aquamarine;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-static top">Vue js 2.0</nav>
        <div id="app" class="container">
            <div class="row">
                <div class="col-md-8 col-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 {todoCount}</h1>
                            <ul class="list-group">
                                <li class="list-group-item"
                                    v-bind:class="{'completed' : todo.completed}"
                                    v-for="(todo,index) in todos">
                                    {todo.title}
                                    <button class="btn  btn-xs pull-right"
                                            v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
                                            v-on:click="toggleCompletion(todo)"
                                    >{todo.completed? 'Done' : 'Do'}

                                    </button>
                                    <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="from-group">
                                    <input type="text"
                                           v-model="newTodo.title"
                                           class="form-control"
                                           placeholder="Add a new todo">
                                </div>
                                <br>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit">Add Todos</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello World',
            todos:[
                {id:1,title:'Learn Vuejs',completed:false}
            ],
            newTodo:{id:null,title:'',completed:false}
        },
        computed:{
            todoCount:function(){
                return this.todos.length;
            }
        },
        methods:{
            addTodo(newTodo){
                this.todos.push(newTodo),
                this.newTodo = {id:null,title:'',completed:false}
            },
            deleteTodo(index){
                this.todos.splice(index,1)
            },
            toggleCompletion(todo){
                todo.completed = !todo.completed
            }
        }
    })
</script>
</body>
</html>

同样也是碰到这个问题 核对了一下代码 发现自己漏补了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2.0</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
</head>
<body>
    <nav class="navbar navbar-default navbar-static top">Vue js 2.0</nav>
        <div id="app" class="container">
            <div class="row">
                <div class="col-md-8 col-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="from-group">
                                    <input type="text"
                                           v-model="newTodo.title"
                                           class="form-control"
                                           placeholder="Add a new todo">
                                </div>
                                <br>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit">Add Todos</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello World',
            todos:[
                {id:1,title:'Learn Vuejs'}
            ],
            newTodo:{id:null,title:''}
        },
        methods:{
            addTodo(newTodo){
                this.todos.push(newTodo),
                this.newTodo = {id:null,title:''}
            },
            deleteTodo(index){
                this.todos.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

站长能不能把视频的代码贴在视频下方 不然每次翻找起来还要去视频里找 很麻烦 或者可以在视频下方新建一个笔记模块

安装完后报错,如何解决?

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

瞬间感觉jquery有点辣鸡啊 : )

v-if 和 v-show除了本质的区别 在速度上哪个有优势?

现在没问题了 可能之前有些东西敲的不对 重新来了一遍