{"id":10779,"date":"2023-06-15T09:34:30","date_gmt":"2023-06-15T00:34:30","guid":{"rendered":"https:\/\/www.moonmile.net\/blog\/?p=10779"},"modified":"2023-06-15T09:34:30","modified_gmt":"2023-06-15T00:34:30","slug":"vue2-%e3%81%8b%e3%82%89-vue3-%e3%81%b8%e7%a7%bb%e8%a1%8c%e3%81%99%e3%82%8b-%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e7%b7%a8","status":"publish","type":"post","link":"https:\/\/www.moonmile.net\/blog\/archives\/10779","title":{"rendered":"Vue2 \u304b\u3089 Vue3 \u3078\u79fb\u884c\u3059\u308b \u30dc\u30bf\u30f3\u30a4\u30d9\u30f3\u30c8\u7de8"},"content":{"rendered":"\n

\u524d\u56de\u306e\u7d9a\u304d<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\u3053\u3093\u306a\u98a8\u306b CRUD \u6a5f\u80fd\u304c\u4ed8\u3044\u305f\u753b\u9762\u3092 Vue2 \u304b\u3089 Vue3 \u3078\u79fb\u690d\u3057\u3066\u307f\u308b\uff08\u5b9f\u8cea\u7684\u306b\u306f Vue3 \u304b\u3089 Vue2 \u5f62\u5f0f\u3092\u66f8\u304d\u8d77\u3053\u3057\u3066\u3044\u308b\uff09\u3002\u901a\u5e38\u306a\u3089\u3070\u3001\u4e0a\u90e8\u306e\u30ea\u30b9\u30c8\u90e8\u5206\u3068\u304b\u3001\u4e0b\u90e8\u306e\u7de8\u96c6\u9805\u76ee\u306e\u3068\u3053\u308d\u3092 Vue \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u3059\u308b\u3068\u3053\u308d\u306a\u306e\u3060\u304c\u3001\u305d\u306e\u524d\u6bb5\u968e\u3068\u3057\u3066\u3001\uff11\u679a\u306e\u30d9\u30bf\u306e *.vue \u30d5\u30a1\u30a4\u30eb\u306b\u66f8\u304d\u8d77\u3053\u3059\u3002<\/p>\n\n\n\n

template \u90e8\u5206<\/h2>\n\n\n\n
template>\n    <div>\n        <h1>Mos Main by vue2<\/h1>\n        <div>\n            <ul>\n            <li v-for="it in items" :key="it.id">\n                    {{ it.id }} : <a @click="onClickItem(it)">{{ it.title }}<\/a>\n                <\/li> \n            <\/ul>\n        <\/div>\n        <hr \/>\n        <button @click="onClickCreateItem" class="btn btn-primary">\u65b0\u898f\u4f5c\u6210<\/button>\u3000  \n        <button @click="onClickUpdateItem" class="btn btn-secondary">\u66f4\u65b0<\/button>\u3000\n        <button @click="onClickDeleteItem" class="btn btn-danger">\u524a\u9664<\/button>\n        <hr \/>\n        <div>\n        <!-- \u30ab\u30c6\u30b4\u30ea\u60c5\u5831\u3092\u8868\u793a -->\n            <div v-if="mode == 0">\n                <table class="table">\n                    <thead>\n                        <tr>\n                            <th>\u9805\u76ee<\/th>\n                            <th>\u5024<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td>id: <\/td><td>{{  cur.id }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>title: <\/td><td>{{  cur.title }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>image: <\/td><td>{{  cur.image }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u4f5c\u6210\u65e5\u6642: <\/td><td>{{  cur.created_at }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u66f4\u65b0\u65e5\u6642: <\/td><td>{{  cur.updated_at }}<\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n            <div v-if="mode == 1">\n                <div>\u65b0\u898f\u4f5c\u6210\u306e\u30e2\u30fc\u30c9<\/div>\n                <table class="table">\n                    <thead>\n                        <tr>\n                            <th>\u9805\u76ee<\/th>\n                            <th>\u5024<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                    <tr>\n                        <td>title: <\/td>\n                        <td><input v-model="cur.title" placeholder="\u30bf\u30a4\u30c8\u30eb" \/><\/td>\n                    <\/tr>\n                    <tr>\n                        <td>image: <\/td>\n                        <td><input v-model="cur.image" placeholder="\u753b\u50cf" \/><\/td>\n                    <\/tr>\n                <\/tbody>\n                <\/table>\n                <button @click="onClickCommit" class="btn btn-primary">\u767b\u9332<\/button>\u3000\n                <button @click="onClickClear" class="btn btn-secondary">\u30af\u30ea\u30a2<\/button>\n            <\/div>\n            <div v-if="mode == 2">\n                <div>\u66f4\u65b0\u306e\u30e2\u30fc\u30c9<\/div>\n                <table class="table">\n                    <thead>\n                        <tr>\n                            <th>\u9805\u76ee<\/th>\n                            <th>\u5024<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td>id: <\/td>\n                            <td>{{  cur.id }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>title: <\/td>\n                            <td><input v-model="cur.title" placeholder="\u30bf\u30a4\u30c8\u30eb" \/><\/td>\n                        <\/tr>\n                        <tr>\n                            <td>image: <\/td>\n                            <td><input v-model="cur.image" placeholder="\u753b\u50cf" \/><\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u4f5c\u6210\u65e5\u6642: <\/td><td>{{  cur.created_at }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u66f4\u65b0\u65e5\u6642: <\/td><td>{{  cur.updated_at }}<\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n                <button @click="onClickCommit" class="btn btn-primary">\u767b\u9332<\/button>\u3000\n                <button @click="onClickClear" class="btn btn-secondary">\u623b\u3059<\/button>\n            <\/div>\n            <div v-if="mode == 3">\n                <div>\u524a\u9664\u306e\u30e2\u30fc\u30c9<\/div>\n                <table class="table">\n                    <thead>\n                        <tr>\n                            <th>\u9805\u76ee<\/th>\n                            <th>\u5024<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td>id: <\/td><td>{{  cur.id }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>title: <\/td><td>{{  cur.title }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>image: <\/td><td>{{  cur.image }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u4f5c\u6210\u65e5\u6642: <\/td><td>{{  cur.created_at }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u66f4\u65b0\u65e5\u6642: <\/td><td>{{  cur.updated_at }}<\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n                <button @click="onClickDelete" class="btn btn-danger">\u524a\u9664\u3059\u308b<\/button>\u3000\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template><\/code><\/pre><\/div>\n\n\n\n
\u30ea\u30b9\u30c8\u306e\u90e8\u5206\u306f\u5171\u901a\u306b\u3057\u3066\u304a\u3044\u3066\u3001CURD \u6a5f\u80fd\u3092 v-if \u3067\u5207\u308a\u5206\u3051\u308b\u3002\u521d\u5fc3\u8005\u3063\u307d\u3044\u3051\u3069\u3001\u65b0\u4eba\u6559\u80b2\u3067\u306f\u521d\u5fc3\u8005\u306a\u306e\u3067\u3053\u308c\u3067\u554f\u984c\u306a\u3057\u3002\u6700\u521d\u306f v-if \u3067\u533a\u5207\u3063\u3066\u304a\u3044\u3066\u3001\u5f90\u3005\u306b Vue \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6163\u308c\u3066\u3044\u304f\u3068\u3044\u3046\u30b9\u30bf\u30a4\u30eb\u306b\u3059\u308b\u3002\u3044\u304d\u306a\u308a Atomic Design \u306b\u9032\u3080\u306e\u3082\u30a2\u30ea\u306a\u3093\u3060\u308d\u3046\u3051\u3069\u3001\u6b74\u53f2\u7684\u306a\u7d4c\u7def\u3092\u8ffd\u3063\u3066\u304a\u304f\u307b\u3046\u304c\u4f53\u7cfb\u7684\u3067\u899a\u3048\u3084\u3059\u3044\u3002\u306a\u306b\u3088\u308a\u3082\u3001\u696d\u52d9\u30b7\u30b9\u30c6\u30e0\u304c Vue2 \u3068 Vue3 \u304c\u6df7\u5728\u3057\u3066\u3044\u308b\u72b6\u614b\u306a\u306e\u3067\u4e21\u65b9\u899a\u3048\u308b\u306e\u306f\u5fc5\u9808\u306a\u306e\u3060\u304b\u3089\u3002<\/p>\n\n\n\n
            <div v-if="mode == 2">\n                <div>\u66f4\u65b0\u306e\u30e2\u30fc\u30c9<\/div>\n                <table class="table">\n                    <thead>\n                        <tr>\n                            <th>\u9805\u76ee<\/th>\n                            <th>\u5024<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td>id: <\/td>\n                            <td>{{  cur.id }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>title: <\/td>\n                            <td><input v-model="cur.title" placeholder="\u30bf\u30a4\u30c8\u30eb" \/><\/td>\n                        <\/tr>\n                        <tr>\n                            <td>image: <\/td>\n                            <td><input v-model="cur.image" placeholder="\u753b\u50cf" \/><\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u4f5c\u6210\u65e5\u6642: <\/td><td>{{  cur.created_at }}<\/td>\n                        <\/tr>\n                        <tr>\n                            <td>\u66f4\u65b0\u65e5\u6642: <\/td><td>{{  cur.updated_at }}<\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n                <button @click="onClickCommit" class="btn btn-primary">\u767b\u9332<\/button>\u3000\n                <button @click="onClickClear" class="btn btn-secondary">\u623b\u3059<\/button>\n            <\/div>\n<\/code><\/pre><\/div>\n\n\n\n
\u66f4\u65b0\u3059\u308b\u3068\u304d\u306e\u753b\u9762\u306f<\/p>\n\n\n\n