vuejs学习总结---基础篇

发布时间：2023-09-06 01:33责任编辑：彭小芳关键词：js vuejs

vuejs项目不支持IE8及以下版本

一、项目搭建

cnpm install --global vue-cli

vue init webpack my-project

cd my-project

cnpm install

npm run dev

二、vuejs过渡

1）css过渡

<transition name="xxx"> //xxx过渡组件的名字
　　<p v-if="show">hello</p> //要过渡的组件或者元素，包裹在transition标签里
</transition>.xxx-enter-active,.xxx-leave-active{　　　　transition: opacity 0.5s}.xxx-enter,.xxx-leave-to{　　opacity: 0}

2）css动画

<div id="example-2"> ?<button @click="show = !show">Toggle show</button> ?<transition name="bounce"> ???<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p> ?</transition></div>.bounce-enter-active { ?animation: bounce-in .5s;}.bounce-leave-active { ?animation: bounce-in .5s reverse;}@keyframes bounce-in { ?0% { ???transform: scale(0); ?} ?50% { ???transform: scale(1.5); ?} ?100% { ???transform: scale(1); ?}}

3)animate.css

vuejs学习总结---基础篇

原文地址：https://www.cnblogs.com/wangpeiyuan/p/8136966.html

vuejs学习总结---基础篇

知识推荐