看vue教程的小摘要（二）

• 访问元素，组件

1.访问根实例
$root
比如：

new Vue({
  data{
    foo:2
  }
})
this.$root.foo

2.访问父级组件
$parent
3.访问子组件
ref

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
与getElementById区别：
获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

• 依赖注入

相比于$parent属性，它可以让我们在任意后代访问到这个父级组件（而不是只能直接后代）
类似发布订阅模式
祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里
用法：
在祖先组件放入provide属性
在后代组件放入inject属性

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject 选项应该是：一个字符串数组，或一个对象

可以结合Symbol使用

const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s },
  // ...
}

传入的值使用this.[name]就可以访问到。可以放在prop或者data里面进行初始化

后代组件接收时，还可以为他设置默认值。当没有传入就使用默认值，有传入就使用传入值。

也可以使用from表示其来源

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

• 递归组件

就是在组件内部调用自己的组件
需要这样调用的话，最重要设置一个出口，否则会报错，内存溢出

当我们需要构建一个文件目录树（像资源管理器那样）
具体请看官网
https://cn.vuejs.org/v2/guide/components-edge-cases.html

• 内联模板

长这样子

<my-component inline-template>
aa  //aa会被渲染出来
</my-component>

作用来说，就是自带插槽的的模板，但是这样会使模板的作用域变模糊，所以不推荐使用啦。
内联模板需要定义在 Vue 所属的 DOM 元素内。

• X-T模板

在script标签内定义模板，通过id拉到template属性那里

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

x-template 需要定义在 Vue 所属的 DOM 元素外。

• 强制更新

vm.$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

• 一次渲染组件

对于静态并且渲染十分消耗性能的组件。可以这样

<div v-once></div>

这样他就不是响应式的，div内容不会更新了。
但是还是避免这种做法，因为后期需要调整，找bug的时候，会麻烦。

• 过渡效果

1.实现方式：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

2.vue提供封装的组件transition
适用于以下情景

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

使用方法：transition包裹起来就可以了

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
①自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

6个过渡的类名：
v-enter定义进入过渡的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

如果有多个transition 组件，需要提供name识别

<transition name="fade"></transition>
//css文件
.fade-enter-active{
  transition: all .3s ease;
}

那么上面的名称就会变为fade-enter-active等

自定义的过渡类名

<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >

.animated tada{...}

CSS 过渡，动画：

.fade-enter-active {
  transition: all .3s ease;
}
@ke
.fade-enter-active {
  animation: bounce-in .5s;
}
@keyframes fade-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

transition和animation区别：
animation：单帧绘制，支持设定关键帧，可以绘制出复杂的效果。支持循环。通过帧设定属性变化
transition：单次触发效果播放一次，不支持循环。常常与js搭配，通过js改变属性，触发transition操作

②如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
当只用 JavaScript 过渡的时候，在 enter和leave中必须使用done 进行回调。否则，它们将被同步调用，过渡会立即完成。

leave: function (el, done) {
    // ...
    done()
  },

v-bind:css="false"
//直接跳过第一步，检查第二步

③如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

使用 Velocity.js 的简单例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<transition
    v-on:before-enter="beforeEnter"   v-on:enter="enter"
v-on:leave="leave"   v-bind:css="false"
  >
 </transition>

methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
}
- #####初始渲染的过渡
和name一样，在transition加上appear属性，然后动画名字也不会变成
`appear-class="[name]"`

• 多组件渲染

transition里面有v-if和v-else
挂载key值，在script部分进行逻辑处理。

• 过渡模式

1.使用mode属性
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
2.多个组件的过渡
使用动态组件即可

• 列表过渡

在这种场景中，使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：

1.不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
2.过渡模式不可用，因为我们不再相互切换特有的元素。
3.内部元素 总是需要 提供唯一的 key 属性值。
4.CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

...
后面的其他效果不看了，用到再说吧。