[{"data":1,"prerenderedAt":1306},["ShallowReactive",2],{"content-\u002Fcontents\u002Fvue_begin2":3,"surroundPost-\u002Fcontents\u002Fvue_begin2":1297},{"id":4,"title":5,"body":6,"createdAt":1283,"description":1284,"draft":1285,"extension":1286,"meta":1287,"navigation":330,"path":1288,"seo":1289,"stem":1290,"tags":1291,"thumbnail":1295,"updatedAt":1283,"__hash__":1296},"contents\u002Fcontents\u002Fvue_begin2.md","【VueとNuxt】v-on, v-if, v-bind, v-modelの使い方紹介",{"type":7,"value":8,"toc":1277},"minimark",[9,13,16,23,26,29,32,44,48,56,70,73,76,99,102,106,109,116,119,122,128,534,563,568,575,578,590,599,602,612,617,629,632,636,647,654,913,933,939,943,946,949,957,960,963,1225,1228,1231,1241,1250,1253,1256,1259,1262,1265,1268,1271,1274],[10,11,12],"p",{},"Vue と Nuxt の使い方 2 つめの記事です！",[10,14,15],{},"続きものの記事になるので、前回の記事をまだ見てない方は先にそちらをみることをおすすめします。",[10,17,18],{},[19,20,22],"a",{"href":21},"vue_begin","【Vue と Nuxt】環境構築と components, layouts の使い方紹介",[10,24,25],{},"前回の記事では、単なる HTML と CSS がほとんどで JavaScript（JS）っぽいことをしていません。今回からは JS のフレームワークらしく動的な処理を行っていきます。",[10,27,28],{},"ということで、本記事では Nuxt と Vue でよく使うディレクティブ、v-on や v-model などについて説明します。",[10,30,31],{},"今回もこちらの書籍も参考にさせていただきました。",[33,34,35],"ul",{},[36,37,38],"li",{},[19,39,43],{"href":40,"rel":41},"https:\u002F\u002Famzn.to\u002F36A3qzV",[42],"nofollow","Vue.js & Nuxt.js 超入門",[45,46,47],"h2",{"id":47},"ディレクティブとは",[10,49,50,51,55],{},"ディレクティブとは簡単に言うと、",[52,53,54],"code",{},"v-","からはじまる Vue 特有の属性です。",[57,58,59,62],"blockquote",{},[10,60,61],{},"ディレクティブは v- から始まる特別な属性です。ディレクティブ属性値は、単一の JavaScript 式を期待します(ただし、v-for は例外で、これについては後から説明します)。ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を DOM に適用することです。",[10,63,64,65],{},"公式より引用：",[19,66,69],{"href":67,"rel":68},"https:\u002F\u002Fjp.vuejs.org\u002Fv2\u002Fguide\u002Fsyntax.html#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96",[42],"ディレクティブ",[10,71,72],{},"公式をみると、けっこうたくさんのディレクティブがあります。",[10,74,75],{},"いくつか代表的なものを列挙します。以下はディレクティブのなかでもリアクティブディレクティブというものに分類されます。",[33,77,78,81,84,87,90,93,96],{},[36,79,80],{},"v-on",[36,82,83],{},"v-bind",[36,85,86],{},"v-model",[36,88,89],{},"v-if",[36,91,92],{},"v-text",[36,94,95],{},"v-html",[36,97,98],{},"v-style",[10,100,101],{},"本記事では上４つを紹介します。",[45,103,105],{"id":104},"v-on-v-if-の使い方","v-on, v-if の使い方",[10,107,108],{},"まず v-on と v-if を同時に試していきます。",[10,110,111,112,115],{},"v-on はイベントハンドリングのために使われます。",[52,113,114],{},"onclick","のようなイメージです。今回はボタンクリックに反応し後述する関数を呼び出します。",[10,117,118],{},"v-if はそのままで条件付けを行って場合わけができます。今回はフラグによって表示するか否かを判定するために使います。",[10,120,121],{},"試してみましょう。",[10,123,124,127],{},[52,125,126],{},"index.vue","を以下のように書き換えます。",[129,130,135],"pre",{"className":131,"code":132,"language":133,"meta":134,"style":134},"language-html shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv class=\"container\">\n    \u003Ch1 class=\"title\">テストページ\u003C\u002Fh1>\n    \u003Ch2 class=\"subtitle\">Nuxtお試し中\u003C\u002Fh2>\n    \u003Cbutton @click=\"displayMessage\">Click!\u003C\u002Fbutton>\n    \u003Cbr \u002F>\n    \u003Ch2 v-if=\"show_flg\" class=\"message\">{{ message }}\u003C\u002Fh2>\n    \u003Cnuxt-link to=\"\u002Fnext\">次ページへ\u003C\u002Fnuxt-link>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return { message: 'Hello', show_flg: false }\n  },\n  methods: {\n    displayMessage() {\n      this.show_flg = true\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.message {\n  font-size: 50px;\n  margin: 20px;\n}\n.container {\n  margin: 20px;\n}\n","html","",[52,136,137,153,175,198,219,242,253,282,305,315,325,332,342,355,364,386,392,398,406,420,426,432,438,447,452,462,470,488,503,508,516,529],{"__ignoreMap":134},[138,139,142,146,150],"span",{"class":140,"line":141},"line",1,[138,143,145],{"class":144},"s95oV","\u003C",[138,147,149],{"class":148},"s4JwU","template",[138,151,152],{"class":144},">\n",[138,154,156,159,162,166,169,173],{"class":140,"line":155},2,[138,157,158],{"class":144},"  \u003C",[138,160,161],{"class":148},"div",[138,163,165],{"class":164},"svObZ"," class",[138,167,168],{"class":144},"=",[138,170,172],{"class":171},"sU2Wk","\"container\"",[138,174,152],{"class":144},[138,176,178,181,184,186,188,191,194,196],{"class":140,"line":177},3,[138,179,180],{"class":144},"    \u003C",[138,182,183],{"class":148},"h1",[138,185,165],{"class":164},[138,187,168],{"class":144},[138,189,190],{"class":171},"\"title\"",[138,192,193],{"class":144},">テストページ\u003C\u002F",[138,195,183],{"class":148},[138,197,152],{"class":144},[138,199,201,203,205,207,209,212,215,217],{"class":140,"line":200},4,[138,202,180],{"class":144},[138,204,45],{"class":148},[138,206,165],{"class":164},[138,208,168],{"class":144},[138,210,211],{"class":171},"\"subtitle\"",[138,213,214],{"class":144},">Nuxtお試し中\u003C\u002F",[138,216,45],{"class":148},[138,218,152],{"class":144},[138,220,222,224,227,230,232,235,238,240],{"class":140,"line":221},5,[138,223,180],{"class":144},[138,225,226],{"class":148},"button",[138,228,229],{"class":164}," @click",[138,231,168],{"class":144},[138,233,234],{"class":171},"\"displayMessage\"",[138,236,237],{"class":144},">Click!\u003C\u002F",[138,239,226],{"class":148},[138,241,152],{"class":144},[138,243,245,247,250],{"class":140,"line":244},6,[138,246,180],{"class":144},[138,248,249],{"class":148},"br",[138,251,252],{"class":144}," \u002F>\n",[138,254,256,258,260,263,265,268,270,272,275,278,280],{"class":140,"line":255},7,[138,257,180],{"class":144},[138,259,45],{"class":148},[138,261,262],{"class":164}," v-if",[138,264,168],{"class":144},[138,266,267],{"class":171},"\"show_flg\"",[138,269,165],{"class":164},[138,271,168],{"class":144},[138,273,274],{"class":171},"\"message\"",[138,276,277],{"class":144},">{{ message }}\u003C\u002F",[138,279,45],{"class":148},[138,281,152],{"class":144},[138,283,285,287,290,293,295,298,301,303],{"class":140,"line":284},8,[138,286,180],{"class":144},[138,288,289],{"class":148},"nuxt-link",[138,291,292],{"class":164}," to",[138,294,168],{"class":144},[138,296,297],{"class":171},"\"\u002Fnext\"",[138,299,300],{"class":144},">次ページへ\u003C\u002F",[138,302,289],{"class":148},[138,304,152],{"class":144},[138,306,308,311,313],{"class":140,"line":307},9,[138,309,310],{"class":144},"  \u003C\u002F",[138,312,161],{"class":148},[138,314,152],{"class":144},[138,316,318,321,323],{"class":140,"line":317},10,[138,319,320],{"class":144},"\u003C\u002F",[138,322,149],{"class":148},[138,324,152],{"class":144},[138,326,328],{"class":140,"line":327},11,[138,329,331],{"emptyLinePlaceholder":330},true,"\n",[138,333,335,337,340],{"class":140,"line":334},12,[138,336,145],{"class":144},[138,338,339],{"class":148},"script",[138,341,152],{"class":144},[138,343,345,349,352],{"class":140,"line":344},13,[138,346,348],{"class":347},"snl16","export",[138,350,351],{"class":347}," default",[138,353,354],{"class":144}," {\n",[138,356,358,361],{"class":140,"line":357},14,[138,359,360],{"class":164},"  data",[138,362,363],{"class":144},"() {\n",[138,365,367,370,373,376,379,383],{"class":140,"line":366},15,[138,368,369],{"class":347},"    return",[138,371,372],{"class":144}," { message: ",[138,374,375],{"class":171},"'Hello'",[138,377,378],{"class":144},", show_flg: ",[138,380,382],{"class":381},"sDLfK","false",[138,384,385],{"class":144}," }\n",[138,387,389],{"class":140,"line":388},16,[138,390,391],{"class":144},"  },\n",[138,393,395],{"class":140,"line":394},17,[138,396,397],{"class":144},"  methods: {\n",[138,399,401,404],{"class":140,"line":400},18,[138,402,403],{"class":164},"    displayMessage",[138,405,363],{"class":144},[138,407,409,412,415,417],{"class":140,"line":408},19,[138,410,411],{"class":381},"      this",[138,413,414],{"class":144},".show_flg ",[138,416,168],{"class":347},[138,418,419],{"class":381}," true\n",[138,421,423],{"class":140,"line":422},20,[138,424,425],{"class":144},"    }\n",[138,427,429],{"class":140,"line":428},21,[138,430,431],{"class":144},"  }\n",[138,433,435],{"class":140,"line":434},22,[138,436,437],{"class":144},"}\n",[138,439,441,443,445],{"class":140,"line":440},23,[138,442,320],{"class":144},[138,444,339],{"class":148},[138,446,152],{"class":144},[138,448,450],{"class":140,"line":449},24,[138,451,331],{"emptyLinePlaceholder":330},[138,453,455,457,460],{"class":140,"line":454},25,[138,456,145],{"class":144},[138,458,459],{"class":148},"style",[138,461,152],{"class":144},[138,463,465,468],{"class":140,"line":464},26,[138,466,467],{"class":164},".message",[138,469,354],{"class":144},[138,471,473,476,479,482,485],{"class":140,"line":472},27,[138,474,475],{"class":381},"  font-size",[138,477,478],{"class":144},": ",[138,480,481],{"class":381},"50",[138,483,484],{"class":347},"px",[138,486,487],{"class":144},";\n",[138,489,491,494,496,499,501],{"class":140,"line":490},28,[138,492,493],{"class":381},"  margin",[138,495,478],{"class":144},[138,497,498],{"class":381},"20",[138,500,484],{"class":347},[138,502,487],{"class":144},[138,504,506],{"class":140,"line":505},29,[138,507,437],{"class":144},[138,509,511,514],{"class":140,"line":510},30,[138,512,513],{"class":164},".container",[138,515,354],{"class":144},[138,517,519,521,523,525,527],{"class":140,"line":518},31,[138,520,493],{"class":381},[138,522,478],{"class":144},[138,524,498],{"class":381},[138,526,484],{"class":347},[138,528,487],{"class":144},[138,530,532],{"class":140,"line":531},32,[138,533,437],{"class":144},[10,535,536,539,540,543,544,547,548,551,552,543,555,558,559,562],{},[52,537,538],{},"\u003Ctemplate>","タグ内に",[52,541,542],{},"\u003Cbutton>","と",[52,545,546],{},"\u003Ch2>","をそれぞれ追加しました。",[52,549,550],{},"\u003Cscript>","内では",[52,553,554],{},"data()",[52,556,557],{},"methods","を追記しました。\nあとは、見やすさのために",[52,560,561],{},"\u003Cstyle>","内も少しいじってます。",[10,564,565,567],{},[52,566,550],{},"の変更箇所についてざっくり説明します。",[10,569,570,571,574],{},"まず",[52,572,573],{},"data","というのはオブジェクトでここに追加されたプロパティ（リアクティブデータ）はリアクティブシステムに追加されます。",[10,576,577],{},"リアクティブシステムというのは、変更を監視\u002F検知して、必要に応じて再レンダリングするためのものです。",[10,579,580,582,583,543,586,589],{},[52,581,573],{},"には",[52,584,585],{},"message=\"Hello\"",[52,587,588],{},"show_flg","を追加してます。",[10,591,592,594,595,598],{},[52,593,557],{},"はその名のとおり関数を定義する場所です。今回はボタンクリック時にフラグを変更する関数として",[52,596,597],{},"displayMessage","を定義しました。",[10,600,601],{},"どうなるか見てみましょう。",[10,603,604,605,607,608,611],{},"ボタンクリック前がこんな感じです。",[52,606,588],{},"が false なので ",[52,609,610],{},"message"," は表示されていません。",[613,614],"img",{"alt":615,"img-src":616},"before_click","\u002Fimg\u002Fvue\u002Fbefore_click.png",[10,618,619,620,622,623,625,626,628],{},"ボタンをクリックすると以下のように",[52,621,597],{},"が呼び出され、",[52,624,588],{},"が true に書き換わり、",[52,627,610],{}," で定義した文字列が表示されます。",[613,630],{"alt":615,"img-src":631},"\u002Fimg\u002Fvue\u002Fafter_click.png",[45,633,635],{"id":634},"v-bind-v-model-の使い方","v-bind, v-model の使い方",[10,637,638,639,642,643,646],{},"v-bind を使うことで HTML のタグ内の属性を書き換えることができます。属性というのは HTML のタグの中にかく",[52,640,641],{},"class","や",[52,644,645],{},"value","などです。",[10,648,649,650,653],{},"さっそくやってみましょう。せっかくなので前回作成した",[52,651,652],{},"next.vue","のほうでやってみます。",[129,655,657],{"className":131,"code":656,"language":133,"meta":134,"style":134},"\u003Ctemplate>\n  \u003Cdiv class=\"container\">\n    \u003Ch1 class=\"title\">Nextページ\u003C\u002Fh1>\n    \u003Ch2 class=\"subtitle\">2ページ目\u003C\u002Fh2>\n    \u003Cp>v-bindパターン：[{{ message1 }}]\u003C\u002Fp>\n    \u003Cinput v-bind:value=\"message1\" type=\"text\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      message1: 'v-bindは属性を変えられる',\n    }\n  },\n  methods: {\n    changeInput() {\n      this.message = 'v-modelだよ'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\ninput {\n  margin: 30px 0px;\n}\n\u002F* \u003C!-- 省略 --> *\u002F\n",[52,658,659,667,681,700,719,732,757,765,773,777,785,793,799,805,816,820,824,828,835,847,851,855,859,867,871,879,885,903,907],{"__ignoreMap":134},[138,660,661,663,665],{"class":140,"line":141},[138,662,145],{"class":144},[138,664,149],{"class":148},[138,666,152],{"class":144},[138,668,669,671,673,675,677,679],{"class":140,"line":155},[138,670,158],{"class":144},[138,672,161],{"class":148},[138,674,165],{"class":164},[138,676,168],{"class":144},[138,678,172],{"class":171},[138,680,152],{"class":144},[138,682,683,685,687,689,691,693,696,698],{"class":140,"line":177},[138,684,180],{"class":144},[138,686,183],{"class":148},[138,688,165],{"class":164},[138,690,168],{"class":144},[138,692,190],{"class":171},[138,694,695],{"class":144},">Nextページ\u003C\u002F",[138,697,183],{"class":148},[138,699,152],{"class":144},[138,701,702,704,706,708,710,712,715,717],{"class":140,"line":200},[138,703,180],{"class":144},[138,705,45],{"class":148},[138,707,165],{"class":164},[138,709,168],{"class":144},[138,711,211],{"class":171},[138,713,714],{"class":144},">2ページ目\u003C\u002F",[138,716,45],{"class":148},[138,718,152],{"class":144},[138,720,721,723,725,728,730],{"class":140,"line":221},[138,722,180],{"class":144},[138,724,10],{"class":148},[138,726,727],{"class":144},">v-bindパターン：[{{ message1 }}]\u003C\u002F",[138,729,10],{"class":148},[138,731,152],{"class":144},[138,733,734,736,739,742,744,747,750,752,755],{"class":140,"line":244},[138,735,180],{"class":144},[138,737,738],{"class":148},"input",[138,740,741],{"class":164}," v-bind:value",[138,743,168],{"class":144},[138,745,746],{"class":171},"\"message1\"",[138,748,749],{"class":164}," type",[138,751,168],{"class":144},[138,753,754],{"class":171},"\"text\"",[138,756,252],{"class":144},[138,758,759,761,763],{"class":140,"line":255},[138,760,310],{"class":144},[138,762,161],{"class":148},[138,764,152],{"class":144},[138,766,767,769,771],{"class":140,"line":284},[138,768,320],{"class":144},[138,770,149],{"class":148},[138,772,152],{"class":144},[138,774,775],{"class":140,"line":307},[138,776,331],{"emptyLinePlaceholder":330},[138,778,779,781,783],{"class":140,"line":317},[138,780,145],{"class":144},[138,782,339],{"class":148},[138,784,152],{"class":144},[138,786,787,789,791],{"class":140,"line":327},[138,788,348],{"class":347},[138,790,351],{"class":347},[138,792,354],{"class":144},[138,794,795,797],{"class":140,"line":334},[138,796,360],{"class":164},[138,798,363],{"class":144},[138,800,801,803],{"class":140,"line":344},[138,802,369],{"class":347},[138,804,354],{"class":144},[138,806,807,810,813],{"class":140,"line":357},[138,808,809],{"class":144},"      message1: ",[138,811,812],{"class":171},"'v-bindは属性を変えられる'",[138,814,815],{"class":144},",\n",[138,817,818],{"class":140,"line":366},[138,819,425],{"class":144},[138,821,822],{"class":140,"line":388},[138,823,391],{"class":144},[138,825,826],{"class":140,"line":394},[138,827,397],{"class":144},[138,829,830,833],{"class":140,"line":400},[138,831,832],{"class":164},"    changeInput",[138,834,363],{"class":144},[138,836,837,839,842,844],{"class":140,"line":408},[138,838,411],{"class":381},[138,840,841],{"class":144},".message ",[138,843,168],{"class":347},[138,845,846],{"class":171}," 'v-modelだよ'\n",[138,848,849],{"class":140,"line":422},[138,850,425],{"class":144},[138,852,853],{"class":140,"line":428},[138,854,431],{"class":144},[138,856,857],{"class":140,"line":434},[138,858,437],{"class":144},[138,860,861,863,865],{"class":140,"line":440},[138,862,320],{"class":144},[138,864,339],{"class":148},[138,866,152],{"class":144},[138,868,869],{"class":140,"line":449},[138,870,331],{"emptyLinePlaceholder":330},[138,872,873,875,877],{"class":140,"line":454},[138,874,145],{"class":144},[138,876,459],{"class":148},[138,878,152],{"class":144},[138,880,881,883],{"class":140,"line":464},[138,882,738],{"class":148},[138,884,354],{"class":144},[138,886,887,889,891,894,896,899,901],{"class":140,"line":472},[138,888,493],{"class":381},[138,890,478],{"class":144},[138,892,893],{"class":381},"30",[138,895,484],{"class":347},[138,897,898],{"class":381}," 0",[138,900,484],{"class":347},[138,902,487],{"class":144},[138,904,905],{"class":140,"line":490},[138,906,437],{"class":144},[138,908,909],{"class":140,"line":505},[138,910,912],{"class":911},"sAwPA","\u002F* \u003C!-- 省略 --> *\u002F\n",[10,914,915,918,919,922,923,925,926,928,929,932],{},[52,916,917],{},"\u003Cinput>","タグを新たに追加し、",[52,920,921],{},"v-bind:value","として",[52,924,645],{},"に",[52,927,573],{},"で定義した",[52,930,931],{},"message1","を指定している。",[10,934,935,936,938],{},"これで",[52,937,931],{},"で定義されている文字列が入っている入力ボックスが以下のように表示される。",[613,940],{"alt":941,"img-src":942},"vue","\u002Fimg\u002Fvue\u002Fvue6.png",[10,944,945],{},"次は v-model です。v-model は v-bind と v-on の組み合わせと考えることができます。",[10,947,948],{},"どういうことかというと、v-bind では data()で定義された値を参照しているだけですが、v-on と組み合わせることで v-bind で参照された値を書き換えます。",[10,950,951,952],{},"参照：",[19,953,956],{"href":954,"rel":955},"https:\u002F\u002Fjp.vuejs.org\u002Fv2\u002Fguide\u002Fforms.html",[42],"フォーム入力バインディング",[10,958,959],{},"ちょっと言葉でうまく説明できないので、実際にみたほうが早いかもしれないです。",[10,961,962],{},"コードはこんな感じです。",[129,964,966],{"className":131,"code":965,"language":133,"meta":134,"style":134},"\u003Ctemplate>\n  \u003Cdiv class=\"container\">\n    \u003Ch1 class=\"title\">Nextページ\u003C\u002Fh1>\n    \u003Ch2 class=\"subtitle\">2ページ目\u003C\u002Fh2>\n    \u003Cp>v-bindパターン：[{{ message1 }}]\u003C\u002Fp>\n    \u003Cinput v-bind:value=\"message1\" type=\"text\" \u002F>\n    \u003Cbr \u002F>\n    \u003Cp>v-modelパターン：[{{ message2 }}]\u003C\u002Fp>\n    \u003Cinput v-model=\"message2\" type=\"text\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    data() {\n      return {\n        message1: 'v-bindは属性を変えられる',\n        message2: 'v-modelは双方向バインド',\n      }\n    },\n    methods: {\n      changeInput() {\n        this.message = 'v-modelだよ'\n      },\n    },\n  }\n\u003C\u002Fscript>\n",[52,967,968,976,990,1008,1026,1038,1058,1066,1079,1101,1109,1117,1121,1129,1138,1145,1152,1161,1171,1176,1181,1186,1193,1204,1209,1213,1217],{"__ignoreMap":134},[138,969,970,972,974],{"class":140,"line":141},[138,971,145],{"class":144},[138,973,149],{"class":148},[138,975,152],{"class":144},[138,977,978,980,982,984,986,988],{"class":140,"line":155},[138,979,158],{"class":144},[138,981,161],{"class":148},[138,983,165],{"class":164},[138,985,168],{"class":144},[138,987,172],{"class":171},[138,989,152],{"class":144},[138,991,992,994,996,998,1000,1002,1004,1006],{"class":140,"line":177},[138,993,180],{"class":144},[138,995,183],{"class":148},[138,997,165],{"class":164},[138,999,168],{"class":144},[138,1001,190],{"class":171},[138,1003,695],{"class":144},[138,1005,183],{"class":148},[138,1007,152],{"class":144},[138,1009,1010,1012,1014,1016,1018,1020,1022,1024],{"class":140,"line":200},[138,1011,180],{"class":144},[138,1013,45],{"class":148},[138,1015,165],{"class":164},[138,1017,168],{"class":144},[138,1019,211],{"class":171},[138,1021,714],{"class":144},[138,1023,45],{"class":148},[138,1025,152],{"class":144},[138,1027,1028,1030,1032,1034,1036],{"class":140,"line":221},[138,1029,180],{"class":144},[138,1031,10],{"class":148},[138,1033,727],{"class":144},[138,1035,10],{"class":148},[138,1037,152],{"class":144},[138,1039,1040,1042,1044,1046,1048,1050,1052,1054,1056],{"class":140,"line":244},[138,1041,180],{"class":144},[138,1043,738],{"class":148},[138,1045,741],{"class":164},[138,1047,168],{"class":144},[138,1049,746],{"class":171},[138,1051,749],{"class":164},[138,1053,168],{"class":144},[138,1055,754],{"class":171},[138,1057,252],{"class":144},[138,1059,1060,1062,1064],{"class":140,"line":255},[138,1061,180],{"class":144},[138,1063,249],{"class":148},[138,1065,252],{"class":144},[138,1067,1068,1070,1072,1075,1077],{"class":140,"line":284},[138,1069,180],{"class":144},[138,1071,10],{"class":148},[138,1073,1074],{"class":144},">v-modelパターン：[{{ message2 }}]\u003C\u002F",[138,1076,10],{"class":148},[138,1078,152],{"class":144},[138,1080,1081,1083,1085,1088,1090,1093,1095,1097,1099],{"class":140,"line":307},[138,1082,180],{"class":144},[138,1084,738],{"class":148},[138,1086,1087],{"class":164}," v-model",[138,1089,168],{"class":144},[138,1091,1092],{"class":171},"\"message2\"",[138,1094,749],{"class":164},[138,1096,168],{"class":144},[138,1098,754],{"class":171},[138,1100,252],{"class":144},[138,1102,1103,1105,1107],{"class":140,"line":317},[138,1104,310],{"class":144},[138,1106,161],{"class":148},[138,1108,152],{"class":144},[138,1110,1111,1113,1115],{"class":140,"line":327},[138,1112,320],{"class":144},[138,1114,149],{"class":148},[138,1116,152],{"class":144},[138,1118,1119],{"class":140,"line":334},[138,1120,331],{"emptyLinePlaceholder":330},[138,1122,1123,1125,1127],{"class":140,"line":344},[138,1124,145],{"class":144},[138,1126,339],{"class":148},[138,1128,152],{"class":144},[138,1130,1131,1134,1136],{"class":140,"line":357},[138,1132,1133],{"class":347},"  export",[138,1135,351],{"class":347},[138,1137,354],{"class":144},[138,1139,1140,1143],{"class":140,"line":366},[138,1141,1142],{"class":164},"    data",[138,1144,363],{"class":144},[138,1146,1147,1150],{"class":140,"line":388},[138,1148,1149],{"class":347},"      return",[138,1151,354],{"class":144},[138,1153,1154,1157,1159],{"class":140,"line":394},[138,1155,1156],{"class":144},"        message1: ",[138,1158,812],{"class":171},[138,1160,815],{"class":144},[138,1162,1163,1166,1169],{"class":140,"line":400},[138,1164,1165],{"class":144},"        message2: ",[138,1167,1168],{"class":171},"'v-modelは双方向バインド'",[138,1170,815],{"class":144},[138,1172,1173],{"class":140,"line":408},[138,1174,1175],{"class":144},"      }\n",[138,1177,1178],{"class":140,"line":422},[138,1179,1180],{"class":144},"    },\n",[138,1182,1183],{"class":140,"line":428},[138,1184,1185],{"class":144},"    methods: {\n",[138,1187,1188,1191],{"class":140,"line":434},[138,1189,1190],{"class":164},"      changeInput",[138,1192,363],{"class":144},[138,1194,1195,1198,1200,1202],{"class":140,"line":440},[138,1196,1197],{"class":381},"        this",[138,1199,841],{"class":144},[138,1201,168],{"class":347},[138,1203,846],{"class":171},[138,1205,1206],{"class":140,"line":449},[138,1207,1208],{"class":144},"      },\n",[138,1210,1211],{"class":140,"line":454},[138,1212,1180],{"class":144},[138,1214,1215],{"class":140,"line":464},[138,1216,431],{"class":144},[138,1218,1219,1221,1223],{"class":140,"line":472},[138,1220,320],{"class":144},[138,1222,339],{"class":148},[138,1224,152],{"class":144},[10,1226,1227],{},"ページはこのようになります。",[613,1229],{"alt":941,"img-src":1230},"\u002Fimg\u002Fvue\u002Fvue7.png",[10,1232,1233,1234,1237,1238,1240],{},"v-bind の場合は入力ボックスの内容をブラウザから書き換えても、",[52,1235,1236],{},"\u003Cp>","タグで表示している",[52,1239,931],{},"の内容は変化しません。",[10,1242,1243,1244,1237,1246,1249],{},"一方で、v-model のほうの入力ボックスの内容を書き換えると、リアルタイムで",[52,1245,1236],{},[52,1247,1248],{},"message2","の内容も変化しています。",[10,1251,1252],{},"書き換えを試した結果はこんな感じです。",[613,1254],{"alt":941,"img-src":1255},"\u002Fimg\u002Fvue\u002Fvue8.png",[10,1257,1258],{},"なので、v-bind と v-model の違いは入力内容を動的に JS で定義された変数に反映するかどうかです。",[45,1260,1261],{"id":1261},"まとめ",[10,1263,1264],{},"今回は Vue でよく使うディレクティブをいくつか紹介しました。",[10,1266,1267],{},"ディレクティブを使うと Vue らしさがでますね。",[10,1269,1270],{},"簡単に動的処理が実行できるんで楽しいです。",[10,1272,1273],{},"ぜひ試してみてください〜",[459,1275,1276],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":134,"searchDepth":155,"depth":155,"links":1278},[1279,1280,1281,1282],{"id":47,"depth":155,"text":47},{"id":104,"depth":155,"text":105},{"id":634,"depth":155,"text":635},{"id":1261,"depth":155,"text":1261},"2020-01-18","この記事ではVueでよくでてくるv-onなどのディレクティブの使い方について書きました。実際のコードと実行後のブラウザ画面ものせているので参考にしてください",false,"md",{},"\u002Fcontents\u002Fvue_begin2",{"title":5,"description":1284},"contents\u002Fvue_begin2",[1292,1293,1294],"Vue","JavaScript","Nuxt","\u002Fimg\u002Ftwitter-card.png","5oEan4YUVgOycDitats9U7WGOHmYKXkzlYghs_2f7Wk",[1298,1302],{"title":1299,"path":1300,"stem":1301,"children":-1},"【VueとNuxt】環境構築とcomponents, layoutsの使い方紹介","\u002Fcontents\u002Fvue_begin","contents\u002Fvue_begin",{"title":1303,"path":1304,"stem":1305,"children":-1},"Weights&Biasesで機械学習の実験管理を行う方法","\u002Fcontents\u002Fweightbiases","contents\u002Fweightbiases",1784936719060]