{"id":7744,"date":"2022-11-12T12:31:01","date_gmt":"2022-11-12T04:31:01","guid":{"rendered":"https:\/\/egonlin.com\/?p=7744"},"modified":"2022-11-12T12:31:01","modified_gmt":"2022-11-12T04:31:01","slug":"%e7%ac%ac%e4%ba%94%e8%8a%82%ef%bc%9avue%e8%bf%9b%e9%98%b6","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=7744","title":{"rendered":"\u7b2c\u4e94\u8282\uff1aVue\u8fdb\u9636"},"content":{"rendered":"

1 slot\u63d2\u69fd (\u5185\u5bb9\u5206\u53d1)<\/h2>\n
a. \u5355\u4e2aslot \nb. \u5177\u540dslot\n    *\u6df7\u5408\u7236\u7ec4\u4ef6\u7684\u5185\u5bb9\u4e0e\u5b50\u7ec4\u4ef6\u81ea\u5df1\u7684\u6a21\u677f-->\u5185\u5bb9\u5206\u53d1\n    *\u7236\u7ec4\u4ef6\u6a21\u677f\u7684\u5185\u5bb9\u5728\u7236\u7ec4\u4ef6\u4f5c\u7528\u57df\u5185\u7f16\u8bd1\uff1b\u5b50\u7ec4\u4ef6\u6a21\u677f\u7684\u5185\u5bb9\u5728\u5b50\u7ec4\u4ef6\u4f5c\u7528\u57df\u5185\u7f16\u8bd1\u3002<\/code><\/pre>\n
1.1 \u57fa\u672c\u4f7f\u7528<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n    <!-- \u4e0d\u4f7f\u7528\u63d2\u69fd\u5199\u7684aaa\u4e0d\u4f1a\u663e\u793a,\u4f7f\u7528\u5c31\u4f1a\u663e\u793a-->\n    <child1>aaa<\/child1>\n\n<\/div>\n<\/body>\n<script>\n    var bus = new Vue() \/\/new\u4e00\u4e2avue\u7684\u5b9e\u4f8b\uff0c\u5c31\u662f\u4e2d\u592e\u4e8b\u4ef6\u603b\u7ebf\n    Vue.component('child1', {\n        template: `<div>\n          \u9996\u9875\n          <slot><\/slot>\n        <\/div>`,\n\n    })\n var vm = new Vue({\n        el: '#box',\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
1.2 \u63d2\u69fd\u5e94\u7528\u573a\u666f1<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n<!--    \u5199\u4e86\u4e00\u4e2a\u8f6e\u64ad\u7ec4\u4ef6\uff0c\u7528\u6237\u60f3\u8f6e\u64ad\u4ec0\u4e48\u5c31\u653e\u4ec0\u4e48-->\n    <swiper>\n        <p v-for="data in 4">{{data}}<\/p>\n    <\/swiper>\n\n       <swiper>\n           <img :src="data" v-for="data in 5">\n    <\/swiper>\n\n<\/div>\n<\/body>\n<script>\n    var bus = new Vue() \/\/new\u4e00\u4e2avue\u7684\u5b9e\u4f8b\uff0c\u5c31\u662f\u4e2d\u592e\u4e8b\u4ef6\u603b\u7ebf\n    Vue.component('swiper', {\n        template: `<div>\n          <slot><\/slot>\n        <\/div>`,\n\n    })\n var vm = new Vue({\n        el: '#box',\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
1.3 \u63d2\u69fd\u5e94\u7528\u573a\u666f2<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n    <!--\u901a\u8fc7\u63d2\u69fd\u5b9e\u73b0\u5728\u4e00\u4e2a\u7ec4\u4ef6\u4e2d\u63a7\u5236\u53e6\u4e00\u4e2a\u7ec4\u4ef6\u7684\u663e\u793a\u9690\u85cf-->\n    <navbar> <button @click="isShow=!isShow">\u70b9\u6211\u663e\u793a\u9690\u85cf<\/button><\/navbar>\n\n    <swiper v-if="isShow"><\/swiper>\n<\/div>\n<\/body>\n<script>\n    Vue.component('navbar', {\n        template: `<div>\n          navbar\n          <slot><\/slot>\n        <\/div>`,\n\n    })\n    Vue.component('swiper', {\n        template: `<div>\n          <p>111<\/p>\n          <p>222<\/p>\n          <p>333<\/p>\n        <\/div>`,\n\n    })\n    var vm = new Vue({\n        el: '#box',\n        data:{\n            isShow:true\n        }\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
1.4 \u5177\u540d\u63d2\u69fd<\/h3>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n<!--    \u5177\u540d\u63d2\u69fd\uff0c\u628ap\u6807\u7b7e\u7ed9a\u63d2\u69fd\uff0cdiv\u6807\u7b7e\u7ed9b\u63d2\u69fd-->\n    <navbar>\n        <p slot="a">pppp<\/p>\n        <div slot="b">bbbb<\/div>\n    <\/navbar>\n<\/div>\n<\/body>\n<script>\n    Vue.component('navbar', {\n        template: `<div>\n        <slot name="a"><\/slot>\n          navbar\n          <slot name="b"><\/slot>\n        <\/div>`,\n\n    })\nvar vm = new Vue({\n        el: '#box',\n        data:{\n\n        }\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
2 transition\u8fc7\u6e21<\/h2>\n
Vue \u5728\u63d2\u5165\u3001\u66f4\u65b0\u6216\u8005\u79fb\u9664 DOM \u65f6\uff0c\u63d0\u4f9b\u591a\u79cd\u4e0d\u540c\u65b9\u5f0f\u7684\u5e94\u7528\u8fc7\u6e21\u6548\u679c\u3002\n(1)\u5355\u5143\u7d20\/\u7ec4\u4ef6\u8fc7\u6e21  * css\u8fc7\u6e21  * css\u52a8\u753b  * \u7ed3\u5408animate.css\u52a8\u753b\u5e93\n(2) \u591a\u4e2a\u5143\u7d20\u8fc7\u6e21(\u8bbe\u7f6ekey) \n     *\u5f53\u6709\u76f8\u540c\u6807\u7b7e\u540d\u7684\u5143\u7d20\u5207\u6362\u65f6\uff0c\u9700\u8981\u901a\u8fc7 key \u7279\u6027\u8bbe\u7f6e\u552f\u4e00\u7684\u503c\u6765\u6807\u8bb0\u4ee5\u8ba9 Vue \u533a\u5206\u5b83\u4eec\uff0c\u5426\u5219 Vue \u4e3a\u4e86\u6548\u7387\u53ea\u4f1a\u66ff\u6362\u76f8\u540c\u6807\u7b7e\u5185\u90e8\u7684\u5185\u5bb9\u3002  \n      mode:in-out ; out-in\n(3)\u591a\u4e2a\u7ec4\u4ef6\u8fc7\u6e21\n(4)\u5217\u8868\u8fc7\u6e21(\u8bbe\u7f6ekey) \n     *<transition-group>\u4e0d\u540c\u4e8e transition\uff0c \u5b83\u4f1a\u4ee5\u4e00\u4e2a\u771f\u5b9e\u5143\u7d20\u5448\u73b0\uff1a\u9ed8\u8ba4\u4e3a\u4e00\u4e2a <span>\u3002\u4f60\u4e5f\u53ef\u4ee5\u901a\u8fc7tag \u7279\u6027\u66f4\u6362\u4e3a\u5176\u4ed6\u5143\u7d20\u3002  \n     * \u63d0\u4f9b\u552f\u4e00\u7684 key \u5c5e\u6027\u503c<\/code><\/pre>\n
3 \u751f\u547d\u5468\u671f<\/h2>\n
    i. \u751f\u547d\u5468\u671f\u5404\u4e2a\u9636\u6bb5https:\/\/cn.vuejs.org\/v2\/guide\/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA\n    ii. \u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570\u7684\u89e6\u53d1\u6761\u4ef6\u4e0e\u4f5c\u7528<\/code><\/pre>\n
4 swiper\u5b66\u4e60<\/h2>\n
\u200b   https:\/\/www.swiper.com.cn\/<\/a><\/p>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n\n    <link rel="stylesheet" href="https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css">\n    <script src="https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js"><\/script>\n    <!--    <link rel="stylesheet" href="https:\/\/unpkg.com\/swiper\/swiper-bundle.css">  -->\n    <!--<script src="https:\/\/unpkg.com\/swiper\/swiper-bundle.js"> <\/script>  -->\n    <style>\n        .swiper-container {\n            width: 80%;\n            height: 600px;\n        }\n    <\/style>\n\n<\/head>\n<body>\n<div id="box">\n\n    <div class="swiper-container">\n        <div class="swiper-wrapper">\n            <div class="swiper-slide" v-for="data in datalist">\n\n                {{data}}\n                <img src="https:\/\/timgsa.baidu.com\/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">\n            <\/div>\n        <\/div>\n        <!-- \u5982\u679c\u9700\u8981\u5206\u9875\u5668 -->\n        <div class="swiper-pagination"><\/div>\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<\/div>\n<\/body>\n<script>\n    var vm = new Vue({\n        el: '#box',\n        data: {\n            datalist: [],\n        },\n        mounted() {\n            setTimeout(() => {\n                this.datalist = ['111', '222', '333']\n            }, 2000)\n            \/\/\u8f6e\u64ad\u56fe\u521d\u59cb\u5316\u4e0d\u662f\u653e\u5728\u8fd9\uff0c\u56e0\u4e3a\u6570\u636e\u53d8\u5316\u548cdom\u66f4\u65b0\u662f\u5f02\u6b65\u7684\n            \/\/\u9700\u8981\u653e\u5728updated\u4e2d\n        },\n        updated() {\n            var mySwiper = new Swiper('.swiper-container', {\n                \/\/ direction: 'vertical', \/\/ \u5782\u76f4\u5207\u6362\u9009\u9879\n                loop: true, \/\/ \u5faa\u73af\u6a21\u5f0f\u9009\u9879\n                \/\/ \u5982\u679c\u9700\u8981\u5206\u9875\u5668\n                pagination: {\n                    el: '.swiper-pagination',\n                },\n                \/\/ \u5982\u679c\u9700\u8981\u524d\u8fdb\u540e\u9000\u6309\u94ae\n                navigation: {\n                    nextEl: '.swiper-button-next',\n                    prevEl: '.swiper-button-prev',\n                },\n\n                \/\/ \u5982\u679c\u9700\u8981\u6eda\u52a8\u6761\n                scrollbar: {\n                    el: '.swiper-scrollbar',\n                },\n\n            })\n        },\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
5 \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7684\u5c01\u88c5<\/h2>\n
\u200b   \u81ea\u5b9a\u4e49\u5c01\u88c5swiper\u7ec4\u4ef6\uff08\u57fa\u4e8eswiper\uff09
\n\u200b   \u6ce8\u610f\uff1a \u9632\u6b62swipe\u521d\u59cb\u5316\u8fc7\u65e9<\/p>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>Title<\/title>\n    <script src="js\/vue.js"><\/script>\n\n    <link rel="stylesheet" href="https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css">\n    <script src="https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js"><\/script>\n    <!--    <link rel="stylesheet" href="https:\/\/unpkg.com\/swiper\/swiper-bundle.css">  -->\n    <!--<script src="https:\/\/unpkg.com\/swiper\/swiper-bundle.js"> <\/script>  -->\n    <style>\n        .swiper-container {\n            width: 80%;\n            height: 600px;\n        }\n    <\/style>\n\n<\/head>\n<body>\n<div id="box">\n    {{name}}\n<!--    diff\u7b97\u6cd5\u68c0\u6d4b\u5230key\u53d8\u5316\u4e86\uff0c\u4f1a\u628aswipper\u5220\u6389\uff0c\u91cd\u65b0\u521b\u5efa\uff0c\u89e6\u53d1\u7ec4\u4ef6\u7684mounted\u6267\u884c\uff0c\u5b8c\u6210swipper\u5b9e\u4f8b\u5316\uff0c\u4e0d\u5728updated\u4e2d\u521d\u59cb\u5316-->\n<!--    \u5b50\u7ec4\u4ef6\u7684mounted\u5728\u6839\u7ec4\u4ef6\u7684mounted\u4e4b\u524d\u6267\u884c\uff0c\u6240\u6709\u7ec4\u4ef6\u6302\u8f7d\u5b8c\u6210\u540e\uff0c\u6839\u7ec4\u4ef6\u624d\u6302\u8f7d-->\n    <swipper :key="datalist.length">\n<!--    <swipper>-->\n        <div class="swiper-slide" v-for="data in datalist">\n            <img src="https:\/\/timgsa.baidu.com\/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">\n        <\/div>\n    <\/swipper>\n<\/div>\n<\/body>\n<script>\n\n    Vue.component('swipper',{\n        template:`\n        <div class="swiper-container">\n        <div class="swiper-wrapper">\n          <slot><\/slot>\n        <\/div>\n        <div class="swiper-pagination"><\/div>\n        <div class="swiper-button-prev"><\/div>\n        <div class="swiper-button-next"><\/div>\n        <div class="swiper-scrollbar"><\/div>\n    <\/div>\n        `,\n        mounted(){\n            console.log('\u5b50\u7ec4\u4ef6mounted')\n            var mySwiper = new Swiper('.swiper-container', {\n                \/\/ direction: 'vertical', \/\/ \u5782\u76f4\u5207\u6362\u9009\u9879\n                loop: true, \/\/ \u5faa\u73af\u6a21\u5f0f\u9009\u9879\n                \/\/ \u5982\u679c\u9700\u8981\u5206\u9875\u5668\n                pagination: {\n                    el: '.swiper-pagination',\n                },\n                \/\/ \u5982\u679c\u9700\u8981\u524d\u8fdb\u540e\u9000\u6309\u94ae\n                navigation: {\n                    nextEl: '.swiper-button-next',\n                    prevEl: '.swiper-button-prev',\n                },\n\n                \/\/ \u5982\u679c\u9700\u8981\u6eda\u52a8\u6761\n                scrollbar: {\n                    el: '.swiper-scrollbar',\n                },\n\n            })\n        },\n\n        \/\/ updated(){\/\/\u5982\u679c\u8ddf\u7ec4\u4ef6\u4e2d\u6709\u6570\u636e\u53d8\u5316\uff0c\u5c31\u4f1a\u5bfc\u81f4swipper\u7ec4\u4ef6\u89e6\u53d1update(vm.name='ss'\u6d4b\u8bd5\u4e00\u4e0b),\u5bfc\u81f4\u591a\u6b21\u6267\u884c\uff0c\u5f71\u54cd\u6548\u7387\uff0c\u6240\u4ee5\u4f7f\u7528key+mounted\u65b9\u5f0f\n        \/\/     console.log('\u5b50\u7ec4\u4ef6update')\n        \/\/     var mySwiper = new Swiper('.swiper-container', {\n        \/\/         \/\/ direction: 'vertical', \/\/ \u5782\u76f4\u5207\u6362\u9009\u9879\n        \/\/         loop: true, \/\/ \u5faa\u73af\u6a21\u5f0f\u9009\u9879\n        \/\/         \/\/ \u5982\u679c\u9700\u8981\u5206\u9875\u5668\n        \/\/         pagination: {\n        \/\/             el: '.swiper-pagination',\n        \/\/         },\n        \/\/         \/\/ \u5982\u679c\u9700\u8981\u524d\u8fdb\u540e\u9000\u6309\u94ae\n        \/\/         navigation: {\n        \/\/             nextEl: '.swiper-button-next',\n        \/\/             prevEl: '.swiper-button-prev',\n        \/\/         },\n        \/\/\n        \/\/         \/\/ \u5982\u679c\u9700\u8981\u6eda\u52a8\u6761\n        \/\/         scrollbar: {\n        \/\/             el: '.swiper-scrollbar',\n        \/\/         },\n        \/\/\n        \/\/     })\n        \/\/ }\n\n    })\n    var vm = new Vue({\n        el: '#box',\n        data: {\n            name:'lqz',\n            datalist: [],\n        },\n        mounted() {\n            setTimeout(() => {\n                this.datalist = ['111', '222', '333']\n            }, 2000)\n            \/\/\u8f6e\u64ad\u56fe\u521d\u59cb\u5316\u4e0d\u662f\u653e\u5728\u8fd9\uff0c\u56e0\u4e3a\u6570\u636e\u53d8\u5316\u548cdom\u66f4\u65b0\u662f\u5f02\u6b65\u7684\n            \/\/\u9700\u8981\u653e\u5728updated\u4e2d\n        },\n\n    })\n<\/script>\n<\/html><\/code><\/pre>\n
6 \u81ea\u5b9a\u4e49\u6307\u4ee4<\/h2>\n
(1)\u81ea\u5b9a\u4e49\u6307\u4ee4\u4ecb\u7ecd directives\n(2)\u94a9\u5b50\u51fd\u6570* \u53c2\u6570 el,binding,vnode(vnode.context)* bind,inserted,update,componentUpdated,unbind\n(3)\u51fd\u6570\u7b80\u5199\n(4)\u81ea\u5b9a\u4e49\u6307\u4ee4-\u8f6e\u64ad\n    *inserted \u63d2\u5165\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u65f6\u8c03\u7528(vnode.context.datalist.length-1)\n    *this.$nextTick()<\/code><\/pre>\n
6.1 \u57fa\u672c\u4f7f\u7528<\/h3>\n
<\/div>
\u67e5\u770b\u66f4\u591a<\/h2>
\u8054\u7cfb\u7ba1\u7406\u5458\u5fae\u4fe1tutu19192010\uff0c\u6ce8\u518c\u8d26\u53f7<\/p>\n<\/div>
<\/div>
<\/td><\/tr>
<\/td><\/tr><\/tbody><\/table>
<\/td><\/tr><\/tbody><\/table><\/form>
Register<\/a><\/div>
Forgotten username or password?<\/a><\/div>
<\/div><\/div><\/div>
<\/div>","protected":false},"excerpt":{"rendered":"
1 slot\u63d2\u69fd (\u5185\u5bb9\u5206\u53d1) a. \u5355\u4e2aslot b. \u5177\u540dslot *\u6df7\u5408\u7236\u7ec4\u4ef6\u7684\u5185\u5bb9\u4e0e\u5b50\u7ec4\u4ef6\u81ea\u5df1\u7684\u6a21\u677f- […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,431],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/7744"}],"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=7744"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/7744\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}