{"id":536,"date":"2020-02-28T16:43:43","date_gmt":"2020-02-28T08:43:43","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=536"},"modified":"2020-02-28T16:43:43","modified_gmt":"2020-02-28T08:43:43","slug":"vue-%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/28\/vue-%e7%bb%84%e4%bb%b6\/","title":{"rendered":"Vue-\u7ec4\u4ef6"},"content":{"rendered":"

\u7ec4\u4ef6<\/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  .navbar{\n    background: red;\n  }\n<\/style>\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n   \n    <div id=\"box\">\n      <navbar><\/navbar>\n      \n      <sidebar><\/sidebar>\n\n      <navbar><\/navbar>\n\n      <!-- <app-child><\/app-child> -->\n    <\/div>\n\n   \n    <script type=\"text\/javascript\">\n          \/\/1. \u5168\u5c40\u5b9a\u4e49\u7ec4\u4ef6 (\u4f5c\u7528\u57df\u9694\u79bb)\n          \n          Vue.component(\"app-child\",{\n            template: `\n              <div>child<\/div>\n            `\n          })\n\n\n          Vue.component(\"navbar\",{\n            template: `<nav style=\"background:red\">\n              <button @click=\"handleClick()\">\u8fd4\u56de-{{text}}<\/button>\n              <span>\u5bfc\u822a\u680f<\/span>\n              <app-child><\/app-child>\n              <navbarchild><\/navbarchild>\n            <\/nav>`,\n\n            data(){\n              return {\n                text:\"111111\"\n              }\n              \/\/ \u7ec4\u4ef6\u4e0e\u7ec4\u4ef6 \u7684\u72b6\u6001\u9700\u8981\u76f8\u4e92\u9694\u79bb\uff0c \u8981\u8bbe\u8ba1\u6210\u51fd\u6570\u3002\n            },\n\n            methods:{\n              handleClick(){\n                console.log(\"click--navbar\");\n                this.text=\"222222\";\n              }\n            },\n            components:{\n              navbarchild:{\n                template:`<div>navbarchild--{{title}}<\/div>`,\n                data(){\n                  return {\n                    title:\"111111111\"\n                  }\n                }\n              }\n            }\n          })\n\n          Vue.component(\"sidebar\",{\n            template: `<div style=\"background:blue\">\n              <ul @click=\"handleClick\">\n                <li>1111<\/li>\n                <li>2222<\/li>\n                <li>3333<\/li>\n              <\/ul>\n              <app-child><\/app-child>\n              <navbarchild><\/navbarchild>\n            <\/div>`,\n            methods:{\n              handleClick(){\n                console.log(\"click--sidebar\");\n              }\n            }\n          })\n          \n\n          var vm = new Vue({\n            el:\"#box\"\n          }) \/\/\u6839\u7ec4\u4ef6(root )\n    <\/script>\n<\/body>\n\n\n<\/html>\n\n<\/code><\/pre>\n
 <\/p>\n
\u7ec4\u4ef6\u7236\u4f20\u5b50<\/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  .navbar{\n    background: red;\n  }\n<\/style>\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n   \n    <div id=\"box\">\n      {{title}}\n      <!-- <img :src=\"title\"\/> -->\n      <navbar myword=\"home\" :myshow=\"false\"><\/navbar>\n      <navbar myword=\"list\" :myshow=\"true\"><\/navbar>\n      <navbar myword=\"shopcar\" :myshow=\"true\"><\/navbar>\n      <navbar :myword=\"title\" :myshow=\"true\"><\/navbar>\n      <!-- <app-child><\/app-child> -->\n    <\/div>\n\n   \n    <script type=\"text\/javascript\">\n          \/\/1. \u5168\u5c40\u5b9a\u4e49\u7ec4\u4ef6 (\u4f5c\u7528\u57df\u9694\u79bb)\n          \n\n\n          Vue.component(\"navbar\",{\n            template: `<nav style=\"background:red\">\n              <button @click=\"handleClick()\" v-show=\"myshow\">\u8fd4\u56de-{{text}}<\/button>\n              <span>\u5bfc\u822a\u680f--{{myword}}---{{myshow}}<\/span>\n            <\/nav>`,\n\n            \/\/\u63a5\u53d7\u7236\u7ec4\u4ef6\u4f20\u6765\u7684\u5c5e\u6027\n            \/\/ props:[\"myword\",\"myshow\"],\n\n            \/\/\u5c5e\u6027\u9a8c\u8bc1\n            props:{\n              myword:String,\n              myshow:Boolean\n            },\n\n            data(){\n              return {\n                text:\"111111\"\n              }\n              \/\/ \u7ec4\u4ef6\u4e0e\u7ec4\u4ef6 \u7684\u72b6\u6001\u9700\u8981\u76f8\u4e92\u9694\u79bb\uff0c \u8981\u8bbe\u8ba1\u6210\u51fd\u6570\u3002\n            },\n\n            methods:{\n              handleClick(){\n                console.log(\"click--navbar\");\n                this.text=\"222222\";\n              }\n            }\n          })\n\n       \n\n          var vm = new Vue({\n            el:\"#box\",\n            data:{\n              title:\"\u6839\u7ec4\u4ef6\u4e2d\u5b9a\u4e49\u7684title\"\n            }\n          }) \/\/\u6839\u7ec4\u4ef6(root )\n    <\/script>\n<\/body>\n\n\n<\/html>\n\n<\/code><\/pre>\n
 <\/p>\n
\u7ec4\u4ef6\u5b50\u4f20\u7236<\/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<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n      <child @myevent=\"handleMyEvent($event)\"><\/child>\n    <\/div>\n   \n\n    <script type=\"text\/javascript\">\n        \/\/\u5b50\u7ec4\u4ef6\n        Vue.component(\"child\",{\n          template:`<div>\n            child-<button @click=\"handleClick\">send<\/button>\n          <\/div>`,\n\n          data(){\n            return {\n              money:1000000\n            }\n          },\n          methods:{\n            handleClick(){\n              console.log(\"\u628a\u6d88\u606f\u4f20\u7ed9\u7236\u7ec4\u4ef6\")\n              this.$emit(\"myevent\",this.money);\/\/ emit \u5206\u53d1\n            }\n          }\n        })\n       \n        var vm = new Vue({\n          el:\"#box\",\n          data:{\n\n          },\n\n          methods:{\n            handleMyEvent(data){\n              console.log(\"\u6211\u6536\u5230\u4e86\u94b1\",data)\n            }\n          }\n        })\n      \n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
\u7ec4\u4ef6-\u5356\u5ea7<\/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<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n        <navbar @myevent=\"control\"><\/navbar>\n        <sidebar v-show=\"isShow\"><\/sidebar>\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:`<div>\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       })\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
 <\/p>\n
\u7ec4\u4ef6-refs<\/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<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n      <button @click=\"handleClick()\">get<\/button>\n      <child ref=\"mychild\"><\/child>\n\n\n      <input type=\"text\" ref=\"mytext\"\/>\n      <button @click=\"handleAdd\">add<\/button>\n\n    <\/div>\n   \n\n    <script type=\"text\/javascript\">\n        \/\/\u5b50\u7ec4\u4ef6\n      \n        Vue.component(\"child\",{\n          template:`<div>\n              child \u5b50\u7ec4\u4ef6\n             \n          <\/div>`,\n\n          data(){\n            return {\n              childname:\"11111111111111111111\"\n            }\n          },\n\n          methods:{\n            handleClick(data){\n              console.log(\"child-11111\",data)\n            }\n          }\n        })\n\n        var vm = new Vue({\n          el:\"#box\",\n          data:{\n\n          },\n          methods:{\n            handleClick(){\n              console.log(this.$refs.mychild.childname); \/\/\u83b7\u53d6\u5f15\u7528\n            \n              this.$refs.mychild.handleClick(\"\u7ed9\u4f605\u7ba1\u9ebb\u836f\");\/\/\u8c03\u7528\u7684\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5\n            },\n\n            handleAdd(){\n              console.log(\"handleAdd\",this.$refs.mytext.value)\n            }\n          }\n        })\n      \n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
\u7ec4\u4ef6\u975e\u7236\u5b50\u901a\u4fe1<\/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<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n       \n        <child1><\/child1>\n        <child2><\/child2>\n       \n    <\/div>\n   \n\n    <script type=\"text\/javascript\">\n      \/\/ eventEmitter  .on  .emit\n      var bus = new Vue()\/\/ \u7a7avue\u5b9e\u4f8b \u4e2d\u592e\u4e8b\u4ef6\u603b\u7ebf  \n\n      Vue.component(\"child1\",{\n        template:`<div>\n          child1---<button @click=\"handleClick\">\u901a\u4fe1<\/button>\n        <\/div>`,\n        methods:{\n          handleClick(){\n            \/\/ \u5411\u81ea\u5df1\u5144\u5f1fchild1 \u53d1\u9001\u4e00\u53e5\n            \/\/ setInterval(() => {\n            \/\/   bus.$emit(\"kerwin\",\"\u5144\u5f1f\uff0c\u8fd9\u662f\u9ebb\u836f\");\n            \/\/ }, 1000)\n             bus.$emit(\"kerwin\");\n          }\n        },\n        mounted(){\n          console.log(\"\u8fd9\u4e2a\u51fd\u6570\u4f1a\u5728child1\u7ec4\u4ef6\u521b\u5efa\u6210\u529f\u540e\u81ea\u52a8\u88abvue\u8c03\u7528\")\n        }\n      })  \n\n\n\n       Vue.component(\"child2\",{\n        template:`<div>\n          child2--\u4e00\u76f4\u663e\u793a\n\n          <ul v-show=\"isShow\">\n            <li>111111<\/li>\n          <\/ul>\n        <\/div>`,\n        data(){\n          return {\n            isShow:true\n          }\n        },\n\n        mounted(){\n          console.log(\"\u8fd9\u4e2a\u51fd\u6570\u4f1a\u5728child2\u7ec4\u4ef6\u521b\u5efa\u6210\u529f\u540e\u81ea\u52a8\u88abvue\u8c03\u7528\")\n\n          bus.$on(\"kerwin\",(data)=>{\n            \/\/ console.log(data);\n            this.isShow = !this.isShow\n          })\n        }\n      })  \n     \n      new Vue({\n        el:\"#box\",\n        \/\/ template:\"<div>hello template<\/div>\"\n      })\n   \n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
\u52a8\u6001\u7ec4\u4ef6<\/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    }\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         <component :is=\"who\"><\/component>\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    \tvar 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
\u603b\u7ed3<\/h1>\n
1. \u7ec4\u4ef6\u7f16\u5199\u65b9\u5f0f\u4e0eVue\u5b9e\u4f8b\u7684\u533a\u522b\n      *\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u9700\u8981\u6709\u4e00\u4e2aroot element\n      *\u7236\u5b50\u7ec4\u4ef6\u7684data\u662f\u65e0\u6cd5\u5171\u4eab\n      *\u7ec4\u4ef6\u53ef\u4ee5\u6709data\uff0cmethods,computed....,\u4f46\u662fdata \u5fc5\u987b\u662f\u4e00\u4e2a\u51fd\u6570\n2. \u7ec4\u4ef6\u901a\u4fe1\n      i. \u7236\u5b50\u7ec4\u4ef6\u4f20\u503c (props down, events up)\n      ii. \u5c5e\u6027\u9a8c\u8bc1\n            props:{name:Number}\n            Number,String,Boolean,Array,Object,Function,null(\u4e0d\u9650\u5236\u7c7b\u578b)\n      iii. \u4e8b\u4ef6\u673a\u5236\n            a.\u4f7f\u7528 $on(eventName) \u76d1\u542c\u4e8b\u4ef6\n            b.\u4f7f\u7528 $emit(eventName) \u89e6\u53d1\u4e8b\u4ef6\n      iv. Ref\n            <input ref=\"mytext\"\/> this.$refs.mytext\n      v. \u4e8b\u4ef6\u603b\u7ebf\n            var bus = new Vue();\n      * mounted\u751f\u547d\u5468\u671f\u4e2d\u8fdb\u884c\u76d1\u542c\n3. \u52a8\u6001\u7ec4\u4ef6\n      *<component> \u5143\u7d20\uff0c\u52a8\u6001\u5730\u7ed1\u5b9a\u591a\u4e2a\u7ec4\u4ef6\u5230\u5b83\u7684 is \u5c5e\u6027\n      *<keep-alive> \u4fdd\u7559\u72b6\u6001\uff0c\u907f\u514d\u91cd\u65b0\u6e32\u67d3<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u7ec4\u4ef6 <!DOCTYPE html> <html> <head> <meta chars …<\/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\/536"}],"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=536"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/536\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}