{"id":4733,"date":"2022-03-27T20:20:30","date_gmt":"2022-03-27T12:20:30","guid":{"rendered":"https:\/\/egonlin.com\/?p=4733"},"modified":"2022-03-27T20:20:30","modified_gmt":"2022-03-27T12:20:30","slug":"%e7%ac%ac%e5%9b%9b%e8%8a%82%ef%bc%9avue%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=4733","title":{"rendered":"\u7b2c\u56db\u8282\uff1aVue\u7ec4\u4ef6"},"content":{"rendered":"<h1>\u7ec4\u4ef6<\/h1>\n<ul>\n<li>\u6bcf\u4e00\u4e2a\u7ec4\u4ef6\u90fd\u662f\u4e00\u4e2avue\u5b9e\u4f8b<\/li>\n<li>\u6bcf\u4e2a\u7ec4\u4ef6\u5747\u5177\u6709\u81ea\u8eab\u7684\u6a21\u677ftemplate\uff0c\u6839\u7ec4\u4ef6\u7684\u6a21\u677f\u5c31\u662f\u6302\u8f7d\u70b9<\/li>\n<li>\u6bcf\u4e2a\u7ec4\u4ef6\u6a21\u677f\u53ea\u80fd\u62e5\u6709\u4e00\u4e2a\u6839\u6807\u7b7e<\/li>\n<li>\u5b50\u7ec4\u4ef6\u7684\u6570\u636e\u5177\u6709\u4f5c\u7528\u57df\uff0c\u4ee5\u8fbe\u5230\u7ec4\u4ef6\u7684\u590d\u7528<\/li>\n<\/ul>\n<h2>1\u3001\u6839\u7ec4\u4ef6<\/h2>\n<pre><code class=\"language-html\">&lt;div id=&quot;app&quot;&gt;\n    &lt;h1&gt;{{ msg }}&lt;\/h1&gt;\n&lt;\/div&gt;\n&lt;script type=&quot;text\/javascript&quot;&gt;\n    \/\/ \u901a\u8fc7new Vue\u521b\u5efa\u7684\u5b9e\u4f8b\u5c31\u662f\u6839\u7ec4\u4ef6(\u5b9e\u4f8b\u4e0e\u7ec4\u4ef6\u4e00\u4e00\u5bf9\u5e94,\u4e00\u4e2a\u5b9e\u4f8b\u5c31\u662f\u4e00\u4e2a\u7ec4\u4ef6)\n    \/\/ \u6bcf\u4e2a\u7ec4\u4ef6\u7ec4\u4ef6\u5747\u62e5\u6709\u6a21\u677f,template\n    var app = new Vue({\n        \/\/ \u6839\u7ec4\u4ef6\u7684\u6a21\u677f\u5c31\u662f\u6302\u8f7d\u70b9\n        el: &quot;#app&quot;,\n        data : {\n            msg: &quot;\u6839\u7ec4\u4ef6&quot;\n        },\n        \/\/ \u6a21\u677f: \u7531&quot;&quot;\u5305\u88f9\u7684html\u4ee3\u7801\u5757,\u51fa\u73b0\u5728\u7ec4\u4ef6\u7684\u5185\u90e8,\u8d4b\u503c\u7ed9\u7ec4\u4ef6\u7684$template\u53d8\u91cf\n        \/\/ \u663e\u5f0f\u4e66\u5199\u6a21\u5757,\u5c31\u4f1a\u66ff\u6362\u6302\u8f7d\u70b9,\u4f46\u6839\u7ec4\u4ef6\u5fc5\u987b\u62e5\u6709\u6302\u8f7d\u70b9\n        template: &quot;&lt;div&gt;\u663e\u5f0f\u6a21\u677f&lt;\/div&gt;&quot;\n    })\n    \/\/ app.$template\n&lt;\/script&gt;<\/code><\/pre>\n<h2>2\u3001\u5c40\u90e8\u7ec4\u4ef6<\/h2>\n<pre><code class=\"language-html\">&lt;div id=&quot;app&quot;&gt;\n    &lt;local-tag&gt;&lt;\/local-tag&gt;\n    &lt;local-tag&gt;&lt;\/local-tag&gt;\n&lt;\/div&gt;\n&lt;script&gt;\n    var localTag = {\n        data () {\n            return {\n                count: 0\n            }\n        },\n        template: &#039;&lt;button @click=&quot;btnAction&quot;&gt;\u5c40\u90e8{{ count }}&lt;\/button&gt;&#039;,\n        methods: {\n            btnAction () {\n                this.count ++\n            }\n        }\n    }\n    new Vue({\n        el: &quot;#app&quot;,\n        components: {\n            &#039;local-tag&#039;: localTag\n        }\n    })\n&lt;\/script&gt;<\/code><\/pre>\n<h2>3\u3001\u5168\u5c40\u7ec4\u4ef6<\/h2>\n<pre><code class=\"language-html\">&lt;div id=&quot;app&quot;&gt;\n    &lt;global-tag&gt;&lt;\/global-tag&gt;\n    &lt;global-tag&gt;&lt;\/global-tag&gt;\n&lt;\/div&gt;\n&lt;script&gt;\n    Vue.component(&#039;global-tag&#039;, {\n        data () {\n            return {\n                count: 0\n            }\n        },\n        template: &#039;&lt;button @click=&quot;btnAction&quot;&gt;\u5168\u5c40{{ count }}&lt;\/button&gt;&#039;,\n        methods: {\n            btnAction () {\n                this.count ++\n            }\n        }\n    })\n    new Vue({\n        el: &quot;#app&quot;\n    })\n&lt;\/script&gt;<\/code><\/pre>\n<h2>4\u3001\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u7ed9\u5b50\u7ec4\u4ef6<\/h2>\n<ul>\n<li>\u901a\u8fc7\u7ed1\u5b9a\u5c5e\u6027\u7684\u65b9\u5f0f\u8fdb\u884c\u6570\u636e\u4f20\u9012<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;div id=&quot;app&quot;&gt;\n    &lt;global-tag :sup_data1=&#039;sup_data1&#039; :supData2=&#039;sup_data2&#039;&gt;&lt;\/global-tag&gt;\n&lt;\/div&gt;\n&lt;script type=&quot;text\/javascript&quot;&gt;\n    Vue.component(&#039;global-tag&#039;, {\n        props:[&#039;sup_data1&#039;, &#039;supdata2&#039;],\n        template: &#039;&lt;div&gt;{{ sup_data1 }} {{ supdata2 }}&lt;\/div&gt;&#039;\n    })\n    new Vue({\n        el: &#039;#app&#039;,\n        data: {\n            sup_data1: &#039;\u6570\u636e1&#039;,\n            sup_data2: &#039;\u6570\u636e2&#039;\n        }\n    })\n&lt;\/script&gt;<\/code><\/pre>\n<h2>5\u3001\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u7ed9\u7236\u7ec4\u4ef6<\/h2>\n<ul>\n<li>\u901a\u8fc7\u53d1\u9001\u4e8b\u4ef6\u8bf7\u6c42\u7684\u65b9\u5f0f\u8fdb\u884c\u6570\u636e\u4f20\u9012<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;div id=&quot;app&quot;&gt;\n    &lt;global-tag @send_action=&#039;receiveAction&#039;&gt;&lt;\/global-tag&gt;\n&lt;\/div&gt;\n&lt;script type=&quot;text\/javascript&quot;&gt;\n    Vue.component(&#039;global-tag&#039;, {\n        data () {\n            return {\n                sub_data1: &quot;\u6570\u636e1&quot;,\n                sub_data2: &#039;\u6570\u636e2&#039;\n            }\n        },\n        template: &#039;&lt;div @click=&quot;clickAction&quot;&gt;\u53d1\u751f&lt;\/div&gt;&#039;,\n        methods: {\n            clickAction () {\n                this.$emit(&#039;send_action&#039;, this.sub_data1, this.sub_data2)\n            }\n        }\n    })\n    new Vue({\n        el: &#039;#app&#039;,\n        methods: {\n            receiveAction (v1, v2) {\n                console.log(v1, v2)\n            }\n        }\n    })\n&lt;\/script&gt;<\/code><\/pre>\n<h2>6\u3001\u7236\u5b50\u7ec4\u4ef6\u5b9e\u73b0todoList<\/h2>\n<pre><code class=\"language-html\">&lt;div id=&quot;app&quot;&gt;\n    &lt;div&gt;\n        &lt;input type=&quot;text&quot; v-model=&quot;val&quot;&gt;\n        &lt;button type=&quot;button&quot; @click=&quot;submitMsg&quot;&gt;\u63d0\u4ea4&lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;ul&gt;\n        &lt;!-- &lt;li v-for=&quot;(v, i) in list&quot; :key=&quot;i&quot; @click=&quot;removeMsg(i)&quot;&gt;{{ v }}&lt;\/li&gt; --&gt;\n        &lt;todo-list v-for=&quot;(v, i) in list&quot; :key=&quot;i&quot; :v=&quot;v&quot; :i=&quot;i&quot; @delect_action=&quot;delect_action&quot;&gt;&lt;\/todo-list&gt;\n    &lt;\/ul&gt;\n&lt;\/div&gt;\n&lt;script type=&quot;text\/javascript&quot;&gt;\n    Vue.component(&quot;todo-list&quot;, {\n        template: &quot;&lt;li @click=&#039;delect_action&#039;&gt;&lt;span&gt;\u7b2c{{ i + 1 }}\u6761: &lt;\/span&gt;&lt;span&gt;{{ v }}&lt;\/span&gt;&lt;\/li&gt;&quot;,\n        props: [&#039;v&#039;, &#039;i&#039;],\n        methods: {\n            delect_action () {\n                this.$emit(&quot;delect_action&quot;, this.i)\n            }\n        }\n    })\n\n    new Vue({\n        el: &quot;#app&quot;,\n        data: {\n            val: &quot;&quot;,\n            list: []\n        },\n        methods: {\n            submitMsg () {\n                \/\/ \u5f80list\u4e2d\u6dfb\u52a0input\u6846\u4e2d\u7684value\n                if (this.val) {\n                    this.list.push(this.val);\n                    this.val = &quot;&quot;\n                }\n            },\n            delect_action(index) {\n                this.list.splice(index, 1)\n            }\n        }\n    })\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u7ec4\u4ef6 \u6bcf\u4e00\u4e2a\u7ec4\u4ef6\u90fd\u662f\u4e00\u4e2avue\u5b9e\u4f8b \u6bcf\u4e2a\u7ec4\u4ef6\u5747\u5177\u6709\u81ea\u8eab\u7684\u6a21\u677ftemplate\uff0c\u6839\u7ec4\u4ef6\u7684\u6a21\u677f\u5c31\u662f\u6302\u8f7d\u70b9 \u6bcf\u4e2a\u7ec4\u4ef6 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[361,362],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4733"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4733"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4733\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}