####三度の飯よりJavaScript（大嘘）。
どうもなっかのうです。
今回はJavascriptについて話します。
※ネタ要素マシマシなので、胃がもたれやすい方は気をつけてください。
##読んで欲しい人
- HTML/CSS/JSをちょっと理解してる人
- おふざけ嫌いじゃないよって人
#「Vue.js」って誰？親戚にいたような...
Vue.jsは人ではありません。
JavaScriptのライブラリ、フレームワークです。
jQueryとかネイティブのJavaScriptでは結構手間のかかることも割と簡単にしてくれます。
Vue.jsは主にフロントエンドの開発に使うもので、
「DOM」と呼ばれるプログラムからHTMLを操るやつを自動的に行ってくれるそうです。
なんかすごいね。（わかってない）
##どうやったら使えるのかね？
HTMLのheadタグのところに、
<head>
<!-- 省略 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
と書きます。
これで下ごしらえは完了です。
#本題です
今回は、<input type="text">の中身がHTMLにすぐさま更新されるものを作っていきます。
それではソースコードです。
<div id="app">
<h2>最優秀賞
<p>{{ message }}</p>
</h2>
<p>（{{ name }}）</p>
<input v-model="message">
<input v-model="name">
</div>
var app = new Vue({
el: '#app',
data: {
message: '赤信号は止まらないと ダメよ〜 ダメダメ',
name: 'ゆでたまご小学校 6年 エレキテル太郎くん'
}
})
これだけであの動きができるようになります！すごいでしょ！
（内容がツッコミどころ満載ですが、許してくださいな）
ちなみに、この動作のキモとなるのは<input v-model="name">です。
「v-model」がこのリアルタイムで書き換える動作をやってくれます。
そして、{{ message }}というのがVue.jsによって書き換えられる部分です。
その書き換えられるデータは、script.jsのdata:{}に書いてあります。
##Vueの最初の３ステップ
-
{{ message }}で場所を作る！ -
el: 'id,class名'で選択！ -
data:{ message:"書き換えたい文字"}で置き換える！
これでオーケーです！
みなさんも楽しいVue.jsライフを楽しみましょう！