{"id":4737,"date":"2022-03-27T20:22:29","date_gmt":"2022-03-27T12:22:29","guid":{"rendered":"https:\/\/egonlin.com\/?p=4737"},"modified":"2022-03-27T20:22:29","modified_gmt":"2022-03-27T12:22:29","slug":"%e7%ac%ac%e4%ba%8c%e8%8a%82%ef%bc%9avue%e6%8c%87%e4%bb%a4","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=4737","title":{"rendered":"\u7b2c\u4e8c\u8282\uff1aVue\u6307\u4ee4"},"content":{"rendered":"

Vue\u6307\u4ee4<\/h1>\n

1\u3001\u6587\u672c\u76f8\u5173\u6307\u4ee4<\/h2>\n
<div id="app">\n    <!-- \u63d2\u503c\u8868\u8fbe\u5f0f -->\n    <p>{{ msg }}<\/p>\n    <!-- eg:\u539f\u6587\u672c\u4f1a\u88abmsg\u66ff\u6362 -->\n    <p v-text='msg'>\u539f\u6587\u672c<\/p>\n    <!-- \u53ef\u4ee5\u89e3\u6790\u5e26html\u6807\u7b7e\u7684\u6587\u672c\u4fe1\u606f -->\n    <p v-html='msg'><\/p>\n    <!-- v-once\u63a7\u5236\u7684\u6807\u7b7e\u53ea\u80fd\u88ab\u8d4b\u503c\u4e00\u6b21 -->\n    <p v-once>{{ msg }}<\/p>\n<\/div>\n<script type="text\/javascript">\n    \/\/ \u6307\u4ee4: \u51fa\u73b0\u5728html\u6807\u7b7e\u4e2d\u53ef\u4ee5\u88abvue\u89e3\u6790\u5904\u7406\u7684\u5168\u5c40\u5c5e\u6027\n    new Vue({\n        el: "#app",\n        data: {\n            msg: "message"\n        }\n    })\n<\/script><\/code><\/pre>\n
2\u3001\u6597\u7bf7\u6307\u4ee4<\/h2>\n
<style type="text\/css">\n    [v-cloak] { display: none; }\n<\/style>\n<div id="app" v-cloak>\n    {{ msg }}\n<\/div>\n<script src="js\/vue.min.js"><\/script>\n<script type="text\/javascript">\n    new Vue({\n        el: "#app",\n        data: {\n            msg: "message"\n        }\n    })\n<\/script>\n<!-- \u907f\u514d\u9875\u9762\u95ea\u70c1--><\/code><\/pre>\n
3\u3001\u5c5e\u6027\u6307\u4ee4<\/h2>\n
<!-- \u7ed9\u81ea\u5b9a\u4e49\u5168\u5c40\u5c5e\u6027\u7ed1\u5b9a\u53d8\u91cf -->\n<p v-bind:abc="abc"><\/p>\n<!-- \u4ee5\u539f\u5b57\u7b26\u4e32\u5f62\u5f0f\u7ed1\u5b9a\u5168\u5c40\u5c5e\u6027 -->\n<p v-bind:title="'abc'"><\/p>\n\n<!-- \u5355\u7c7b\u540d\u7ed1\u5b9a -->\n<p v-bind:class="c1"><\/p>\n<!-- \u591a\u7c7b\u540d\u7ed1\u5b9a -->\n<p v-bind:class="[c2, c3]"><\/p>\n<!-- \u7c7b\u540d\u72b6\u6001\u7ed1\u5b9a -->\n<p v-bind:class="{c4: true|false|var}"><\/p>\n<!-- \u591a\u7c7b\u540d\u72b6\u6001\u7ed1\u5b9a -->\n<p v-bind:class="[{c5: true}, {c6: flase}]"><\/p>\n\n<!-- \u6837\u5f0f\u7ed1\u5b9a -->\n<div :style="div_style"><\/div>\n<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"><\/div>\n<script type="text\/javascript">\n    new Vue({\n        el:"#app",\n        data: {\n            abc: "abc",\n            c1: "p1",\n            c2: "p2",\n            c3: "p3",\n            div_style: {\n                width: "200px",\n                height: "200px",\n                backgroundColor: "cyan"\n            }\n        }\n    })\n<\/script>\n<!-- v-bind: \u6307\u4ee4\u53ef\u4ee5\u7b80\u5199\u4e3a : --><\/code><\/pre>\n
4\u3001\u4e8b\u4ef6\u6307\u4ee4<\/h2>\n
<!-- v-on: \u6307\u4ee4 \u7b80\u5199 @ -->\n<!-- \u4e0d\u4f20\u53c2\u4e8b\u4ef6\u7ed1\u5b9a\uff0c\u4f46\u4e8b\u4ef6\u56de\u8c03\u65b9\u6cd5\u53ef\u4ee5\u83b7\u53d6\u4e8b\u4ef6\u5bf9\u8c61 -->\n<p @click="fn"><\/p>\n<!-- ()\u53ef\u4ee5\u4f20\u5165\u5177\u4f53\u5b9e\u53c2 -->\n<p @click="fn()"><\/p>\n<!-- ()\u60c5\u51b5\u4e0b\uff0c\u4e8b\u4ef6\u5bf9\u8c61\u5e94\u8be5\u663e\u5f0f\u4f20\u5165 -->\n<p @click="fn($event)"><\/p><\/code><\/pre>\n
5\u3001\u8868\u5355\u6307\u4ee4<\/h2>\n
<div id="app">\n    <!-- v-model\u9488\u5bf9\u4e8e\u8868\u5355\u5143\u7d20 -->\n    <form action="" method="get">\n        <!-- 1\u3001\u53cc\u5411\u7ed1\u5b9a\uff1a\u670d\u52a1\u4e8e\u6587\u672c\u8f93\u5165\u6846 -->\n        <!-- v-model\u5b58\u50a8\u7684\u503c\u4e3a\u8f93\u5165\u6846\u7684value\u503c -->\n        <div>\n            <input type="text" name="usr" v-model="in_val">\n            <input type="password" name="ps" v-model="in_val" >\n            <textarea name="info" v-model="in_val"><\/textarea>\n        <\/div>\n\n        <!-- 2\u3001\u5355\u9009\u6846 -->\n        <div>\n            <!-- \u5355\u9009\u6846\u662f\u4ee5name\u8fdb\u884c\u5206\u7ec4\uff0c\u540c\u7ec4\u4e2d\u53ea\u80fd\u53d1\u751f\u5355\u9009 -->\n            <!-- v-model\u5b58\u50a8\u7684\u503c\u4e3a\u5355\u9009\u6846\u7684value\u503c -->\n            \u7537\uff1a<input type="radio" name="sex" value="\u7537" v-model="ra_val">\n            \u5973\uff1a<input type="radio" name="sex" value="\u5973" v-model="ra_val">\n            {{ ra_val }}\n        <\/div>\n\n        <!-- 3\u3001\u5355\u4e00\u590d\u9009\u6846 -->\n        <!-- v-model\u5b58\u50a8\u7684\u503c\u4e3atrue|false -->\n        <!-- \u6216\u8005\u4e3a\u81ea\u5b9a\u4e49\u66ff\u6362\u7684\u503c -->\n        <div>\n            <input type="checkbox" v-model='sin_val' true-value="\u9009\u4e2d" false-value="\u672a\u9009\u4e2d" \/>\n            {{ sin_val }}\n        <\/div>\n\n        <!-- 4\u3001\u591a\u590d\u9009\u6846 -->\n        <!-- v-model\u5b58\u50a8\u7684\u503c\u4e3a\u5b58\u50a8\u503c\u591a\u590d\u9009\u6846value\u7684\u6570\u7ec4 -->\n        <div>\n            <input type="checkbox" value="\u559c\u597d\u7537\u7684" name="cless" v-model='more_val' \/>\n            <input type="checkbox" value="\u559c\u597d\u5973\u7684" name="cless" v-model='more_val' \/>\n            <input type="checkbox" value="\u4e0d\u6311" name="cless" v-model='more_val' \/>\n            {{ more_val }}\n        <\/div>\n    <\/form>\n<\/div>\n\n<script type="text\/javascript">\n    new Vue({\n        el: '#app',\n        data: {\n            in_val: '',\n            \/\/ \u9ed8\u8ba4\u503c\u53ef\u4ee5\u51b3\u5b9a\u5355\u9009\u6846\u9ed8\u8ba4\u9009\u9879\n            ra_val: '\u7537',\n            \/\/ \u9ed8\u8ba4\u503c\u4e3atrue\uff0c\u5355\u4e00\u590d\u9009\u6846\u4e3a\u9009\u4e2d\uff0c\u53cd\u4e4bfalse\u4e3a\u4e0d\u9009\u4e2d\n            sin_val: '',\n            \/\/ \u6570\u7ec4\u4e2d\u5b58\u5728\u7684\u503c\u5bf9\u5e94\u7684\u590d\u9009\u6846\u9ed8\u8ba4\u4e3a\u9009\u4e2d\u72b6\u6001\n            more_val: ['\u559c\u597d\u5973\u7684','\u4e0d\u6311']\n        }\n    })\n<\/script><\/code><\/pre>\n
6\u3001\u6761\u4ef6\u6307\u4ee4<\/h2>\n
<div id="app">\n    <button @click="toggle">\u663e\u9690\u5207\u6362<\/button>\n    <!-- v-if -->\n    <div class="box r" v-if="isShow"><\/div>\n    <!-- v-show -->\n    <div class="box o" v-show="isShow"><\/div>\n    <!-- 1.\u6761\u4ef6\u6e32\u67d3\u7684\u503c\u4e3atrue|false -->\n    <!-- 2.true\u4ee3\u8868\u6807\u7b7e\u663e\u793a\u65b9\u5f0f\u6e32\u67d3 -->\n    <!-- 3.false v-if\u4e0d\u6e32\u67d3\u5230\u9875\u9762,v-show\u4ee5display:none\u6e32\u67d3\u5230\u9875\u9762,\u4f46\u4e5f\u4e0d\u4f1a\u663e\u793a -->\n\n    <!-- v-if v-else-if v-else \u6848\u4f8b -->\n    <ul>\n        <li @mouseover="changeWrap(0)">red<\/li>\n        <li @mouseover="changeWrap(1)">green<\/li>\n        <li @mouseover="changeWrap(2)">blue<\/li>\n    <\/ul>\n    <!-- red\u9875\u9762\u903b\u8f91\u7ed3\u6784 -->\n    <div class="wrap red" v-if="tag == 0" key="0">...<\/div>\n    <!-- green\u9875\u9762\u903b\u8f91\u7ed3\u6784 -->\n    <div class="wrap green" v-else-if="tag == 1" key="1">...<\/div>\n    <!-- blue\u9875\u9762\u903b\u8f91\u7ed3\u6784 -->\n    <div class="wrap blue" v-else key="2">...<\/div>\n    <!-- v-if\u76f8\u5173\u5206\u652f\u64cd\u4f5c,\u5728\u672a\u663e\u793a\u60c5\u51b5\u4e0b,\u662f\u4e0d\u4f1a\u88ab\u6e32\u67d3\u5230\u9875\u9762\u4e2d -->\n    <!-- \u901a\u8fc7key\u5168\u5c40\u5c5e\u6027\u64cd\u4f5c\u540e,\u6e32\u67d3\u8fc7\u7684\u5206\u652f\u4f1a\u5efa\u7acbkey\u5bf9\u5e94\u7684\u7f13\u5b58,\u63d0\u9ad8\u4e0b\u4e00\u6b21\u6e32\u67d3\u901f\u5ea6 -->\n\n    <!-- v-show \u6848\u4f8b -->\n    <ul>\n        <li @mouseover="changeMain(0)">red<\/li>\n        <li @mouseover="changeMain(1)">green<\/li>\n        <li @mouseover="changeMain(2)">blue<\/li>\n    <\/ul>\n    <!-- red\u9875\u9762\u903b\u8f91\u7ed3\u6784 -->\n    <div class="main red" v-show="whoShow(0)">...<\/div>\n    <!-- green\u9875\u9762\u903b\u8f91\u7ed3\u6784 -->\n    <div class="main green" v-show="whoShow(1)">...<\/div>\n    <!-- blue\u9875\u9762\u903b\u8f91\u7ed3\u6784 -->\n    <div class="main blue" v-show="whoShow(2)">...<\/div>\n<\/div>\n<script type="text\/javascript">\n    new Vue({\n        el: "#app",\n        data: {\n            isShow: false,\n            tag: 0,\n            flag: 0\n        },\n        methods: {\n            toggle () {\n                this.isShow = !this.isShow;\n            },\n            changeWrap (num) {\n                this.tag = num;\n            },\n            changeMain (num) {\n                \/\/ this.flag num\n                this.flag = num;\n            },\n            whoShow (num) {\n                \/\/ this.flag num\n                return this.flag == num;\n            }\n        }\n    })\n<\/script><\/code><\/pre>\n
7\u3001\u5faa\u73af\u6307\u4ee4<\/h2>\n
<div id="app">\n    <h1>{{ msg }}<\/h1>\n    <!-- v-for="item in items" -->\n    <!-- \u904d\u5386\u7684\u5bf9\u8c61: \u6570\u7ec4[] \u5bf9\u8c61(\u5b57\u5178){} -->\n    <ul>\n        <li>{{ list[0] }}<\/li>\n        <li>{{ list[1] }}<\/li>\n        <li>{{ list[2] }}<\/li>\n        <li>{{ list[3] }}<\/li>\n        <li>{{ list[4] }}<\/li>\n    <\/ul>\n\n    <!-- n\u4e3a\u904d\u5386\u7684\u5143\u7d20\u503c -->\n    <ul>\n        <li v-for="n in list">{{ n }}<\/li>\n    <\/ul>\n\n    <!-- \u4e00\u822c\u5217\u8868\u6e32\u67d3\u9700\u8981\u5efa\u7acb\u7f13\u5b58 -->\n    <!-- \u5217\u8868\u6e32\u67d3\u662f\u5faa\u73af,\u9700\u8981\u8d4b\u503c\u53d8\u91cf\u7ed9key,\u4f7f\u7528key\u9700\u8981v-bind:\u5904\u7406 -->\n    <!-- v-for\u53d8\u91cf\u6570\u7ec4[]\u65f6,\u63a5\u6536\u4e24\u4e2a\u503c\u65f6,\u7b2c\u4e00\u4e2a\u4e3a\u5143\u7d20\u503c,\u7b2c\u4e8c\u4e2a\u4e3a\u5143\u7d20\u7d22\u5f15 -->\n    <ul>\n        <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}<\/li>\n    <\/ul>\n\n    <ul>\n        <li>{{ dic['name'] }}<\/li>\n        <li>{{ dic.age }}<\/li>\n        <li>{{ dic.gender }}<\/li>\n    <\/ul>\n\n    <!-- v-for\u53d8\u91cf\u5bf9\u8c61{}\u65f6,\u63a5\u6536\u4e09\u4e2a\u503c\u65f6,\u7b2c\u4e00\u4e2a\u4e3a\u5143\u7d20\u503c,\u7b2c\u4e8c\u4e2a\u4e3a\u5143\u7d20\u952e,\u7b2c\u4e09\u4e2a\u4e3a\u5143\u7d20\u7d22\u5f15 -->\n    <ul>\n        <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}<\/li>\n    <\/ul>\n\n    <!-- \u904d\u5386\u7684\u5d4c\u5957 -->\n    <div v-for="(person, index) in persons" :key="index" style="height: 21px;">\n        <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}   <\/div>\n    <\/div>\n<\/div>\n<script type="text\/javascript">\n    new Vue({\n        el: "#app",\n        data: {\n            msg: "\u5217\u8868\u6e32\u67d3",\n            list: [1, 2, 3, 4, 5],\n            dic: {\n                name: 'zero',\n                age: 88888,\n                gender: 'god'\n            },\n            persons: [\n                {name: "zero", age: 8},\n                {name: "egon", age: 78},\n                {name: "liuXX", age: 77},\n                {name: "yXX", age: 38}\n            ]\n        }\n    })\n<\/script><\/code><\/pre>\n
8\u3001todolist\u6848\u4f8b<\/h2>\n
<div id="app">\n    <div>\n        <input type="text" v-model="val">\n        <button type="button" @click="submitMsg">\u63d0\u4ea4<\/button>\n    <\/div>\n    <ul>\n        <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}<\/li>\n    <\/ul>\n    {{ list }}\n<\/div>\n<script type="text\/javascript">\n    new Vue({\n        el: "#app",\n        data: {\n            val: "",\n            list: []\n        },\n        methods: {\n            submitMsg () {\n                if (this.val) {\n                    this.list.push(this.val);\n                    this.val = ""\n                }\n            },\n            removeMsg(index) {\n                this.list.splice(index, 1)\n            }\n        }\n    })\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Vue\u6307\u4ee4 1\u3001\u6587\u672c\u76f8\u5173\u6307\u4ee4 <div id="app"> <!– \u63d2 […]<\/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\/4737"}],"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=4737"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4737\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}