{"id":554,"date":"2020-03-02T16:58:45","date_gmt":"2020-03-02T08:58:45","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=554"},"modified":"2020-03-02T16:58:45","modified_gmt":"2020-03-02T08:58:45","slug":"vue-%e6%8c%87%e4%bb%a4","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/03\/02\/vue-%e6%8c%87%e4%bb%a4\/","title":{"rendered":"Vue-\u6307\u4ee4"},"content":{"rendered":"

01-\u6307\u4ee4<\/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<\/head>\n<body>\n    <div id=\"box\">\n      <!-- v-if=\"isShow\" -->\n      <div v-hello=\"'red'\">11111111<\/div>\n\n      <div v-hello=\"'yellow'\">22222222<\/div>\n\n      <div v-hello=\"color\">333333333333333<\/div>\n    <\/div>\t\n\n    <script type=\"text\/javascript\">\n      \n    \/\/ Vue.compoennt(\"aa\",{}) \n      \/\/ directive\u6307\u4ee4 - dom \u64cd\u4f5c\n      \/\/ \n      Vue.directive(\"hello\",{\n        \/\/\u6307\u4ee4\u7684\u751f\u547d\u5468\u671f-\u7b2c\u4e00\u6b21\u63d2\u5165\u8282\u70b9\u8c03\u7528\n          inserted(el,binding,vnode){\n            \/\/ vnode ,vdom, virtual node,  \u865a\u62df\u8282\u70b9 \u865a\u62dfdom\n            console.log(\"\u6b64\u65f6dom\u8282\u70b9\u521b\u5efa\",vnode)\n            el.style.backgroundColor = binding.value;\n          },\n\n          update(el,binding){\n            console.log(\"\u6b64\u65f6\u7ed1\u5b9a\u7684\u72b6\u6001\u6539\u53d8\u65f6\u4f1a\u6267\u884c\")\n            el.style.backgroundColor = binding.value;\n          }\n      })\n\n      var vm = new Vue({\n        el:\"#box\",\n        data:{\n          title:\"1111111111111111\",\n          color:'red'\n        },\n        \/\/ directives\n      })\n       \n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
02-\u6307\u4ee4\u51fd\u6570\u7b80\u5199<\/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<\/head>\n<body>\n    <div id=\"box\">\n      <!-- v-if=\"isShow\" -->\n      <div v-hello=\"'red'\">11111111<\/div>\n\n      <div v-hello=\"'yellow'\">22222222<\/div>\n\n      <div v-hello=\"color\">333333333333333<\/div>\n    <\/div>  \n\n    <script type=\"text\/javascript\">\n      \n    \/\/ Vue.compoennt(\"aa\",{}) \n      \/\/ directive\u6307\u4ee4 - dom \u64cd\u4f5c\n      \/\/ \n      Vue.directive(\"hello\",function(el,binding,vnode){\n        el.style.backgroundColor = binding.value\n      })\n\n      var vm = new Vue({\n        el:\"#box\",\n        data:{\n          title:\"1111111111111111\",\n          color:'red'\n        },\n        \/\/ directives\n      })\n       \n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
03-\u8f6e\u64ad-nextTick<\/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\n<link rel=\"stylesheet\" href=\"lib\/swiper\/css\/swiper.css\">\n<script src=\"lib\/swiper\/js\/swiper.js\"><\/script>\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n\n<style>\n  .swiper-container {\n      width: 600px;\n      height: 300px;\n  }  \n<\/style>\n<\/head>\n<body>\n  <div id=\"box\">\n    <div class=\"swiper-container\">\n        <div class=\"swiper-wrapper\">\n            <div class=\"swiper-slide\" v-for=\"data,index in list\">\n              {{data}}\n            <\/div>\n        <\/div>\n        <!-- \u5982\u679c\u9700\u8981\u5206\u9875\u5668 -->\n        <div class=\"swiper-pagination\"><\/div>\n\n    <\/div>\n\n  <\/div>\n\n    <script type=\"text\/javascript\">\n      \n\n\n\n      new Vue({\n        el:\"#box\",\n        data:{\n          list:[]\n        },\n\n        mounted(){\n\n          setTimeout(() => {\n            this.list = [\"111\",\"2222\",\"3333\"];\n\n            \/\/ \u9ed1\u9b54\u6cd5\n            this.$nextTick(()=>{\n              console.log(\"\u6211\u5f85\u4f1a\u624d\u4f1a\u6267\u884c\")\n              \n              var mySwiper = new Swiper ('.swiper-container', {\n                  \/\/ direction: 'vertical', \/\/ \u5782\u76f4\u5207\u6362\u9009\u9879\n                    \/\/ \u5982\u679c\u9700\u8981\u5206\u9875\u5668\n                  pagination: {\n                    el: '.swiper-pagination',\n                  }\n              })\n            })\n            console.log(\"\u8282\u70b9\u521b\u5efa\u5b8c\u4e86\uff1f\uff1f\uff1f\uff1f\",\"\u6ca1\u6709\uff0c\u5f02\u6b65\u6e32\u67d3\")\n          }, 2000)\n        },\n\n        updated(){\n          console.log(\"updated\");\n\n        }\n\n      })\n     \n\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
04-\u6307\u4ee4\u8f6e\u64ad<\/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\n<link rel=\"stylesheet\" href=\"lib\/swiper\/css\/swiper.css\">\n<script src=\"lib\/swiper\/js\/swiper.js\"><\/script>\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n\n<style>\n  .swiper-container {\n      width: 600px;\n      height: 300px;\n  }  \n<\/style>\n<\/head>\n<body>\n  <div id=\"box\">\n    <div class=\"swiper-container\">\n        <div class=\"swiper-wrapper\">\n            <div class=\"swiper-slide\" v-for=\"data,index in list\" v-swipe=\"index\">\n              {{data}}\n            <\/div>\n        <\/div>\n        <!-- \u5982\u679c\u9700\u8981\u5206\u9875\u5668 -->\n        <div class=\"swiper-pagination\"><\/div>\n        \n        <!-- \u5982\u679c\u9700\u8981\u5bfc\u822a\u6309\u94ae -->\n        <!-- <div class=\"swiper-button-prev\"><\/div> -->\n        <!-- <div class=\"swiper-button-next\"><\/div> -->\n        \n        <!-- \u5982\u679c\u9700\u8981\u6eda\u52a8\u6761 -->\n        <!-- <div class=\"swiper-scrollbar\"><\/div> -->\n    <\/div>\n\n  <\/div>\n\n    <script type=\"text\/javascript\">\n    \n      Vue.directive(\"swipe\",{\n        inserted(el,binding,vnode){\n          console.log(binding.value);\n\n          if(binding.value === vnode.context.list.length-1){\n            var mySwiper = new Swiper ('.swiper-container', {\n                \/\/ direction: 'vertical', \/\/ \u5782\u76f4\u5207\u6362\u9009\u9879\n                  \/\/ \u5982\u679c\u9700\u8981\u5206\u9875\u5668\n                pagination: {\n                  el: '.swiper-pagination',\n                }\n            })\n          }\n        }\n      })\n\n\n      new Vue({\n        el:\"#box\",\n        data:{\n          list:[]\n        },\n\n        mounted(){\n\n          setTimeout(() => {\n            this.list = [\"111\",\"2222\",\"3333\"];\n\n            console.log(\"\u8282\u70b9\u521b\u5efa\u5b8c\u4e86\uff1f\uff1f\uff1f\uff1f\",\"\u6ca1\u6709\uff0c\u5f02\u6b65\u6e32\u67d3\")\n            \n\n\n          }, 2000)\n        },\n\n        updated(){\n          \/\/ console.log(\"\u8282\u70b9\u521b\u5efa\u5b8c\u4e86\uff1f\uff1f\uff1f\uff1f\",\"\u66f4\u65b0\u9636\u6bb5\u6e32\u67d3\")\n          \/\/ var mySwiper = new Swiper ('.swiper-container', {\n          \/\/     \/\/ direction: 'vertical', \/\/ \u5782\u76f4\u5207\u6362\u9009\u9879\n          \/\/       \/\/ \u5982\u679c\u9700\u8981\u5206\u9875\u5668\n          \/\/     pagination: {\n          \/\/       el: '.swiper-pagination',\n          \/\/     }\n          \/\/ })\n        }\n\n\n      })\n     \n\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
01-\u6307\u4ee4 <!DOCTYPE html> <html> <head> <meta ch …<\/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\/554"}],"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=554"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/554\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}