vue 高级功能

作者: zhangjingbibibi | 来源:发表于2018-09-06 17:41 被阅读509次

主要可以分为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

相关文章

  • vue 高级功能

    主要可以分为4part: 过渡 自定义指令 mixins 插件 过渡 transition 是vue提供的内置的组...

  • 最新web前端相关课程学习链接

    js基础篇 js进阶篇 js高级篇 vue基础篇 vue高级篇 react基础 react高级 Nodejs基础 ...

  • 第一章 初识 Vue.js

    1、Vue 提供了现代 Web 开发中常见的高级功能,比如:解耦视图与数据、可复用的组件、前端路由、状态管理、虚拟...

  • 1.初识 Vue.js

    本系列为《Vue.js 实战》的书摘。所有代码的公共部分如下,后续皆省略。 1.现代Web开发中常见的高级功能:①...

  • 高级功能

    所有QQ可用@代替 所有指令自定义,多条指令用|间隔,如踢人指令:T|踢|去死 以下为高级管理可用指令: 停用群管...

  • 高级功能

    所有QQ可用@代替 所有指令自定义,多条指令用|间隔,如踢人指令:T|踢|去死 以下为高级管理可用指令: 停用群管...

  • 高级功能

    所有QQ可用@代替 所有指令自定义,多条指令用|间隔,如踢人指令:T|踢|去死 以下为高级管理可用指令: 停用群管...

  • 高级功能

    消息存储 分布式队列因为有高可靠性的要求,所以数据要进行持久化存储。 消息生成者发送消息 MQ收到消息,将消息进行...

  • 高级功能

    1. 高级功能 1.1 消息存储 分布式队列因为有高可靠性的要求,所以数据要进行持久化存储。 消息生成者发送消息 ...

  • 前端系统学习 10. Vue高级用法

    Vue 高级用法 动画特效 transition 实现路由切换动画 App.vue Home -> List ->...

网友评论

    本文标题:vue 高级功能

    本文链接:https://www.haomeiwen.com/subject/llgxgftx.html