{"id":549,"date":"2020-03-01T16:36:41","date_gmt":"2020-03-01T08:36:41","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=549"},"modified":"2020-03-01T16:36:41","modified_gmt":"2020-03-01T08:36:41","slug":"vue-%e7%bb%84%e4%bb%b6%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/03\/01\/vue-%e7%bb%84%e4%bb%b6%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f\/","title":{"rendered":"Vue-\u7ec4\u4ef6\u751f\u547d\u5468\u671f"},"content":{"rendered":"
<!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 src=\"https:\/\/unpkg.com\/axios\/dist\/axios.min.js\"><\/script>\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n    \n      <child v-if=\"isCreated\"><\/child>\n    <\/div>\n   \n\n    <script type=\"text\/javascript\">\n\n      Vue.component(\"child\",{\n        template:`<div>\n          <ul>\n                     <li v-for=\"data in datalist\">\n                         <img :src=\"data.poster\"\/>\n                         <h3>{{data.name}}<\/h3>\n                         <p>{{data.synopsis}}<\/p>\n\n                         <ul>\n                             <li v-for=\"item in data.actors\">\n                                 <img :src=\"item.avatarAddress\"\/>\n                                 <h4>{{item.name}}<\/h4>\n                             <\/li>\n                         <\/ul>\n                     <\/li>\n            <\/ul>\n            {{title}}\n            <button @click=\"title='1111111111'\">click<\/button>\n        <\/div>`,\n\n        data(){\n          return {\n            title:\"00000\",\n            datalist:[]\n          }\n        },\n\n        methods:{\n         \n        },\n\n        beforeCreate(){\n          console.log(\"beforeCreate\")\n        },\n        created(){\n          console.log(\"created\")\n        },\n\n        beforeMount(){\n          console.log(\"beforeMount\")\n        },\n\n        mounted(){\n          console.log(\"mounted\",\"\u8bbf\u95eedom,setInterval,window.onscroll, \u76d1\u542c\u4e8b\u4ef6 ajax\")\n          axios({\n            url:\"https:\/\/m.maizuo.com\/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1384809\",\n            headers:{\n              'X-Client-Info': '{\"a\":\"3000\",\"ch\":\"1002\",\"v\":\"5.0.4\",\"e\":\"154277371928424093566579\"}',\n              'X-Host': 'mall.film-ticket.film.list'\n            }\n          }).then(res=>{\n            console.log(res.data);\n            this.datalist= res.data.data.films\n          })\n\n        },\n\n        beforeUpdate(){\n          console.log(\"beforeUpdate\")\n        },\n\n        updated(){\n          console.log(\"updated\",\"\u66f4\u65b0\u4e4b\u540e\u53ef\u4ee5\u8bbf\u95eedom\")\n          \/\/  var otitle = document.getElementById(\"title\");\n          \/\/ console.log(otitle.innerHTML);\n        },\n\n        beforeDestroy(){\n          console.log(\"beforeDestroy\");\n        },\n\n        destroyed(){\n          console.log(\"destroyed--clearInterval ,window.onscroll=null,$off\")\n        }\n\n      })\n\n      \n      var vm = new Vue({\n        el: \"#box\",\n        data:{\n          isCreated:true\n        },\n       \n        mounted(){\n          console.log(\"\u6839\u7ec4\u4ef6\u7684mounted,\u6240\u6709\u7684\u5b69\u5b50\u90fd\u521b\u5efa\u5b8c\u4e86\uff0c \u81ea\u5df1\u624d\u4f1a\u6267\u884c\")\n        }\n      })\n\n      \/\/ vm.$mount(\"#box\")\n\n     \/\/\n     \/\/  vue\u7ec4\u4ef6 \u751f\u547d\u5468\u671f ?\n     \/\/  vue\u7ec4\u4ef6\u7684 \u94a9\u5b50\u51fd\u6570\uff1f\n     \/\/  vue\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570\uff1f\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset= …<\/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\/549"}],"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=549"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/549\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}