文檔:https://cn.vuejs.org/v2/guide/transitions.htmlcss
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background-color:yellow; } .fade-enter,.fade-leave-to{ opacity: 0; transform: translateX(200px); } .fade-enter-active,.fade-leave-active{ transition: all 0.5s ease-in-out; } </style> </head> <body> <div id="app"> <button @click="show=!show">切換</button> <transition name="fade"> <div class="box" v-if="show">始於1886,可口可樂</div> </transition> </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ show:true }, }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; list-style: none; } #app{ width: 600px; margin: 50px auto; } li{ width: 500px; height: 30px; border: 1px dashed #3fa435; margin-top: 10px; } li:hover{ cursor: pointer; background-color: #ff7408; transition: all 0.8s ease; /* hover 動畫效果 */ } /*從這裏開始設置 vue 的動畫*/ .hero-enter, .hero-leave-to{ opacity: 0; transform: translateY(80px); } .hero-enter-active, .hero-leave-active{ transition: all 0.5s ease; } .hero-move{ transition: all 1s ease-in-out; } </style> </head> <body> <div id="app"> <div> <label>姓名: <input type="text" v-model="name"></label> <label>絕招: <input type="text" v-model="unique_skill"></label> <button @click="add()">添加</button> </div> <transition-group tag="ul" name="hero"> <li v-for="(list,index) in lists" @click="del(index)" :key="index"> {{list.name}}:{{list.unique_skill}} </li> </transition-group> </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'', unique_skill:'', lists:[ {name:'鳴人',unique_skill:'螺旋丸'}, {name:'卡卡西',unique_skill:'寫輪複製'}, {name:'雛田',unique_skill:'八卦六十四掌'}, {name:'阿童木',unique_skill:'拳頭'} ] }, methods:{ del(index){ this.lists.splice(index,1) }, add(){ this.lists.push({name:this.name,unique_skill:this.unique_skill}); this.name = ''; this.unique_skill = ''; } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div id="app"> <button @click="flag = !flag">切換</button> <br> <transition enter-active-class="bounceIn" leave-active-class="bounceIn" :duration="{enter:1000,leave:500}" > <img v-if="flag" src="img/1.jpg" alt="" class="animated"> </transition> <h1 class="animated infinite bounce delay-2s">↑↑↑↑↑</h1> </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ flag:false, } }) </script> </body> </html>
其餘動畫操做方式,查看vue官網文檔,這裏先不記錄了。html
如下演示的組件的各類建立方式。在工程化開發中.vue
全局組件,全部實例均可以使用app
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <my-date></my-date> <my-date></my-date> </div> <div id="app2"> <p>------------ app2 -----------</p> <my-date></my-date> </div> <script src="js/vue.js"></script> <script> // 1. 組件構造器 let Profile = Vue.extend({ // 模板選項 template: ` <div> <span>你的生日是:</span><input type="date"> </div> ` }); // 2. 註冊全局組件 Vue.component('my-date',Profile); // 1. 建立Vue的實例 new Vue({ el: '#app', data: { msg: '噠噠噠' } }); new Vue({ el:'#app2' }) </script> </body> </html>
局部組件在各自的實例裏面註冊。ide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p>------------- app -------------</p> <my-date></my-date> <!-- my-color 這裏寫裏也沒用--> <my-color></my-color> </div> <div id="app1"> <p>------------- app1 -------------</p> <my-color></my-color> </div> <script src="js/vue.js"></script> <script> // 1. 組件構造器 let Profile = Vue.extend({ // 模板選項 template: ` <div> <span>日期:</span><input type="date"> </div> ` }); let Profile1 = Vue.extend({ // 模板選項 template: ` <div> <span>Color:</span><input type="color"> </div> ` }); // 1. 建立Vue的實例 new Vue({ el: '#app', data: { msg: '撩課學院' }, components: { 'my-date': Profile } }); new Vue({ el: '#app1', components: { 'my-color': Profile1 } }) </script> </body> </html>
全局組件:函數
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <my-date></my-date> </div> <div id="app1"> <my-date></my-date> </div> <script src="js/vue.js"></script> <script> // 註冊全局組件 Vue.component('my-date', { template: ` <div> <span>日期:</span><input type="date"> </div> ` }); // 1. 建立Vue的實例 new Vue({ el: '#app', }); new Vue({ el: '#app1', }); </script> </body> </html>
局部組件:動畫
<body> <div id="app"> <my-date></my-date> <my-color></my-color> </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{}, components:{ 'my-date':{ template:`<div> <span>日期:</span> <input type="date"> </div>` }, 'my-color': { template: ` <div> <span>Color:</span><input type="color"> </div> ` }, } }) </script> </body>
<body> <div id="app"> <parent></parent> <!--<child></child>--> </div> <script src="js/vue.js"></script> <script> // 1.構造子組件 let child1 = Vue.extend({ template:`<img src="img/1.jpg" width="200px">` }); Vue.component('child',child1); let child2 = Vue.extend({ template:`<p>child2......hello world!</p>` }); // 2.構造父組件 Vue.component('parent',{ components:{ 'my-child1':child1, 'my-child2':child2 }, template: ` <div> <p>Father...一千零一晚上</p> <my-child1></my-child1> <my-child2></my-child2> </div> ` }); new Vue({ el:'#app', }); </script> </body>
<body> <div id="app"> <g_box></g_box> </div> <template id="g_box"> <div> <h5>hello man</h5> <img src="img/1.jpg" width="200px" alt=""> </div> </template> <script src="js/vue.js"></script> <script> Vue.component('g_box',{ template:'#g_box' }); new Vue({ el:'#app', }) </script> </body>
這種方式不經常使用。ui
<body> <div id="app"> <g_div></g_div> </div> <script type="text/template" id="g_div"> <div> <h5>hello Nurato!</h5> <img src="img/1.jpg" width="200px" alt=""> </div> </script> <script src="js/vue.js"></script> <script> Vue.component('g_div',{ template:'#g_div' }); new Vue({ el:'#app' }) </script> </body>
在這裏,data選項必須爲函數,必需要用函數返回的方式傳遞數據this
<body> <div id="app"> <g_div></g_div> </div> <template id="g_div"> <div> <h5>{{msg}}</h5> <img src="img/1.jpg" width="200px" alt=""> </div> </template> <script src="js/vue.js"></script> <script> Vue.component('g_div',{ template:'#g_div', // 這裏data 只能經過函數返回的方式來,由於這樣申明的話,和new Vue 裏的data會互相污染 // data:{ // msg:'hello man' // } data(){ return {msg:'hello man'} } }); new Vue({ el:'#app', data:{ } }) </script> </body>
<body> <div id="app"> <g_box msg="hello Nurato" imgSrc="img/1.jpg"></g_box> </div> <template id="g_box"> <div> <h5>{{msg}}</h5> <img :src="imgsrc" width="200px" alt=""> </div> </template> <script src="js/vue.js"></script> <script> // 1 建立組件 Vue.component('g_box',{ template:'#g_box', props:['msg','imgsrc'] }); // 2 建立實例 new Vue({ el:'#app', data:{ msg:'' } }) </script> </body>
<div id="app"> <!-- 1. 這種不帶 : 號的,能夠直接填值,可是用不了 實例中 data 裏的數據 --> <!--<my-parent imgsrc="img/1.jpg" img_title="Nurato"></my-parent>--> <!-- 2. 圖片,imgsrc 若是是用 實例中的data,必須是用加 : 號的方式 --> <my-parent :img_title="title" :imgsrc="img"></my-parent> </div> <!-- 子組件 1 --> <template id="my_img"> <img :src="imgsrc"width="200px" alt=""> </template> <!-- 子組件 2 --> <template id="my_title"> <h5>{{title}}</h5> </template> <!-- 父級組件 --> <div id="my_parent"> <div> <child1 :imgsrc="imgsrc"></child1> <child2 :title="img_title"></child2> </div> </div> <script src="js/vue.js"></script> <script> // 1.子組件實例 let child1 = Vue.extend({ template:'#my_img', props:['imgsrc'] }); let child2 = Vue.extend({ template:'#my_title', props:['title'] }); // 父組件 Vue.component('my-parent',{ props:['imgsrc','img_title'], components:{ 'child1':child1, 'child2':child2 }, template:'#my_parent' }); new Vue({ el:'#app', data:{ img:'img/1.jpg', title:'2.噠噠噠' } }) </script> </body>