{"id":1106,"date":"2017-03-21T02:28:52","date_gmt":"2017-03-20T17:28:52","guid":{"rendered":"http:\/\/okamurax.com\/?p=1106"},"modified":"2020-05-04T23:39:35","modified_gmt":"2020-05-04T14:39:35","slug":"vue-js-%e5%85%a5%e9%96%80","status":"publish","type":"post","link":"https:\/\/appbay.org\/?p=1106","title":{"rendered":"Vue.js \u5165\u9580"},"content":{"rendered":"

\uff4a\uff53\u3068\u3044\u3046\u3068\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u8272\u3005\u3042\u308b\u306e\u3067\u3001\u4eca\u56de\u306fVue.js\u3092\u5c11\u3057\u3055\u308f\u3063\u3066\u307f\u305f\u3002<\/p>\n

\/\/--------------------------------------------------------\r\n\r\n\/\/Vue\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u751f\u6210\r\n\r\nvar vm = new Vue({})\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/\u62e1\u5f35\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3057\u305f\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u62e1\u5f35\u304b\u3089\u306eVue\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u751f\u6210\r\n\r\nvar v = Vue.extend({})\r\nvar vm = new v()\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/Vue\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u30d7\u30ed\u30ad\u30b7\r\n\r\nvar prop = {age: 99}\r\n\r\nvar vm = new Vue({\r\n  data: prop\r\n})\r\n\r\nconsole.log(vm.age); \/\/00\r\nvm.age = 98;\r\nconsole.log(prop.age); \/\/98\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u30e1\u30bd\u30c3\u30c9$watch\r\n\r\n<div id=\"app\">\r\n  <input type=\"text\" v-model=\"age\">\r\n<\/div>\r\n\r\n<script>\r\nvar vm = new Vue({\r\n  el: \"#app\",\r\n  data:{\r\n    age: 20\r\n  }\r\n})\r\nvm.$watch(\"age\",function(){\r\n  alert(\"\");\r\n});\r\n<\/script>\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/\u30b0\u30ed\u30fc\u30d0\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\r\n<div id=\"app\">\r\n  <hello><\/hello>\r\n<\/div>\r\n\r\n<script>\r\n\/\/\u30b0\u30ed\u30fc\u30d0\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\nVue.component(\"Hello\",{\r\n  template: \"<p>Hello World<\/p>\"\r\n})\r\n\r\n\/\/\u30eb\u30fc\u30c8\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\r\nnew Vue({\r\n  el:\"#app\"\r\n})\r\n<\/script>\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/\u30ed\u30fc\u30ab\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\r\n<div id=\"app\">\r\n  <my-comp><\/my-comp>\r\n<\/div>\r\n\r\n<script>\r\n\r\nvar tmp = Vue.extend({\r\n  template: \"<p>Hello World<\/p>\"\r\n})\r\n\r\nnew Vue({\r\n  el:\"#app\",\r\n  components: {\r\n    \"my-comp\": tmp\r\n  }\r\n})\r\n\r\n<\/script>\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d7\u30ed\u30d1\u30c6\u30a3\r\n\r\n<div id=\"app\">\r\n  <child msg=\"hey\"><\/child>\r\n<\/div>\r\n\r\n<script>\r\n\r\n\/\/\u30d7\u30ed\u30d1\u30c6\u30a3\u5ba3\u8a00\r\nVue.component(\"child\",{\r\n  props: [\"msg\"],\r\n  template: \"<span>{{ msg }}<\/span>\"\r\n})\r\n\r\nnew Vue({\r\n  el:\"#app\"\r\n  })\r\n\r\n<\/script>\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/\u52d5\u7684\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\r\n<body>\r\n\r\n  <div id=\"app\">\r\n  <component v-bind:is=\"currentView\"><\/component>\r\n  <\/div>\r\n\r\n<\/body>\r\n\r\n<script>\r\n\r\n  Vue.component(\"logincomp\",{\r\n    template: '<p>hey<\/p>'\r\n  })\r\n\r\n  new Vue({\r\n    el: \"#app\",\r\n    data: {\r\n      currentView: \"logincomp\"\r\n    }\r\n\r\n  })\r\n\r\n<\/script>\r\n\r\n\/\/--------------------------------------------------------\r\n\r\n\/\/\u52d5\u7684\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\/\/\u8907\u6570\u306e\u547c\u3073\u51fa\u3057\u65b9\r\n\r\n<body>\r\n\r\n<div id=\"app\">\r\n  <p>h or e or c<\/p>\r\n  <input type=\"text\" v-model=\"currentView\"><br>\r\n  <component v-bind:is=\"currentView\"><\/component>\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<script>\r\n\r\nvar tmp = Vue.extend({\r\n  template: \"<p>e !!!<\/p>\"\r\n})\r\n\r\n  new Vue({\r\n    el: \"#app\",\r\n    data: {\r\n      currentView: \"h\"\r\n    },\r\n    components:{ \/\/\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5b9a\u7fa9\u65b9\u6cd5\r\n      h: { template: \"<p>h !!!<\/p>\" },\r\n      e: tmp,\r\n      c: { template: \"#c\"}\r\n    }\r\n\r\n  })\r\n\r\n<\/script>\r\n\r\n<script type=\"text\/x-template\" id=\"c\">\r\n<p>c !!!<\/p>\r\n<\/script>\r\n<\/pre>\n
\u9069\u5f53\u306b\u8272\u3005\u66f8\u3044\u3066\u307f\u305f\u3082\u306e\u3002<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Test<\/title>\r\n  <script src=\"vue.min.js\"><\/script>\r\n\r\n<style>\r\n  .rd{\r\n    background-color: red;\r\n  }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"box\" v-bind:style=\"s\" v-on:click=\"alert\" v-bind:class=\"{ bk: isBk, rd: isRd }\">\r\n<\/div>\r\n\r\n<div id=\"app\">\r\n  <input type=\"button\" value=\"ClickMe!\" v-on:click=\"SayHello\"><br>\r\n  <p>h or e or c \u3092\u5165\u529b\u6700\u521d\u306fe\u306f\u7a7a\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u5f8c\u306f\u5024\u304c\u5165\u308b<\/p>\r\n  <input type=\"text\" v-model=\"currentView\"><br>\r\n  <component v-bind:is=\"currentView\"><\/component>\r\n\r\n  <div id=\"tbl\" v-bind:style=\"styleObject\">\r\n    table\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<script>\r\n\r\n  var tbl = \"<table>\";\r\n\r\n  for(var r=1; r<=10; r++){\r\n    tbl += \"<tr class='r\" + r +\"'>\"\r\n    for(var c=1; c<=5; c++){\r\n      tbl += \"<td class='c\" + c + \"'>\u25cb<\/td>\";\r\n    }\r\n    tbl += \"<\/tr>\"\r\n  }\r\n  tbl += \"<\/table>\";\r\n\r\n  var e = document.getElementById(\"tbl\");\r\n  e.innerHTML = tbl;\r\n\r\n<\/script>\r\n\r\n<script>\r\n\r\nnew Vue({\r\n  el:\"#box\",\r\n  \r\n  methods:{\r\n    alert:function(){\r\n      this.isRd = true; \/\/\u30af\u30e9\u30b9\u5909\u66f4\u3059\u308b\u3002\r\n      alert(\"\");\r\n    }\r\n  },\r\n  data:{\r\n    s:{\r\n      border: \"3px solid black\",\r\n      width: \"30px\",\r\n      height: \"30px\"\r\n    },\r\n    isBk: false,\r\n    isRd: false\r\n  }\r\n})\r\n\r\nnew Vue({\r\n  el: \"#tbl\",\r\n  data:{\r\n    styleObject:{\r\n      fontSize: \"32px\"\r\n    }\r\n  },\r\n  methods:{\r\n    bom: function(){\r\n      alert(\"\")\r\n    }\r\n  }\r\n})\r\n\r\n\r\n  \/\/\u30e1\u30a4\u30f3\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304b\u3089\u547c\u3070\u308c\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5b9a\u7fa9\r\n  var tmp = Vue.extend({\r\n    props:[\"msg\"],\r\n    created: function(){\r\n      alert(\"created\");\r\n      this.msg = \"hello e !!! \";\r\n      \/\/\u3053\u3053\u3067var msg = \"xxx\"\u3068\u3057\u3066\u3082\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u306f\u4f7f\u3048\u306a\u3044\u3002\r\n    },\r\n    template: \"<p>{{ buff }}<\/p>\"\r\n  })\r\n\r\n  new Vue({\r\n    el: \"#app\",\r\n    data: {\r\n      currentView: \"h\"\r\n    },\r\n    props:[\"buff\"], \/\/\u3053\u3053\u306ebuff\u306ftmp\u4ed6\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304b\u3089\u3067\u3082\u547c\u3079\u308b\u3002\r\n    components:{ \/\/\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5b9a\u7fa9\u65b9\u6cd5\r\n      h: { template: \"<p>h !!!<\/p>\" },\r\n      e: tmp,\r\n      c: { template: \"#c\"}\r\n    },\r\n    methods: {\r\n      SayHello: function(){\r\n        buff = \"hello Vue !\";\r\n        alert(buff);\r\n      }\r\n    }\r\n\r\n  })\r\n\r\n<\/script>\r\n\r\n<script type=\"text\/x-template\" id=\"c\">\r\n<p>c !!!<\/p>\r\n<\/script>\r\n\r\n<\/html><\/pre>\n
json\u5c55\u958b\u3001axios\u3067post<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <title>title<\/title>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/axios\/dist\/axios.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"app\">\r\n<input type=\"button\" v-on:click=\"fetchData\" value=\"Get\">\r\n<input type=\"text\" v-bind:value=\"status\">\r\n<input type=\"range\" max=\"1\" min=\"0\" step=\"0.25\" v-model=\"v\">\r\n<span>{{ v }}<\/span>\r\n\r\n<table>\r\n    <tr v-for=\"i in js.data\" v-bind:id=\"i.id\">\r\n        <td>{{ i.name }}<\/td><td>{{ i.age }}<\/td><td>{{ i.addr }}<\/td>\r\n    <\/tr>\r\n<\/table>\r\n\r\n<\/div>\r\n\r\n<script>\r\nlet js = {\r\n\"data\":[\r\n    {\r\n    \"id\": 1,\r\n    \"name\": \"taro\",\r\n    \"age\": 20,\r\n    \"addr\": \"tokyo\",\r\n    },\r\n    {\r\n    \"id\": 2,\r\n    \"name\": \"jiro\",\r\n    \"age\": 30,\r\n    \"addr\": \"kanagawa\",\r\n    }\r\n]};\r\n\r\nnew Vue({\r\n    el: '#app',\r\n    data:{\r\n        status,\r\n        v: 0,\r\n        js,\r\n    },\r\n    methods:{\r\n        fetchData(){\r\n            axios\r\n            .get('https:\/\/api.coindesk.com\/v1\/bpi\/currentprice.json')\r\n            .then(response => {\r\n                console.log(response)\r\n                this.status = response.status\r\n            })\r\n        }\r\n    } \r\n})\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
\uff4a\uff53\u3068\u3044\u3046\u3068\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u8272\u3005\u3042\u308b\u306e\u3067\u3001\u4eca\u56de\u306fVue.js\u3092\u5c11\u3057\u3055\u308f\u3063\u3066\u307f\u305f\u3002 \/\/——————————————————– \/\/Vue\u30a4\u30f3\u30b9\u30bf\u30f3 … <\/p>\n
“Vue.js \u5165\u9580” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[4,139],"class_list":["post-1106","post","type-post","status-publish","format-standard","hentry","category-1","tag-javascript-typescript","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts\/1106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1106"}],"version-history":[{"count":3,"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts\/1106\/revisions"}],"predecessor-version":[{"id":2431,"href":"https:\/\/appbay.org\/index.php?rest_route=\/wp\/v2\/posts\/1106\/revisions\/2431"}],"wp:attachment":[{"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appbay.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}