{"id":670,"date":"2021-10-20T23:24:05","date_gmt":"2021-10-20T14:24:05","guid":{"rendered":"https:\/\/vasyworks.yworks.net\/?page_id=670"},"modified":"2021-10-20T23:26:09","modified_gmt":"2021-10-20T14:26:09","slug":"explanation_django_vuejs","status":"publish","type":"page","link":"https:\/\/vasyworks.yworks.net\/index.php\/explanation\/explanation_django_vuejs\/","title":{"rendered":"Django\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u306eVue.js\u306e\u5229\u7528\u306b\u3064\u3044\u3066\uff1aVasyworks\u89e3\u8aac"},"content":{"rendered":"\n

Vasyworks\u3067\u306fDjango\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067Vue.js\u3092\u547c\u3073\u51fa\u3057\u3066\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002Django\u306e\u30d3\u30e5\u30fc\u3067\u6e21\u3055\u308c\u305f\u30e2\u30c7\u30eb\u306e\u30c7\u30fc\u30bf\u3092\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u6e21\u3057\u3066Vue.js\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u53c2\u7167\u3059\u308b\u3088\u3046\u306a\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n

\u307e\u305a\u306f\u30b3\u30fc\u30c9\u30b5\u30f3\u30d7\u30eb\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u25a0Django\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5074\uff08sample.html\uff09<\/p>\n\n\n\n

{% load static %}\n\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Django\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068Vue.js\u306e\u30b5\u30f3\u30d7\u30eb<\/title>\n    <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.11\/dist\/vue.js\"><\/script>\n<\/head>\n<body>\n\n    \u30fb\u30fb\u30fb\n\n    <div id=\"contents\">\n\n        \u30fb\u30fb\u30fb\n\n    <\/div>\n\n    \u30fb\u30fb\u30fb\n\n    <script type=\"text\/javascript\" src=\"{% static 'sample\/js\/sample.js' %}\"><\/script>\n    <script type=\"text\/javascript\">\n        var app = createSampleVue(\n            {{ intValue1 }},\n            \"{{ strValue1 }}\",\n            {{ intValue2 }},\n            \"{{ strValue2 }}\",\n        );\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
\u25a0Java\u30b9\u30af\u30ea\u30d7\u30c8\u5074\uff08sample.js\uff09<\/p>\n\n\n\n
function createSampleVue(\n    valueA,\n    valueB,\n    valueC,\n    valueD,\n) {\n    return new Vue({\n        el: \"#contents\",\n        delimiters: [\"[[\", \"]]\"],\n        data: {\n            dataA: valueA,\n            dataB: valueB,\n            dataC: valueC,\n            dataD: valueD, \n        },\n        mounted: function(event) {\n\n            \u30fb\u30fb\u30fb\n\n        },\n        methods: {\n\n            \u30fb\u30fb\u30fb\n\n        },\n    });\n}\n<\/code><\/pre>\n\n\n\n
Django\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068Vue.js\u3092\u4f7f\u3046\u969b\u306b\u3001Django\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u5909\u6570\u3092\u53c2\u7167\u3059\u308b\u969b\u306b\u4f7f\u7528\u3059\u308b\u8a18\u53f7”{{” \u304a\u3088\u3073 “}}”\u3068\u3001Vue.js\u3067\u5909\u6570\u3092\u53c2\u7167\u3059\u308b\u8a18\u53f7”{{” \u304a\u3088\u3073 “}}”\u304c\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u540c\u3058\u3067\u3042\u308b\u305f\u3081\u3001\u307e\u305a\u306f\u3069\u3061\u3089\u304b\u3092\u5909\u66f4\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
Vasyworks\u3067\u306fJava\u30b9\u30af\u30ea\u30d7\u30c8\u5185\u3067delimiters\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u3066\u3001Vue.js\u5074\u306e\u8a18\u53f7\uff08\u30c7\u30ea\u30df\u30bf\uff09\u3092”[[” \u304a\u3088\u3073 “]]”\u306b\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
Vasyworks\u3067\u306fDjango\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u5024\u3092Vue.js\u306b\u6e21\u3059\u65b9\u6cd5\u3068\u3057\u3066\u3001Vue\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u6642\u306e\u5f15\u6570\u3068\u3057\u3066Django\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5074\u3067\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u6587\u5b57\u5217\u3092\u5f15\u6570\u3068\u3057\u3066\u6e21\u3059\u5834\u5408\u306f\u5909\u6570\u306e\u4e21\u30b5\u30a4\u30c9\u3092”\uff08\u30c0\u30d6\u30eb\u30af\u30a9\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\uff09\u3067\u62ec\u3063\u3066\u304a\u304f\u3053\u3068\u3092\u5fd8\u308c\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
Java\u30b9\u30af\u30ea\u30d7\u30c8\u5074\u3067\u306fVue\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u6642\u306e\u5f15\u6570\u3092\u53d7\u3051\u53d6\u308a\u3001data\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
Django\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304b\u3089Vue.js\u306b\u5024\u3092\u6e21\u3059\u4ed6\u306e\u65b9\u6cd5\u3068\u3057\u3066\u306f\u3001Vasyworks\u3067\u306f\u4f7f\u3063\u3066\u3044\u306a\u3044\u306e\u3067\u3059\u304c\u3001<input type=”hidden”\u3000>\u30bf\u30b0\u306bref\u6307\u5b9a\u3092\u52a0\u3048\u3066\u3001Vue.js\u306eJava\u30b9\u30af\u30ea\u30d7\u30c8\u5074\u3067$refs\u3067\u53c2\u7167\u3059\u308b\u3068\u3044\u3046\u65b9\u6cd5\u306a\u3069\u3082\u3042\u308a\u305d\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Vasyworks\u3067\u306fDjango\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067Vue.js\u3092\u547c\u3073\u51fa\u3057\u3066\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002Django\u306e\u30d3\u30e5\u30fc\u3067\u6e21\u3055\u308c\u305f\u30e2\u30c7\u30eb\u306e\u30c7\u30fc\u30bf\u3092\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u6e21\u3057\u3066Vue.js\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u53c2\u7167\u3059\u308b\u3088\u3046\u306a\u6d41\u308c\u3067\u3059\u3002 \u307e\u305a\u306f\u30b3\u30fc\u30c9\u30b5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":567,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/pages\/670"}],"collection":[{"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/comments?post=670"}],"version-history":[{"count":21,"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/pages\/670\/revisions"}],"predecessor-version":[{"id":717,"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/pages\/670\/revisions\/717"}],"up":[{"embeddable":true,"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/vasyworks.yworks.net\/index.php\/wp-json\/wp\/v2\/media?parent=670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}