112.【Vue-细刷-03】
Vue-03
- 1.使用脚手架创建模板项目
- 2.分析Vue脚手架
- 3.关于main.js中的h说明
- 4.Vue中使用ref的Dom节点
- 5.Vue中的props
- 6.Vue的作用域(Scope)
- 7.Vue组件注册名与Vue组件引用名
- 8.关于语法检查的配置 ⭐⭐
(二十)、过渡和动画
1.过渡案列_原生实现
这里我们对img标签类名的修改的时候,我们需要使用到querySelectory(".类名")。不能使用GetElementByName().
transform: 透明和旋转 transition: 过渡 scale() 缩放 querySectory(): 获取Dom元素,可以修改className
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .picture{ width: 400px; /* 是图片在变化,我们需要给图片添加过渡: 1s监听一次,对所有的元素 匀速 */ transition: 1s all linear; } .leave{ /* 透明度+旋转 */ transform: scale(0) rotate(180deg); } .come{ /* 透明度+旋转 */ transform: scale(1) rotate(0deg); } </style> </head> <body> <button id="btn">点我切换</button><br> <img class="picture" src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"> <script type="text/javascript"> var btn=document.getElementById("btn"); // 这里我们使用getElementByName()实现不了。 const img=document.querySelector(".picture"); btn.addEventListener('click',()=>{ if(img.className == "picture"|| img.className =="picture come"){ // 这里我们对img标签里面的class名进行修改 img.className='picture leave'; } else{ img.className="picture come"; } }) </script> </body> </html> 32
2.过渡案列_Vue实现
1.需要实现v-show(); 2.需要过渡标签:<transition name=xxx></transition> 3.需要添加过渡的起点 终点 过程。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .picture { width: 400px; } /* 离开起点 : 显示程度为1,不旋转*/ .qiuku-leave { opacity: 1; transform: scale(1) rotate(0deg); } /* 离开终点 */ .qiuku-leave-to { opacity: 0; transform: scale(0) rotate(180deg); } /* 离开过程:在过程中添加过渡 */ .qiuku-leave-active { transition: 1s all linear; } /* */ .qiuku-enter { opacity: 0; transform: scale(0) rotate(180deg); } .qiuku-enter-to { opacity: 1; transform: scale(1) rotate(0deg); } .qiuku-enter-active { transition: 4s all linear; } </style> <script src="../js/vue.js"></script> </head> <body> <!-- 1.Vue实现过渡 (1).在目标元素外包裹<translation name="xxx"></translation>标签 (2).编写css样式: 进入: 进入起点:(xxx-enter) 进入终点:(xxx-enter-to) 进入过程:(xxx-enter-active) 离开: 离开起点:(xxx-leave) 离开终点:(xxx-leave-to) 离开过程:(xxx-leave-active) --> <div id="root"> <button @click="isShow=!isShow">点我切换</button><br> <!-- 我们为图片添加: 过渡。第一步:需要使用到v-show.第二步: 需要在外部添加过渡标签。 --> <transition name="qiuku"> <img v-show="isShow" class="picture" src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"> </transition> </div> <script type="text/javascript"> new Vue({ el: "#root", data: { isShow: "true" }, }); </script> </body> </html>
3.动画案列_Vue实现 (1)
animation: 动画名字 延迟几秒。 @keyframes: 动画帧率展现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .picture { width: 400px; } .enter { animation: jsxs_enter 1s; } @keyframes jsxs_enter { 0%{ /* scale 缩放 */ transform: scale(1); } 50%{ /* scale */ transform: scale(1.3); } 100%{ /* scale */ transform: scale(0); } } .leave{ animation: jsxs_leave 1s; } @keyframes jsxs_leave { 0%{ /* scale 缩放 */ transform: scale(0); } 50%{ /* scale */ transform: scale(1.3); } 100%{ /* opacity: 0; */ transform: scale(1); } } </style> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <button id="btn" @click="click_btn" >点我切换</button><br> <img class="picture" src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"> </div> <script type="text/javascript"> new Vue({ el: "#root", data: { isShow: "true" }, methods: { click_btn(){ var btn=document.getElementById("btn"); const img=document.querySelector(".picture"); if(img.className=="picture"||img.className=="picture leave"){ img.className="picture enter"; }else{ img.className="picture leave"; } } }, }); </script> </body> </html>
4.动画案列_Vue实现(2)
animation : 名字 时间 1.基本编码: (1).在目标元素外包裹<transition name="xxx"></transition> (2).编写:进入动画、离开动画的样式 3.类名规范: 进入动画样式: xxx-enter-active 离开动画样式: xxx-leave-active
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .picture { width: 400px; } .qiuku-enter-active{ animation: jsxs_enter 1s; } @keyframes jsxs_enter{ 0%{ /* scale 缩放 */ transform: scale(0); } 50%{ /* scale */ transform: scale(1.3); } 100%{ /* scale */ transform: scale(1); } } /* 动画离开 */ .qiuku-leave-active { animation: jsxs 1s; } @keyframes jsxs{ 0%{ /* scale 缩放 */ transform: scale(1); } 50%{ /* scale */ transform: scale(1.3); } 100%{ /* scale */ transform: scale(0); } } </style> <script src="../js/vue.js"></script> </head> <body> <!-- 动画: 1.基本编码: (1).在目标元素外包裹<transition name="xxx"></transition> (2).编写:进入动画、离开动画的样式 3.类名规范: 进入动画样式: xxx-enter-active 离开动画样式: xxx-leave-active --> <div id="root"> <button @click="isShow=!isShow" >点我切换</button><br> <transition name="qiuku"> <img v-show="isShow" class="picture"src="https://img2.baidu.com/it/u=3626502260,211748893&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"> </transition> </div> <script type="text/javascript"> new Vue({ el: "#root", data: { isShow: "true" }, }); </script> </body> </html>
5.Vue实现时间格式化
时间格式化CDN
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script> • 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <!-- 利用cdn远程引入 moment.js --> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script> </head> <body> <div id="root"> <h2>现在的时间是:</h2> <h3>{{fmtData("YYYY-MM-DD HH:mm:ss")}}</h3> <h3>{{fmtData()}}</h3> </div> <script type="text/javascript"> new Vue({ el:"#root", data:{ time:Date.now(), }, methods: { // 假如说:"没有信息传入,那么我们就让这个格式称为默认的。如果有信息传入,我们就使用信息传入的" fmtData(str="YYYY-MM-DD"){ // 这里的moment的参数如果为空: 那么就解析此时此刻的时间。如果添加参数,那么就解析添加的 return moment(this.time).format(str); } }, mounted() { setInterval(()=>{ this.time=Date.now(); },1000); }, }); </script> </body> </html>
6.Vue实现过滤器
``
配置过滤器
// 全局注册的过滤器: "名字",函数(value就是被调用者的值,str就是我们传入的值) Vue.filter('dataFormat',function(value,str="YYYY-MM-DD"){ console.log(value+" "+str); return moment(value).format(str); });
使用过滤器
<div id="root"> <h2>现在的时间是:</h2> <h3>{{time |dataFormat("YYYY-MM-DD HH:mm:ss")}}</h3> <h3>{{time | dataFormat}}</h3> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <!-- 利用cdn远程引入 moment.js --> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script> </head> <body> <div id="root"> <h2>现在的时间是:</h2> <h3>{{time |dataFormat("YYYY-MM-DD HH:mm:ss")}}</h3> <h3>{{time | dataFormat}}</h3> </div> <div id="root2"> <h2>现在的时间是:</h2> <h3>{{time |dataFormat("YYYY-MM-DD HH:mm:ss")}}</h3> <h3>{{time | dataFormat}}</h3> </div> <script type="text/javascript"> // 全局注册的过滤器: "名字",函数(value就是被调用者的值,str就是我们传入的值) Vue.filter('dataFormat',function(value,str="YYYY-MM-DD"){ console.log(value+" "+str); return moment(value).format(str); }); new Vue({ el:"#root", data:{ time:Date.now(), }, mounted() { setInterval(()=>{ this.time=Date.now() },1000) }, }, ); new Vue({ el:"#root2", data:{ time:Date.now(), }, mounted() { setInterval(()=>{ this.time=Date.now() },1000) }, }, ); </script> </body> </html>
7.Vue常用内置指令
常用的指令: v-text :更新元素的innerText v-html :更新元素的innerHtml v-if :条件渲染(动态控制结点是否存在) v-else :条件渲染(动态控制结点是否存在) v-show :条件渲染(动态控制display) v-for :遍历数组/对象 v-on: 绑定时间监听,可简写为@ v-bind:xxx :强制绑定解析表达式 v-model: 双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <!-- 常用的指令: v-text :更新元素的innerText v-html :更新元素的innerHtml v-if :条件渲染(动态控制结点是否存在) v-else :条件渲染(动态控制结点是否存在) v-show :条件渲染(动态控制display) v-for :遍历数组/对象 v-on: 绑定时间监听,可简写为@ v-bind:xxx :强制绑定解析表达式 v-model: 双向绑定 --> <div id="root"> <!-- 这里的指令语法会覆盖掉原来的插值语法 --> <a :href="url" v-text="text">{{text1}}</a> <h2 v-html="htmlStr">欢迎呀 非Vue</h2> </div> <script type="text/javascript"> new Vue({ el:"#root", data:{ url:"https://www.baidu.com", text:"点我去学习", text1:"122", htmlStr:"<h2>欢迎呀 Vue</h2>" } }); </script> </body> </html>