Vue入门到TodoList练手

学习资料

基础语法

示例代码1

<div id="root">

    <h1>hello {{msg}}</h1>

</div>

<script>

    new Vue({

        el: "#root",

        template: '<h1>hello {{msg}}</h1>',

        data: {

            msg: "world"

        }

    })

</script>

挂载点：vue实例绑定的dom节点

模板：挂载点输出的内容，可以直接在挂载点内部编写，也可以通过template属性实现。

示例代码1中div标签内部的<h1>hello {{msg}}</h1>和vue中的 template: '<h1>hello {{msg}}</h1>' 效果一致

实例: 指定挂载点、指定模板、绑定数据后可以自动结合模板、数据生成最终要展示的内容，并放到挂载点之中

插值表达式：两个花括号包裹一个变量

{{msg}} 就是一个插值表达式

示例代码2

<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>

指令

v-html: 以html格式解析变量
v-text: 以文本格式输出变量
v-on: 事件绑定，简写为@
v-bind: 属性绑定，简写为:
v-model: 双向数据绑定
v-if: 不符合条件时整个元素dom都清除，符合条件时再重新创建该dom
v-show: 不符合条件时，dom元素增加display:nonecss属性，
v-for: 用法(item, index) in/of list，item是元素列表每个元素值，index是每个元素的索引值

事件

click就是一个点击事件, v-on:click表示绑定一个点击事件，简写方式为@click

示例代码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>

双向数据绑定: 当页面数据变化时，变量的值也会同时变化

示例代码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>

计算属性: 一个属性的值是通过其他属性计算得来

侦听器: 监听一个属性的变化后进行数据处理

示例代码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>

效果图

给列表增加元素: push()

组件

页面中的某一部分

全局组件: 在挂载点中可以直接使用

Vue.component('todo-item', {

    template: "<li>item</li>"

})

局部组件: 需要在实例中声明才能在挂载点中使用

var TodoItem = {

    template: "<li>item</li>"

}

new Vue({

    // ...

    // 注册局部组件

    components: {

        'todo-item': todoItem

    },

    // ...

})

组件传值: 接收外部传递的属性值

外部传值

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

组件接收

Vue.component('todo-item', {

    props: ["content"],

    template: "<li>{{content}}</li>"

})

父子组件通信：

子组件=>父组件：子组件通过发布订阅模式，向父组件传递数据

父组件=>子组件：父组件的模板中增加属性，子组件中接收属性

父组件的模板中使用子组件模板:

<!-- @delete="checkout"用于订阅子组件的delete事件，并触发父组件的checkout方法-->

<todo-item

    v-for="(item, index) in todoList"

    :key="index"

    :content="item"

    :index="index"

    @delete="checkout"

></todo-item>

子组件：

Vue.component('todo-item', {

    // 接收属性值

    props: ["content", "index"],

    template: "<li @click='checkout'>{{content}}</li>",

    methods: {

        // 子组件模板中的checkout事件

        checkout: function () {

            // 发布订阅模式, 发布delete事件

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

        }

    }

})

父组件：

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)

        }

    },

})

巴特西