Vue.js学习记录-1-入门 + TodoList案例

Vue入门

    MVVM框架：观察者双向绑定
        model - viewModel - view
        Js对象    观察者     DOM
    Vue.js
        轻量级MVVM框架
        数据驱动 + 组件化前端开发
    核心思想：
        数据驱动：DOM是数据的一种自然映射
        组件化：拓展HTML元素，封装可重用代码，viewModel树与DOM树映射

    node.js环境安装 - npm命令安装vue-cli脚手架工具

    Vue2.5入门
        坐标：index_1.html
            实例、模板、挂载点
            差值表达式：{{data}}
            v-text、v-html区别，v-html不会进行转义、v-text会进行转义
            事件v-on(简写 @)模板指令、方法vue实例中的methods中
        坐标：index_2.html
            属性绑定：v-bind(简写 :) 对属性进行绑定 对应实例中data的属性变量
                v-bind:title="title" 对应 Vue实例下data中的title变量
            单向数据绑定：页面展示的内容是由Vue实例中data属性决定的，但是页面无法决定所展示的内容。
            双向数据绑定：页面展示内容和Vue实例中data属性同步变动 v-model：实现数据的双向绑定
        坐标：index_3.html
            计算属性：computed
            侦听器：watch
        坐标：index_4.html 
            点击按钮控制DOM元素消失
                v-if：直接从标签从DOM中移除
                v-show：标签会被隐藏，即：style="display: none;" 频繁使用建议v-show
            v-for：循环遍历展示列表数据
                <li v-for="(item, index) of list" :key="index">{{item}}</li>
                针对列表中元素重复问题，所以将item作为key是不合理的，于是采用index列表索引作为key值。
        坐标：index_5.html
            1. TodoList实现
            2. TodoList组件拆分：
                全局组件：Vue.component('name', {})
                    全局组件中的参数传递：
                        props: ['name']
                局部组件：var obj = {}
                    局部组件需要需要在模板实例中进行注册：
                        component: {
                            'name': obj
                        }  
            3. 组件与实例之间的关系：每一个组件又是一个Vue的实例
            4. 模板template：默认不声明会采用挂载点下的所有内容
            5. TodoList的删除功能
                父组件通过属性(props)向子组件传递数据：
                    父组件绑定属性:param = "value" --> 子组件接收参数:props['param']
                子组件通过发布事件($emit)向父组件传递数据：
                    子组件$emit(evevt, param) --> 父组件监听@event --> 父组件通过监听事件接收参数function(param)
    
    Vue-cli脚手架工具：目录结构、本地调试、代码部署、热加载、单元测试
        单文件组件：.vue文件
            <template> -- 模板 只能有一个最外层元素
            <script> -- 脚本逻辑
            <style> -- 样式
        通过vue-cli脚手架工具实现todolist
    
    全局样式、局部样式
        组件文件中：<style scoped> 限制了样式的作用范围：当前组件文件，便于解耦。

Github案例仓库