Getting Vue practiced hand to TodoList

Learning materials

Mu class network - vue2.5 entry

Basic grammar

Sample Code 1

<div id="root">
    <h1>hello {{msg}}</h1>
</div>
<script>
    new Vue({
        el: "#root",
        template: '<h1>hello {{msg}}</h1>',
        data: {
            msg: "world"
        }
    })
</script>

Mount point : dom node instance is bound vue

Template : Mount point output of content, you can write directly on the mount point inside, it can also be achieved through the template properties.

Internal sample code label 1 div <h1>hello {{msg}}</h1>and vue of template: '<h1>hello {{msg}}</h1>'consistent results

Examples : Specifies the mount point, specify the template, the template binding data can be automatically binding, final data generated content to be displayed, and placed among the mount point

Interpolation expression : two curly braces wrapped in a variable

{{Msg}} is an interpolation expression

2 Sample Code

<div id="root">
    <div v-html="msg" v-on:click="handleClick"></div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "<h1>hello</h1>"
        },
        methods: {
            handleClick: function () {
                this.msg = 'world'
            }
        }
    })
</script>

instruction

• v-html: Parsing variables in html format
• v-text: Output variables in text format
• v-on: Event binding, abbreviated as@
• v-bind: Binding properties, abbreviated as:
• v-model: Two-way data binding
• v-if: When you do not meet the conditions of the whole element dom have been cleared, recreate the dom when eligible
• v-show: When you do not meet the conditions, dom elements increase display:nonecss properties,
• v-for: Usage (item, index) in/of list, itemis an element of a list each element value indexis an index value of each element

event

clickThat is, a click event, v-on: click representation bind a click event, as a shorthand way of @click

Code Example 3

<div id='app'>
    <h1 v-html='msg' v-on:click='handleClick' v-bind:title='title1'></h1>
    <input v-model='content'/>
    <div>{{content}}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'hello world',
            title1: 'this is a title',
            content: 'this is content'
        },
        methods: {
            handleClick: function () {
                this.msg = 'ready to learn'
            }
        }
    })
</script>

Two-way data binding : When the page data changes, the variable's value will also change

Code Example 4

<div id='app'>
    姓 <input v-model="firstName">
    名 <input v-model="lastName">
    <div>{{fullName}}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            firstName: '',
            lastName: '',
        },
        // 计算属性
        computed: {
            fullName : function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        // 侦听器
        watch: {
            firstName: function () {
                this.count ++
            },
            lastName: function () {
                this.count ++
            },
            //等价于
            fullName: function () {
                this.count ++
            },
        }
    })
</script>

Calculation property : a property value is computed from other attributes by

Listener : monitor data processing after the change of a property

Code Example 5

<input v-model="todo"/>
    <button @click="submit">提交</button>
    <div v-for="(item, index) in todoList" :key="index" v-model="todoList">
        <input type="checkbox" /> {{item}}
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            todo: '',
            todoList: []
        },
        methods: {
            submit: function () {
                this.todoList.push(this.todo)
                this.todo = ''
            }
        },

    })
</script>

Renderings

• Add elements to the list: push()

Package

A certain part of the page

Global components : the mount can be used directly in the point

Vue.component('todo-item', {
    template: "<li>item</li>"
})

Local assemblies : the need to use the statement in the mount point in the example

var TodoItem = {
    template: "<li>item</li>"
}
new Vue({
    // ...
    // 注册局部组件
    components: {
        'todo-item': todoItem
    },
    // ...
})

Component traditional values : Property Value receiving external delivery of

External by value

<todo-item v-for="(item, index) in todoList" :key="index" :content="item"></todo-item>

Component receives

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

Sons communication components :

Subassembly => parent element: subassembly, the data transmitted by the parent component publish subscribe model

= Parent component> subcomponents: the parent template assembly properties increase, the subassembly receiving property

Parent component sub-assemblies used in the template template:

<!-- @delete="checkout"用于订阅子组件的delete事件，并触发父组件的checkout方法-->
<todo-item
    v-for="(item, index) in todoList"
    :key="index"
    :content="item"
    :index="index"
    @delete="checkout"
></todo-item>

Subassembly:

Vue.component('todo-item', {
    // 接收属性值
    props: ["content", "index"],
    template: "<li @click='checkout'>{{content}}</li>",
    methods: {
        // 子组件模板中的checkout事件
        checkout: function () {
            // 发布订阅模式, 发布delete事件
            this.$emit('delete', this.index)
        }
    }
})

Parent component:

new Vue({
    el: "#app",
    data: {
        todo: '',
        todoList: []
    },
    methods: {
        submit: function () {
            this.todoList.push(this.todo)
            this.todo = ''
        },
        checkout: function (index) {
            this.todoList.splice(index, 1)
        }
    },
})