{"id":545,"date":"2020-03-01T15:57:52","date_gmt":"2020-03-01T07:57:52","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=545"},"modified":"2020-03-01T15:57:52","modified_gmt":"2020-03-01T07:57:52","slug":"vue-%e8%bf%87%e6%b8%a1%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/03\/01\/vue-%e8%bf%87%e6%b8%a1%e6%95%88%e6%9e%9c\/","title":{"rendered":"Vue-\u8fc7\u6e21\u6548\u679c"},"content":{"rendered":"

1.\u8fc7\u6e21<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n<style>\n\n  .kerwinfade-enter-active, .kerwinfade-leave-active {\n    transition: all 1.5s;\n  }\n  .kerwinfade-enter, .kerwinfade-leave-to \/* .fade-leave-active below version 2.1.8 *\/ {\n    opacity: 0;\n    transform: translateX(100px);\n  }\n\n\n  .bounce-enter-active {\n    animation: bounce-in .5s;\n  }\n  .bounce-leave-active {\n    animation: bounce-in .5s reverse;\n  }\n  @keyframes bounce-in {\n    0% {\n      opacity: 0;\n      transform: translateX(100px);\n    }\n\n    100% {\n      opacity: 1;\n      transform: translateX(0px);\n    }\n  }\n\n<\/style>\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/3.7.0\/animate.min.css\" rel=\"stylesheet\" type=\"text\/css\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n\n    <!-- <h1 class=\"animated heartBeat infinite \">1111111111111<\/h1> -->\n\n    <div id=\"box\">\n        <button @click=\"isShow= !isShow\">click<\/button>\n\n        <transition name=\"kerwinfade\">\n            <p v-show=\"isShow\">11111111111111111<\/p>\n        <\/transition>\n\n\n        <transition name=\"bounce\">\n            <p v-show=\"isShow\">2222222222222<\/p>\n        <\/transition>\n\n\n        <transition enter-active-class=\"animated bounceInRight\" leave-active-class=\"animated bounceOutRight\">\n            <p v-show=\"isShow\">33333333333333333<\/p>\n        <\/transition>\n    <\/div>\n\n    <script>\n      var vm = new Vue({\n        el:\"#box\",\n        data:{\n          isShow:true\n        }\n      })\n\n\n      \/\/obox1.addEventListern(\"transitionEnd\")\n      \/\/obox2.addEventListern(\"animationEnd\")\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
2.\u521d\u59cb\u5143\u7d20\u8fc7\u6e21<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n<style>\n  .kerwin-enter-active, .kerwin-leave-active {\n    transition: all .5s\n  }\n  .kerwin-enter, .kerwin-leave-to \/* .fade-leave-active in below version 2.1.8 *\/ {\n    opacity: 0;\n    transform: translateX(100px);\n  }\n\n\n\n   .bounce-enter-active {\n    animation: bounce-in .5s;\n  }\n  .bounce-leave-active {\n    animation: bounce-in .5s reverse;\n  }\n  @keyframes bounce-in {\n    \n    0%{\n      transform: translateX(100px);\n      opacity: 0;\n    }\n\n    100%{\n      transform: translateX(0px);\n      opacity: 1;\n    }\n  }\n<\/style>\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/animate.css@3.5.1\" rel=\"stylesheet\" type=\"text\/css\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n\n\n    <!-- <div class=\"animated  hinge infinite\">1111111111111<\/div> -->\n    <div id=\"box\">\n        <button @click=\"isShow= !isShow\">click<\/button>\n\n        <transition name=\"bounce\" appear>\n          <p v-show=\"isShow\">11111111111<\/p>\n\n        <\/transition>\n\n    <\/div>\n\n    <script>\n      var vm = new Vue({\n        el:\"#box\",\n        data:{\n          isShow:true\n        }\n      })\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
3.\u591a\u4e2a\u5143\u7d20\u8fc7\u6e21<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n<style>\n  \n.bounce-enter-active {\n  animation: bounce-in .5s;\n}\n.bounce-leave-active {\n  animation: bounce-in .5s reverse;\n}\n@keyframes bounce-in {\n  0% {\n    transform: translateX(100px);\n    opacity: 0;\n  }\n  \n  100% {\n    transform: translateX(0px);\n    opacity: 1;\n  }\n}\n<\/style>\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/animate.css@3.5.1\" rel=\"stylesheet\" type=\"text\/css\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n\n\n    <!-- <div class=\"animated  hinge infinite\">1111111111111<\/div> -->\n    <div id=\"box\">\n        <button @click=\"isShow= !isShow\">click<\/button>\n\n        <transition name=\"bounce\" mode=\"out-in\">\n          <div v-if=\"isShow\" key=\"1\">111111<\/div>\n          <div v-else key=\"2\">222222<\/div>\n        <\/transition>\n    <\/div>\n\n    <script>\n      var vm = new Vue({\n        el:\"#box\",\n        data:{\n          isShow:true\n        }\n      })\n\n\n\n      \/\/ {\n      \/\/   tag:\"div\",\n      \/\/   text:\"111111\"\n      \/\/ }\n\n\n      \/\/ {\n      \/\/   tag:\"p\",\n      \/\/   text:\"222222\"\n      \/\/ }\n\n\n      \/* Vue \u4e3a\u4e86\u51cf\u5c11\u5bf9\u4e8edom \u7684\u64cd\u4f5c\n\n        (1)  key \u76ee\u7684\uff1a\u4e3a\u4e86\u91cd\u7528\n\n            key\u503c\u76f8\u540c\uff0c \u5c31\u91cd\u7528\n            key\u503c\u4e0d\u540c\uff0c\u5c31\u4e0d\u91cd\u7528\n\n        (2)  v-if v-else \u5982\u679c\u6807\u7b7e\u76f8\u540c\uff0c\u5c31\u91cd\u7528,\u5982\u679c\u6807\u7b7e\u4e0d\u540c\uff0c \u5c31\u4e0d\u91cd\u7528\n       *\/\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
4.\u591a\u4e2a\u7ec4\u4ef6\u8fc7\u6e21<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n<style type=\"text\/css\">\n  \n    *{\n      margin: 0px;\n      padding: 0px;\n    }\n\n    html,body{\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n    }\n   footer ul {\n    display: flex;\n    position: fixed;\n    left: 0px;\n    bottom: 0px;\n    width: 100%;\n    height: 40px;\n   }\n\n   footer ul li {\n    flex: 1;\n    text-align: center;\n    list-style: none;\n    height: 40px;\n    line-height: 40px;\n    background: gray;\n   }\n\n\n   .bounce-enter-active {\n     animation: bounce-in .5s;\n   }\n   .bounce-leave-active {\n     animation: bounce-in .5s reverse;\n   }\n   @keyframes bounce-in {\n     0% {\n       transform: translateX(100px);\n       opacity: 0;\n     }\n     \n     100% {\n       transform: translateX(0px);\n       opacity: 1;\n     }\n   }\n<\/style>\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n       <keep-alive>\n        <transition name=\"bounce\" mode=\"out-in\">\n         <component :is=\"who\"><\/component>\n        <\/transition>\n       <\/keep-alive>\n       <footer>\n         <ul>\n           <li><a @click=\"who='home'\">\u9996\u9875<\/a><\/li>\n           <li><a @click=\"who='list'\" >\u5217\u8868\u9875<\/a><\/li>\n           <li><a @click=\"who='shopcar'\">\u8d2d\u7269\u8f66\u9875\u9762<\/a><\/li>\n         <\/ul>\n       <\/footer>\n    <\/div>\n   \n\n    <script type=\"text\/javascript\">\n      \/\/babel-loader  ES6=>ES5\n    \n\n      var home= {\n        template:`<div>\n          home\n          <input type=\"text\"\/>\n        <\/div>`\n      }\n\n      var list= {\n        template:`<div>\n          list\n        <\/div>`\n      }\n\n      var shopcar= {\n        template:`<div>\n          shopcar\n        <\/div>`\n      }\n\n\n      var vm = new Vue({\n        el:\"#box\",\n        data:{\n            \/\/ isHomeShow:true,\n            \/\/ isListShow:false,\n            \/\/ isShopcarShow:false\n            who:\"home\"\n        },\n        components:{\n          home, \n          list,\n          shopcar\n        }\n      })\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
5.\u591a\u4e2a\u5217\u8868\u8fc7\u6e21<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n\n<style>\n  .bounce-enter-active {\n    animation: bounce-in .5s;\n  }\n  .bounce-leave-active {\n    animation: bounce-in .5s reverse;\n  }\n  @keyframes bounce-in {\n    0% {\n      transform: translateX(100px);\n      opacity: 0;\n    }\n    \n    100% {\n      transform: translateX(0px);\n      opacity: 1;\n    }\n  }\n<\/style>\n<\/head>\n<body>\n    <div id=\"box\">\n       <input type=\"text\" v-model=\"mytext\"\/>\n       <button @click=\"handleClick()\">add<\/button> \n\n       <!-- <ul> -->\n        <transition-group tag=\"ul\" name=\"bounce\">\n          <li v-for=\"item,index in datalist\" :key=\"item\">\n            {{item}}--<button @click=\"handleDelClick(index)\">del<\/button>\n          <\/li>\n        <\/transition-group>  \n       <!-- <\/ul> -->\n    <\/div>\n\n    <script type=\"text\/javascript\">\n        var vm = new Vue({\n           el:\"#box\",\n           data:{\n            mytext:\"1111\",\n            datalist:[]\n           },\n\n           methods:{\n            handleClick:function(){\n\n              this.datalist.push(this.mytext);\n            },\n\n            handleDelClick(index){\n              console.log(\"del-click\",index)\n\n              this.datalist.splice(index,1);\/\/\u5220\u9664\n            }\n           }\n        })\n\n        \/\/ \u65b0\u8001\u865a\u62dfdom\u5bf9\u6bd4\u7684 \u65f6\u5019 \u4f1a \u4f7f\u7528 diff \u7b97\u6cd5\u3002\n        \/\/ \n        \/\/ \n\n        \/\/ \n        \/\/    li -1111-  1111\n        \/\/    li -2222-  2222\n        \/\/    li- 3333- 3333\n        \/\/    \n        \/\/    \n        \/\/    li -1111-  1111\n        \/\/    li -33333- 3333\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
6.\u53ef\u590d\u7528\u8fc7\u6e21<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<style>\n  .bounce-enter-active {\n    animation: bounce-in .5s;\n  }\n  .bounce-leave-active {\n    animation: bounce-in .5s reverse;\n  }\n  @keyframes bounce-in {\n    0% {\n      transform: translateX(-100%);\n      opacity: 0;\n    }\n    \n    100% {\n      transform: translateX(0px);\n      opacity: 1;\n    }\n  }\n<\/style>\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n        <navbar @myevent=\"control\"><\/navbar>\n       \n        <sidebar v-show=\"isShow\"><\/sidebar>\n        \n    <\/div>\n   \n   \n\n    <script type=\"text\/javascript\">\n        \/\/\u5b50\u7ec4\u4ef6\n       Vue.component(\"navbar\",{\n        template:`<div>\n\n          navbar--<button @click=\"handleClick\">show\/hide<\/button>\n        <\/div>`,\n\n        methods:{\n          handleClick(){\n            this.$emit(\"myevent\");\n          }\n        }\n       })\n\n\n       Vue.component(\"sidebar\",{\n        template:`\n         <transition name=\"bounce\">\n        <div style=\"background:black;color:white;width:300px;\">\n\n          sidebar\n          <ul>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n            <li>1111<\/li>\n          <\/ul>\n        <\/div>\n        <\/transition>\n        `\n       })\n\n       \n        var vm = new Vue({\n          el:\"#box\",\n          data:{\n            isShow:false\n          },\n          methods:{\n            control(){\n              this.isShow = !this.isShow;\n            }\n          }\n        })\n      \n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
\u603b\u7ed3\uff1a<\/h1>\n
transition\u8fc7\u6e21<\/strong>\n   Vue \u5728\u63d2\u5165\u3001\u66f4\u65b0\u6216\u8005\u79fb\u9664 DOM \u65f6\uff0c\u63d0\u4f9b\u591a\u79cd\u4e0d\u540c\u65b9\u5f0f\u7684\u5e94\u7528\u8fc7\u6e21\u6548\u679c\u3002\n      (1)\u5355\u5143\u7d20\/\u7ec4\u4ef6\u8fc7\u6e21\n          * css\u8fc7\u6e21\n          * css\u52a8\u753b\n          * \u7ed3\u5408animate.css\u52a8\u753b\u5e93\n      (2) \u591a\u4e2a\u5143\u7d20\u8fc7\u6e21(\u8bbe\u7f6ekey)\n          mode:in-out ; out-in\n      (3)\u591a\u4e2a\u7ec4\u4ef6\u8fc7\u6e21\n      (4)\u5217\u8868\u8fc7\u6e21(\u8bbe\u7f6ekey)\n          *<transition-group>\u4e0d\u540c\u4e8e transition\uff0c \u5b83\u4f1a\u4ee5\u4e00\u4e2a\u771f\u5b9e\u5143\u7d20\u5448\u73b0\uff1a\u9ed8\u8ba4\u4e3a\u4e00\u4e2a <span>\u3002\u4f60\u4e5f\u53ef\u4ee5\u901a\u8fc7\ntag \u7279\u6027\u66f4\u6362\u4e3a\u5176\u4ed6\u5143\u7d20\u3002\n          * \u63d0\u4f9b\u552f\u4e00\u7684 key \u5c5e\u6027\u503c<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
1.\u8fc7\u6e21 <!DOCTYPE html> <html> <head> <meta cha …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/545"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}