{"id":7754,"date":"2022-11-12T12:37:47","date_gmt":"2022-11-12T04:37:47","guid":{"rendered":"https:\/\/egonlin.com\/?p=7754"},"modified":"2022-11-12T12:37:47","modified_gmt":"2022-11-12T04:37:47","slug":"%e7%ac%ac%e4%b8%89%e8%8a%82%ef%bc%9avue%e7%94%9f%e5%91%bd%e6%9c%9f%e9%92%a9%e5%ad%90","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=7754","title":{"rendered":"\u7b2c\u4e09\u8282\uff1aVue\u751f\u547d\u671f\u94a9\u5b50"},"content":{"rendered":"

\u4e00\uff1a\u751f\u547d\u5468\u671f\u56fe<\/h2>\n

1.\u5b98\u7f51\u539f\u56fe<\/h3>\n

\"img\"<\/div><\/p>\n

3.\u6211\u7406\u89e3\u7684\u56fe<\/h3>\n

\"img\"<\/div><\/p>\n

\u4e8c\uff1a\u751f\u547d\u5468\u671f<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n
\u94a9\u5b50\u51fd\u6570<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
beforeCreate<\/td>\n\u521b\u5efaVue\u5b9e\u4f8b\u4e4b\u524d\u8c03\u7528<\/td>\n<\/tr>\n
created<\/td>\n\u521b\u5efaVue\u5b9e\u4f8b\u6210\u529f\u540e\u8c03\u7528\uff08\u53ef\u4ee5\u5728\u6b64\u5904\u53d1\u9001\u5f02\u6b65\u8bf7\u6c42\u540e\u7aef\u6570\u636e\uff09<\/td>\n<\/tr>\n
beforeMount<\/td>\n\u6e32\u67d3DOM\u4e4b\u524d\u8c03\u7528<\/td>\n<\/tr>\n
mounted<\/td>\n\u6e32\u67d3DOM\u4e4b\u540e\u8c03\u7528<\/td>\n<\/tr>\n
beforeUpdate<\/td>\n\u91cd\u65b0\u6e32\u67d3\u4e4b\u524d\u8c03\u7528\uff08\u6570\u636e\u66f4\u65b0\u7b49\u64cd\u4f5c\u65f6\uff0c\u63a7\u5236DOM\u91cd\u65b0\u6e32\u67d3\uff09<\/td>\n<\/tr>\n
updated<\/td>\n\u91cd\u65b0\u6e32\u67d3\u5b8c\u6210\u4e4b\u540e\u8c03\u7528<\/td>\n<\/tr>\n
beforeDestroy<\/td>\n\u9500\u6bc1\u4e4b\u524d\u8c03\u7528<\/td>\n<\/tr>\n
destroyed<\/td>\n\u9500\u6bc1\u4e4b\u540e\u8c03\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

create<\/h3>\n
let vm = new Vue()<\/code><\/pre>\n
mount<\/h3>\n
\u6302\u8f7d\uff0c\u628adiv\u6302\u8f7d\u5230\u7ec4\u4ef6\u4e2d<\/p>\n
\"img\"<\/div><\/p>\n
update<\/h3>\n
let vm = new Vue({\n    el: '#box',\n    data: {\n        isShow: true    \/\/ \u4fee\u6539\u8fd9\u4e2a\u5185\u5bb9\n    },\n    methods: {\n        handleClick() {\n            console.log('\u6211\u662f\u6839\u7ec4\u4ef6')\n        }\n    }\n})<\/code><\/pre>\n
1.bedoreCreate<\/h3>\n
2.created<\/h3>\n
3.beforeMount<\/h3>\n
4.mounted\uff08\u7528\u5f97\u6700\u591a\uff09<\/h3>\n
\u8fd9\u65f6\u5019\u53ef\u4ee5\u5411\u540e\u7aef\u53d1\u9001\u6570\u636e\u4e86<\/p>\n
5.beforeUpdate<\/h3>\n
6.updated<\/h3>\n
7.beforeDestroy<\/h3>\n
8.destroyed<\/h3>\n
\u7ec4\u4ef6\u9500\u6bc1 – \u7ed9\u7ec4\u4ef6\u5199\u4e00\u4e2a\u5b9a\u65f6\u5668<\/p>\n
setTimeout()    \/\/ \u5ef6\u8fdf3s\u5e72\u4ec0\u4e48\u4e8b\nsetInterval()    \/\/ \u5ef6\u8fdf3s\u5e72\u4ec0\u4e48\u4e8b<\/code><\/pre>\n
\u6d4b\u8bd5\u4ee3\u7801<\/h2>\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <title>\u751f\u547d\u5468\u671f<\/title>\n    <script src="https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.12\/vue.min.js"><\/script>\n<\/head>\n<body>\n<div id="box">\n    <child v-if="isShow"><\/child>\n    <br>\n    <button @click="terminate">\u5220\u9664\u5b50\u7ec4\u4ef6<\/button>\n    <button @click="reborn">\u663e\u793a\u5b50\u7ec4\u4ef6<\/button>\n<\/div>\n<\/body>\n<script>\n    Vue.component('child', {\n        template: `\n            <div>\n                {{name}}\n                <button @click="name='Darker1'">\u66f4\u65b0\u6570\u636e1<\/button>\n                <button @click="name='Darker2'">\u66f4\u65b0\u6570\u636e2<\/button>\n            <\/div>`,\n        data() {\n            return {\n                name: 'Darker1',\n            }\n        },\n        beforeCreate() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1abeforeCreate')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n        },\n        created() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1acreated')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n        },\n        beforeMount() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1abeforeMount')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n        },\n        mounted() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1amounted')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n          \/\/\u7528\u7684\u6700\u591a\uff0c\u5411\u540e\u7aef\u52a0\u8f7d\u6570\u636e\uff0c\u521b\u5efa\u5b9a\u65f6\u5668\u7b49\n            console.log("\u9875\u9762\u5df2\u88abvue\u5b9e\u4f8b\u6e32\u67d3, data, methods\u5df2\u66f4\u65b0");\n            console.log('mounted')\n            this.t = setInterval(function () {\n                console.log('daada')\n            }, 3000)\n\n        },\n        beforeUpdate() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1abeforeUpdate')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n        },\n        updated() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1aupdated')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n        },\n        beforeDestroy() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1abeforeDestroy')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n        },\n        destroyed() {\n            console.group('\u5f53\u524d\u72b6\u6001\uff1adestroyed')\n            console.log('\u5f53\u524del\u72b6\u6001\uff1a', this.$el)\n            console.log('\u5f53\u524ddata\u72b6\u6001\uff1a', this.$data)\n            console.log('\u5f53\u524dname\u72b6\u6001\uff1a', this.name)\n          \/\/\u7ec4\u4ef6\u9500\u6bc1\uff0c\u6e05\u7406\u5b9a\u65f6\u5668\n            clearInterval(this.t)\n            this.t = null\n            console.log('destoryed')\n        },\n\n    })\n    let vm = new Vue({\n        el: '#box',\n        data: {\n            isShow: true\n        },\n        methods: {\n            terminate() {\n                this.isShow = false\n            },\n            reborn() {\n                this.isShow = true\n            }\n        }\n    })\n<\/script>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u4e00\uff1a\u751f\u547d\u5468\u671f\u56fe 1.\u5b98\u7f51\u539f\u56fe 3.\u6211\u7406\u89e3\u7684\u56fe \u4e8c\uff1a\u751f\u547d\u5468\u671f \u94a9\u5b50\u51fd\u6570 \u63cf\u8ff0 beforeCreate \u521b\u5efaVu […]<\/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\/7754"}],"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=7754"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/7754\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}