直接添加到index.html中。
<template> <div> <transition> <h1 v-show="show">{{msg}}</h1> </transition> <br> <button @click="change">测试</button> <br> <button @click="dong">test</button> <br> <transition> <p v-show="newshow">我现在住在加利福尼亚州的奥克兰</p> </transition> <br> <button @click="san">第三方动画库</button> <br> <transition enter-active-class="animated hinge" leave-active-class="animated flip"> <h1 v-show="newsan">CSS动画库</h1> </transition> </div> </template> <script> export default { name: 'Donghua', data() { return { msg: '过渡测试', show: true, newshow: true, newsan: true, } }, methods: { change() { this.show = ! this.show; }, dong() { this.newshow = ! this.newshow; }, san() { this.newsan = !this.newsan; } } } </script> <style> .fade-enter, .fade-leave-to{ transform: translate(20px,0); /* opacity: 0; */ } .fade-enter-to, .fade-leave{ /* opacity: 1; */ transform: translate(-20px,0) } .fade-enter-active, .fade-leave-active{ /* transition: opacity 3s */ transition: all 2s } .dongba-enter-active{ animation: bounce-in .5s; } .dongba-leave-active{ animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } h1{ position: absolute; } </style>所用动画都应该设置为浮动的，不然会出现下拉或滚动条
position: absolute; SVG可参考这里
二十、自定义指定 全局指令如自定义自动聚焦输入框指定：
main.js中自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })自定义指令的使用：
<template> <div> <input type="text" v-focus> </div> </template> <script> export default { name: 'zidingyi', } </script> <style></style> 局部指令将自定义指令放在使用的组建中：
<template> <div> <input type="text" v-focus> </div> </template> <script> export default { name: 'zidingyi', directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } } </script> <style></style> 二十一、过滤器如：自动转换首字母为大写：
<template> <div> 首字母自动转换： <input type="text" v-focus v-model="msg"> <br> <span>{{ msg | capitalize}}</span> </div> </template> <script> export default { name: 'zidingyi', data() { return { msg: '', } }, directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } } </script> <style></style>