Vue学习过渡动画trasition,和v-pre，v-text,v-colck,全局自定义指令，局部自定义指令，inserted，bind

什么是过渡&动画

元素在显示和隐藏时，实现过滤或者动画的效果。常用的过渡和动画都是使用 CSS 来实现的
在 CSS 中操作 trasition （过滤 ）或 animation （动画）达到不同效果
为目标元素添加一个父元素 , 让父元素通过自动应用 class 类名来达到效果
过渡与动画时，会为对应元素动态添加的相关 class 类名：

1. xxx-enter ：定义显示前的效果。
2. xxx-enter-active ：定义显示过程的效果。
3. xxx-enter-to : 定义显示后的效果。
4. xxx-leave : 定义隐藏前的效果。
5. xxx-leave-active ：定义隐藏过程的效果。
6. xxx-leave-to :定义隐藏后的效果。
   
   
   过滤效果案例
   1 为目标元素添加父元素
   2.定义 class 过渡样式
   指定过渡样式: transition
   指定隐藏时的样式: opacity(持续的时间)/其它
   3.功能实现
   点击按钮后, 显示隐藏文本
   效果1：显示和隐藏有渐变效果

案例2：平滑效果展示



向右滑动5秒效果

CSS 动画用法
同 CSS 过渡，只不过采用 animation 为指定动画效果
功能实现：
点击按钮后, 文本内容有放大缩小效果
在 vue-02-过渡&动画和指令

v-pre

跳过元素和他的子元素的编译过程，这样可以提高他的性能。

v-text

v-text等价于 {{}} 用于显示内容，但区别在于{{}} 会造成闪烁问题， v-text 不会闪烁
如果还想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理
:页面渲染是从上到下

v-cloak

如果想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理，步骤如下：

1. 在被 Vue 管理的模板入口节点上作用 v-cloak 指令
2. 添加一个属性选择器 [v-cloak] 的CSS 隐藏样式： [v-cloak] {display: none;}
   原理：默认一开始被 Vue 管理的模板是隐藏着的，当 Vue 解析处理完 DOM 模板之后，会自动把这个样式去
   除，然后就显示出来。
   
   

自定义指令

自定义指令的作用
除了内置指令外，Vue 也允许注册自定义指令。有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候使用自定义指令更为方便。

字体变成红色，英文变成大写

局部自定义指令，
只能在当前的vue里面



inserted：function()对js的操作
bind:function()；对样式的操作