vue 高级功能

主要可以分为4part：

• 过渡
• 自定义指令
• mixins
• 插件

过渡

image.png

transition 是vue提供的内置的组件

过渡 可以分为2种过渡：css过渡 和 js过渡

css 过渡

image.png image.png image.png

在vue中，有时候会出现一种诡异的情况，当几个过渡的标签名都一样的时候，它可能无法进行过渡，比如，这里，如果标签都为p的时候，它是没有动画效果的，这时候，我们需要在每一个p标签中加一个key。

image.png

js过渡

image.png image.png

参考官网api文档

image.png image.png

自定义指令

自定义指令：顾名思义，就是自己去写一个指令。分为2种：

• 局部的自定义指令
• 全局的自定义指令

如何设置自定义指令？
通过directives

image.png

然后用v-xx，eg：v-color
上面这种是使用在component中的指令。接下来讲讲全局性的指令。
这是全局指令：

image.png image.png image.png image.png

插件

插件其实是我们经常用到的东西，我们可以这样使用插件。

首先，在根目录下找到package.json文件。
tnpm i xxx --save

image.png image.png

很多插件在awesome-vue中可以找到

介绍几个 autoprefixer 是你在写css3的时候，如果存在浏览器兼容性问题，它会自动给你补全

单文件组件和vue-cli

vue-cli主要是用于初始化一个vue项目

vue-cli 是官方提供的脚手架工具

image.png

步骤 安装

image.png