前言
尚硅谷的Vue教程已经做完了，原本打算去看Vue Cli3.0全栈项目之资金管理系统带权限教程
奈何 node.js 还没有学习，教程提到要有一定的基础，所以我打算先把这个教程放一放。
然后又找了一个 Vue 教程，打算再重新过一遍基础，也可以发现一些新的 Vue 知识。
input输入
在Vue中 使用条件渲染来切换 input 的输入
如果 input 没有指定key值，那么切换的输入框会继承之前输入框中的内容
组件使用细节
使用 is 属性可以根据Vue的组件过滤放到相应位置。
如果直接使用组件标签，可能会导致无法放到HTML正确的位置上
Vue 比较起 JQ 插件，更加注重数据的处理，而非 DOM 的处理。
这样有利于节省大量的代码，也让运行效率大大提升。
尽管Vue不推荐操作DOM，但是在一些复杂的场景中，还是需要有对 DOM 进行处理的功能
在 HTML 标签中嵌入 ref 属性，就可以通过 Vue实例下的 $ref 获取到相关的 DOM 元素。
DOM元素如果是Vue组件则获取到了组件的引用，可以获取到组件内部的数据。
父子组件传值
父子组件传值其实很类似于函数传参。
也提供了参数的校验器方便Debug
如果没有传参，但是在父组件的调用上写了一些特殊的属性，会自动添加到子组件上。
插槽
通过slot的方式可以再父组件中嵌入Html传到子组件当中
可以设置默认的插槽内容
可以通过制定插槽形成映射关系，从而显示对应的内容
作用域传值
template 的 slot-scope 可以接受插槽返回的值
动态组件
通过传递 is 判断type变量中的内容，从而切换不同组件
在组件的切换过程中，vue需要创建新的组件，然后再将旧的组件删除
这个过程会消耗一定的资源。
使用 v-once属性 可以直接将数据存储到内存中，下次调用直接从内存中取值，效率更高。
Vue CSS3 动画过渡
Vue通过添加class的方式来实现动画效果
上图就是自动添加 class 的流程
因此要实现过渡，需要定义 CSS 这些 class 切换的效果
大概可以参考上述的写法
v-enter v-leave-to 静态
带有 active 后缀 为 动态
可以给transition命名，默认引用是 v- 开头，如果加了 name 怎会沿用 name- 开头
也可以添加 enter-active-class 和 来分别指定 CSS
animate.css 指定动画效果 官网参考
不用自己来写动画 CSS
Vue js 动画过渡
vue的transition提供了一些钩子可以触发相关的回调函数
有enter当然也有leave
通过 methods 定义对应的触发函数
运行中的函数会对带一个done参数来执行结束回调。
velocity.js 是js的动画库，可以轻松实现各种动画过渡。 官网
Vue 多重动画
transition添加 mode 可以实现同时切换的效果
同样的方法可以实现组件间的切换
for循环添加动态效果可以使用 transition-grp 相当于给每个div单独添加了 transition
可以将动画过渡效果封装到组件当中，那么每次调用相关的组件就有相应的动画效果了。
