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> 限制了样式的作用范围：当前组件文件，便于解耦。