Vue 简单入门 —— ToDoList

用到的Vue指令有：

v-for
v-on:click
v-model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    list: [],
                    inputValue: '',
                },
                methods: {
                    handleBtnClick: function() {
                        if (this.inputValue.length == 0) return
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

jQuery 写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
    </head>
    <body>
        <div id="app">
            <input id="input" type="text"/>
            <button id="btn">提交</button>
            <ul id="list"></ul>
        </div>
        
        <script>
            function Page() {
                
            }
            
            $.extend(Page.prototype, {
                init: function() {
                    this.bindEvents()
                },
                bindEvents: function() {
                    var btn = $('#btn')
                    btn.on('click', $.proxy(this.handleBtnClick, this))
                },
                handleBtnClick: function() {
                    var inputElem = $('#input')
                    var inputValue = inputElem.val()
                    if (inputValue.length == 0) return
                    var ulElem = $('#list')
                    ulElem.append('<li>' + inputValue + '</li>')
                    inputElem.val('')
                }
            })
            
            var page = new Page()
            page.init()
        </script>
    </body>
</html>

Vue 全局组件 写法

Vue.component() 创建出一个全局组件。
组件的名字叫TodoItem，注意大小写，因为实际使用的时候，却是 写法。

<todo-item v-bind:content="item" v-for="item in list"></todo-item>

通过遍历 list 获取 item，而 item 则与 TodoItem 组件内的对象 content 绑定，即为赋值。

Vue.component("TodoItem", {
    props: ['content'],
    template: "<li>{{content}}</li>"
})

TodoItem 组件在 props数组内标注了对象 content 的存在，然后就可以通过 {{}} 使用了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <todo-item v-bind:content="item" v-for="item in list"></todo-item>
            </ul>
        </div>
        <script>
            Vue.component("TodoItem", {
                props: ['content'],
                template: "<li>{{content}}</li>"
            })
            
            var app = new Vue({
                el: '#app',
                data: {
                    list: [],
                    inputValue: '',
                },
                methods: {
                    handleBtnClick: function() {
                        if (this.inputValue.length == 0) return
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

Vue 局部组件 写法

var TodoItem = {
    props: ['content'],
    template: "<li>{{content}}</li>",
}

定义一个对象就是定义一个局部组件，和全部组件不同的是，你需要在 Vue 实例里面将这个组件注册，不然是没有效果的。

components: {
    TodoItem: TodoItem,
},

注册组件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <todo-item v-bind:content="item" v-for="item in list"></todo-item>
            </ul>
        </div>
        <script>
            var TodoItem = {
                props: ['content'],
                template: "<li>{{content}}</li>",
            }
            
            var app = new Vue({
                el: '#app',
                components: {
                    TodoItem: TodoItem,
                },
                data: {
                    list: [],
                    inputValue: '',
                },
                methods: {
                    handleBtnClick: function() {
                        if (this.inputValue.length == 0) return
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

Vue 局部组件 写法，并且点击显示内容将其删除（子组件向父组件传值）

子组件 TodoItem 在 handleItemClick 方法被触发的时候，调用 

this.$emit('delete', this.index)

向上一级发送信息。

<todo-item v-bind:content="item" v-bind:index="index" v-for="(item, index) in list" @delete="handleItemDelete"></todo-item>

父组件通过监听子组件的 delete 信息，一旦收到信息就执行 handleItemDelete 方法：

@delete="handleItemDelete"

缩写：

v-bind:content="item"
v-bind:index="index"

等于

:content="item"
:index="index"

v-on:click="handleBtnClick"
v-on:delete="handleItemDelete"

等于

@click="handleBtnClick"
@delete="handleItemDelete"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <todo-item v-bind:content="item" v-bind:index="index" v-for="(item, index) in list" @delete="handleItemDelete"></todo-item>
            </ul>
        </div>
        <script>
            var TodoItem = {
                props: ['content', 'index'],
                template: "<li @click='handleItemClick'>{{content}}</li>",
                methods: {
                    handleItemClick: function() {
                        this.$emit('delete', this.index)
                    }
                }
            }
            
            var app = new Vue({
                el: '#app',
                components: {
                    TodoItem: TodoItem,
                },
                data: {
                    list: [],
                    inputValue: '',
                },
                methods: {
                    handleBtnClick: function() {
                        if (this.inputValue.length == 0) return
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    },
                    handleItemDelete: function(index) {
                        this.list.splice(index, 1)
                    }
                }
            })
        </script>
    </body>
</html>