1. 构建用户界面，只关注View层
2. 简单易学，简洁、轻量、快速
库，是一封装好的特定方法的集合，提供给开发者使用，库没有控制权，控制权在使用者手中；
框架，框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当完整的解决方案，而且控制权的在
框架本身，使用者要找框架所规定的某种规范进行开发

所谓的渐进式，可以一步一步、有阶段性的使用Vue，不是必须在一开始把所有的东西都用上。

1. 大规模的状态管理(vuex)
2. 
   

   ponent('组件名',{选项对象})可以直接定义组件，第二个参数直接提供一个对象，vue内部会自动调用ponent('custom-ex',{

   • 选项对象的components属性注册局部组件，只能在所注册的作用域模板中使用；
     局部组件就是在哪里定义，在哪里使用；

   //这个就是局部组件，局部组件的作用域只在new Vue的这个模板的范围中使用， //不可以用在其它地方，比如放到其它组件中是不可以的，会报错；

   1. data必须是一个函数，函数中返回一个新对象，如果是对象形式会警告必须是函数；
   2. 这样做防止组件引用同一个对象，导致数据相互影响；

   prop上的属性都会放在当前组件的实例上面
   props:['test'],可以是多个，也可以是对象形式的；

   /*将接收的数据显示到页面中*/ //通过自定义事件的方法，实现子组件向父组件通信 //父组件中写自定义的事件，如果有参数传过来，这里可以直接接收传过来的参数 //从页实现父组件收到子组件的值 //父组件使用$emit方法传值，第二个参数传需要传的值， // 这里测试没有用到参数 //在组件中的model对象中，可以改变v-model接收值的名字。 //这里相当于改了个别名

   原理：动态绑定要改变的数据message，监听input事件，并将value值赋值给要改变的message msg2="子组件的属性"：msg2属性绑定的是写死的数据； 只要在slot标签中写key=value格式的值，都会存到props中，保存的是对象格式， 所以上面就可以使用slot-scope标签中使用props去获取子组件中相应的值； ms1:'我是父组件的数据'

   说明：以下三个所需要的API不是绝对的，具体还要看实现的业务需求；

   • Vue 组件的 API 来自三部分——prop、事件和插槽

   1. Prop 允许外部环境传递数据给组件；
   2. 事件允许从组件内触发通过外面；
   3. slot插槽允许外部环境将额外的内容组合在组件中；

   //定制的数据都是放在props中 1.将写好的props中的数据，都绑定到组件结构中,就可以在组件标题上自定义数据了 2.在methods中发布确认和取消按钮的事件，事件名为：gogo，nono /*在组件中发布关心的按钮事件*/ //改变父组件传来的show变量的值，让弹窗隐藏 //改变父组件传来的show变量的值，让弹窗隐藏 model框默认是隐藏的，当点击按钮或者触发一个其它事件的时候才会显示出来； 1.在父级组件中定义一个show的变量，默认为false隐藏 2.当触发某个事件时，由子级组件改变这个变量来实现显示与隐藏； 那么这里涉及到了数据的双向绑定，可以使用.sync或v-model来实现； /*父级这里写要自定义的行为*/ //这里可以写任何点击确认按钮后，要做的事情 //创建一个自定义指令 //将元素插入到body中

   一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。Vue在执行过程中会自动调用生命周期钩子函数，只需要提供这些钩子函数即可钩子函数的名称都是Vue中规定好的；

   created：实例已经创建完成之后被调用。但挂载阶段还没开始，$el属性目前不可见。常用于ajax发送请求获取数据；

   beforeMount：在挂载开始之前被调用；
   mounted：vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作；beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用；
   

   一.数据驱动的选项卡小练习：

   v-bind:class="{class名字：表达式}"，根据表达式的布尔值，决定这个元素是否要添加这个class，true 添加，false不添加； 当然在控制style中可以同时添加多个属性，使用逗号隔开，带单位的正常加上单位； 这个案例主要通过创建变量itemIndex,在按钮点击时，改变itemIndex的值。 通过改变itemIndex的值来判断按钮与选项块的显示与隐藏， 从而实现数据驱动选项卡； //准备好要显示的数据 //在按钮点击时，将当前传过来的下标值，赋值给itemIndex变量

    //好友列表大致思路和选项卡是相同的，不同的是里面会有列表收回的交互；
    //判断如果点击的元素下标与showIndex相等，那就表示下拉列表是已经显示出来的。
    //这时就需要把showIndex设置为-1，这样下拉列表就会隐藏回去
    //否则就是没显示出来的，就将当前点击的元素下标，赋值给showIndex变量
   

   三.音乐全选与单选小练习

   //数据中的checked用于标识是否选中 //过滤所有checked值为true，并且为true的长度要与数据长度相等，就表示全部都选中了 //把这个值赋值给checked属性，就可以控制全选了。 reduce传一个函数参数，可以说是一个累加器，通过str1与str2相加，可以得到累计的数 reduce，会传入两个参数，第一个参数是函数，函数中有两个参数，分别是初始值str1,从数组中拿的第一个值str2； 第二个参数(n)，是设置的初始值，这里输入几就是从几开始;初始值可以写成一个对象格式，也可以是一个数字； //数组中是对象格式的写法 },{n:0,m:1});//这里的初始值参数也可以是一个对象 1.选择手机商品的4种参数，并显示到'你的选择'中，并有选中后的样式； 2.每种品牌手机的参数，只能选择一个(4行参数分别是单选)； 3.在'你的选择'中显示的信息，必须要按照品牌--网络这样的顺序，不可以改变顺序； 4.即使删除其中的参数，也必须要按照要求3中的顺序； 对每一个商品的操作说明： 3.给每一个商品加点击事件 listData：当前点击的商品数据对象 index：当前类型商品的索引 //给每个商品对象中添加一个titleIndex属性，值是对应的索引；用于记录选中商品的位置 //给goods对象数据，格式为：key值放当前所有行的下标，value放当前点击的商品数据 //key值放当前商品所在行下标，目的是一行商品只能选一个，不可以多选，这样可以通过key的唯一性来实现单选 key:当前商品下标,因为这里的goods存的key，就是当前商品的下标，所以这里直接使用Key值即可 //根据当前删除商品的下标，删除goods对象中对应的商品 //这行代码处理当删除商品后，选中商品的样式要去掉 编辑时要显示的输入框，需要将当前数据再显示到这个框中 1. 增删改查数据，要使用localStorage做数据持久化 2. 根据hash不同，过滤渲染的数据 3. 自己设计数据结构 //页面一加载先获取存储的todoData，没数据就返回一个空数组 //将三种hash值放到对象中过滤 //当listData对象中数据发生改变时，就创建本地存储 //methods上面的方法，也会挂在实例上 1.编辑方法是在双击某条数据时，会显示输入框，这个是通过class样式来控制的， 所以，这里使用的方法是，通过变量，保存当前点击数据的下标，来判断是否添加输入框的class名； 2.在双击后，输入框需要获取焦点； 直接在方法里写获取焦点是没有效果的，因为编辑的dom是动态判断显示的，页面加载后，编辑的输入框 并没有更新完，就直接获取了，所以这个时候是找不到输入框的； 这里处理的办法使用的是,Vue.nextTick();dom更新后才触发的方法； //编辑的时候，保存一下编辑前的数据 //编辑输入框获取焦点 //这里通过this.$refs.(ref的名字),可以获取到有ref属性的元素,具体使用方法和注意事项，请查API //判断是否为空，为空就删除数据 如果是空，就调删除方法，删除数据，这里传的参数是一个下标， 所以这里使用了findIndex()es6新方法，来找到对应的下标； //通过改变editIndex变量为-1，去掉编辑样式 //编辑完后，清空编辑前的数据 //通过改变editIndex变量为-1，去掉编辑样式 //把编辑前保存的数据，赋值给当前数据 1.页面加载后，先拿到hash值; 3.逻辑，hash为这和不存在的hash，都默认是all //改变hash值，触发的事件 //判断hash值是否为空，如果为空，就返回all //

   注：以上笔记不是全部内容，会不定期更新，增加一些小练习的代码；