VUEJS Study Summary---Basic article

Vuejs Project does not support IE8 and the following versions

First, the project construction

CNPM Install--global VUE-CLI

Vue Init webpack My-project

CD My-project

CNPM Install

NPM Run Dev

Ii. Vuejs Transition

1) CSS Transitions

<transition name= "xxx" >//xxx transition Component Name
<p v-if= "Show" >hello</p>//components or elements to transition, wrapped in transition tags
</transition>. XXX-enter-active,.xxx-leave-0. 5s}.xxx-enter,.xxx -leave-0}

2) CSS Animations

<div id= "Example-2" > <button @click = "show =!show" >toggle show</button> <transition name= "Bounce" > <p Vif= "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-inch. 5s;}. Bounce-leave-Active {animation:bounce-inch. 5s Reverse;} @keyframes Bounce-inch {  0%{Transform:scale (0); }  50%{Transform:scale (1.5); }  100%{Transform:scale (1); }}

3) Animate.css

VUEJS Study Summary---Basic article