vue2.X过渡&动画和自定义指令

1. 过渡效果

2. 动画效果

3. Vue内置指令

4. 自定义指令

vue2.X过渡&动画和自定义指令

transition(过渡) animation(动画)

1. 过渡效果

过渡样式：指定过渡样式：transition 指定隐藏时样式：opacity(持续时间)/其他

transition封装组件，可以给任何元素和组件添加进入/离开过渡

i) 条件渲染使用v-if ii) 条件展示使用v-show

过渡的类名：在进入/离开的过渡中，会有6个class切换

v-enter：定义进入过渡的开始状态
v-enter-active：定义进入过渡生效时的状态
v-enter-to：定义过渡的结束状态
v-leave：定义离开过渡的开始状态
v-leave-active：定义离开过渡生效时的状态
v-leave-to：定义离开过渡的结束状态

注：使用没有名字的<transiton>时，v-是这些类名的默认前缀，当使用<tratition name=”name1”>时，v-enter会被替换为name1-enter

<body><style>/* 显示或隐藏过程中的过渡效果 */.v-enter-active,.v-leave-active{transition: opacity 1s;}/* 显示前和隐藏后 */.v-enter,.v-leave-to{opacity: 0;}/* 针对显示和隐藏指定不同的效果 *//* 显示的过渡效果 */.va-enter-active{color: yellow;transition: all 1s;}/* 隐藏的过渡效果 */.va-leave-active{transition:  all 3s;}/* 显示前和隐藏后的效果 */.va-enter,.va-leave-to{color: red;opacity: 0;/* X轴右移 */transform: translateX(20px);}</style><script src="./node_modules/vue/dist/vue.js"></script><div id="app"><!-- 取反使用 --><button @click="show=!show">渐变过渡</button><transition name="v"><p v-show="show"><strong>测试渐变效果</strong></p></transition></div><div id="app2"><!-- 取反使用 --><button @click="show=!show">渐变平滑过渡</button><transition name="va"><p v-show="show"><strong>测试渐变效果</strong></p></transition></div><script>new Vue({el:"#app",data:{show:true,}})new Vue({el:"#app2",data:{show:true,}})</script></body>

效果：

前：

点击按钮后：

2. 动画效果

<body><script src="./node_modules/vue/dist/vue.js"></script><style> /* 显示过程能中的动画效果 */.bounce-enter-active{animation: bounce-in 1s;}/* 隐藏过程中的动画效果 */.bounce-leave-active{animation: bounce-in 1s reverse;}@keyframes bounce-in {0%{transform: scale(0);}25%{transform: scale(0.5);}50%{transform: scale(1);}75%{transform: scale(1.5);}100%{transform: scale(2);}}</style><div id="demo"><button @click="show=!show">动画</button><br><transition name="bounce"><p v-show="show" style="display: inline-block;"><strong>测试文字</strong></p></transition></div><script>new Vue({el:"#demo",data:{show:true,}})</script></body>

效果：

逐步放大缩小

3. Vue内置指令

官方文档： https://cn.vuejs.org/v2/api/#指令

<body><style>[v-cloak]{display: none;}</style><script src="./node_modules/vue/dist/vue.js"></script><div id="app" v-cloak><!-- v-text --><h3>{{msg}}</h3><h3>{{msg}}</h3><h3>{{msg}}</h3><h3 v-text="msg"></h3><span v-pre>{{测试文本}}</span></div><script>new Vue({el:"#app",data:{msg:"测试"}})</script></body>

v-html 内容按普通 HTML 插入，可防止 XSS 攻击

v-show 根据表达式的真假值，切换元素的fisplayCSS属性来显示隐藏元素

v-if 根据表达式的真假值，来渲染元素

v-else 前面必须有v-if或v-else-if

v-else-if 前面必须有v-if或v-else-if

v-for 遍历的数组或对象

v-on 绑定事件监听器

v-bind 用于绑定元素属性

v-model 在表单控件或者组件上创建双向绑定

v-once 一次性插值，当后面数据更新后视图数据不会更新

v-pre 可以用来显示原始插入值标签 {{}} 。并跳过这个元素和它的子元素的编译过程。加快编译。

v- text等价于{{}}用于显示内容，但区别在于:{{}}会造成闪烁问题， v-text 不会闪烁,如果还想用{{}}又不想有闪烁问题，则使用v-cloak来处理

v-cloak步骤如下：在被 Vue 管理的模板入口节点上作用v-cloak指令,添加一个属性选择器 [v-cloak] 的CSS 隐藏样式： [v-cloak] {display: none;}.原理：默认一开始被 Vue 管理的模板是隐藏着的，当 Vue 解析处理完 DOM 模板之后，会自动把这个样式去除，然后就显示出来。

4. 自定义指令

Vue官方文档：自定义指令 — Vue.js

(1) 注册全局指令：Vue.directive(“自定义指令名称”，{

Inserted:function(el,binding){

//el表示使用此指令的DOM元素，binding可获取此指令的绑定值

} })

(2)注册局部指令：new Vue({directives:{

“自定义指令名”:{//指令名不要带v-

Instered(el,binding){

} } } })

(3) 使用指令：引用指令时，指令前面加v-;直接在元素使用上，v-指令名 = “表达式”

<body><script src="./node_modules/vue/dist/vue.js"></script><div id="app"><!-- v- 属于固定使用 --><!-- 自定义指令名称时最好使用添加-的形式，驼峰式命名在使用时也需要改为添加-的形式 --><p v-upper-text="message">xxxxx</p>自动获取焦点:<!-- 指令名称为focus 使用时加v- --><input type="text" v-focus></div><script>// 注册全局自定义指令// 在vue实例上注册vue自定义指令// 第一个参数式指令名称，自定义的，第二个参数是对象,对象存在钩子函数，钩子函数自动调用Vue.directive("upper-text",{//自定义指令的钩子函数自动调用// bind：只调用一次，指令第一次绑定到元素时调用// 一般对样式的操作放到bind里面bind:function(el){// 输出时字体颜色变成黄色el.style.color = "yellow"},// inserted:被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已经被插入文档中)// 一般对JS的操作一般放到inserted钩子中// binding钩子函数的参数，一个对象inserted:function(el,binding){console.log(binding);// 转换成大写,输出时字母变成大写el.innerHTML = binding.value.toUpperCase();// el.innerHTML = binding.name.toUpperCase();}})new Vue({el:"#app",data:{message:'abc,测试数据',},// 注册局部的自定义指令directives:{"focus":{inserted:function(el,binding){el.focus()}}}})</script></body>

运行效果：

自动获取焦点效果

Vue基础复习(2)Vue2.X过渡、动画和自定义指令相关推荐

android自定义过渡动画,11.自定义过渡动画
11.1 问题应用程序需要自定义Activity切换或Fragment切换时产生的过渡动画. 11.2 解决方案 (API Level 5) 要修改Activity间的过渡动画,可以使用overri ...
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
动态组件.插槽.自定义指令学习目标 1.能够了解组件进阶知识. 2.能够掌握自定义指令的创建和使用. 3.能够完成tabbar案例的开发. 1.组件进阶 1.0 动态组件问题:如何切换2个组件,互 ...
VUE2第五天学习---自定义指令
阅读目录 1.理解VUE中的自定义指令回到顶部 1.理解VUE中的自定义指令默认核心指令有 (v-model 和 v-show), 但是有时候我们需要用到自定义指令,在vue中,代码复用主要形式和 ...
html怎么设置过渡字体,web前端入门到实战：css3基础-文本与字体+转换+过渡+动画+案例...
Css3文本与字体文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: norm ...
[vue]vue基础复习项案例stepbystep
看本篇第二次复习内容即可. 还有一些文档了这个如 https://www.cnblogs.com/iiiiiher/p/9508733.html https://www.cnblogs.com/ii ...
Vue「五」—— 动态组件、插槽、自定义指令
Vue 系列笔记第五篇.本文参考:>> 黑马程序员 Vue 全套视频教程系列文章阅读
vue基础（主要为vue3）
VUE基础入门 vue 简介 Vue 是一套用于构建用户界面的前端框架. 1.1构建用户界面前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观.舒适.好用的网页. 1.1构建 ...
vue基础，加少量的webpack，以及脚手架搭建vue项目
这是我学习vue基础时候的笔记,在b站上跟着敲的,一开始是有道云笔记的形式,为了上传到博客整理了两个小时改成了markdown的形式,喜欢的点个赞,谢谢. 文章目录一. vue基本使用 1. 实例参 ...
vue2的指令和自定义指令
目录 1. vue内置指令 1-1. v-text 1-2. v-html 1-3. v-pre 1-4. v-cloak 1-5. v-once 1-6. v-for 1-7. v-if 和 v-e ...

Vue基础复习(2)Vue2.X过渡、动画和自定义指令

vue2.X过渡&动画和自定义指令

1. 过渡效果

2. 动画效果

3. Vue内置指令

4. 自定义指令

Vue基础复习(2)Vue2.X过渡、动画和自定义指令相关推荐

最新文章

热门文章