Vue入门到TodoList练手

学习资料

慕课网 - vue2.5入门

基础语法

示例代码1

    
hello {{msg}}

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

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

示例代码1中div标签内部的

hello {{msg}}

和vue中的 template: '

hello {{msg}}

' 效果一致

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

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

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

示例代码2

指令

• 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

    

    
    
{{content}}

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

示例代码4

    姓 
    名 
    
{{fullName}}

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

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

示例代码5

    提交
    

         {{item}}
    

效果图

• 给列表增加元素: push()

组件

页面中的某一部分

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

Vue.component('todo-item', {
    template: "
item
"
})

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

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

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

外部传值

组件接收

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

父子组件通信：

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

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

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

子组件：

Vue.component('todo-item', {
    // 接收属性值
    props: ["content", "index"],
    template: "
{{content}}
",
    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)
        }
    },
})