こんにちは、今回はVueで掲示板を作ることで、Vueについて理解していただければと思います。なお、初期設定についてはすでにできているという前提で進めます。
新しいページを作ろう
では、まずは基本の基本として新しいページを作ることから始めたいと思います。
HelloWorld.vueの内容をそのままコピーする
新規プロジェクトを作ると必ず、HelloWorld.vueができますよね？まず、はじめにそれを開いて内容を新規のファイルにコピーすることから始めます。
HelloWorldの内容をコピーして、
新規で作ったファイルに内容をコピペします。ファイル名はsample1.vueとしておきます。
次にsample1.vueのテキスト内をスクロールして、name と書いてあるところに移動します。HelloWorldと書いていると思いますが、Sample1と書き換えます。これが、このコンポーネントの名前となります。
続いて、 router>index.jsを開きます。
そして、以下のコードを書きましょう
{
path:'/sample1',
name:'Sample1',
component:Sample1
}
全体的にこんな感じになります。
ここまでで、一旦保存して中身を見てみましょう
#/sample1のルートまで行って、以下のように表示されればひとまず成功です。
文字を表示させよう
まずは、新しいページを作成します。
HelloWorld.vueから内容をコピーします。
そして、不要な内容を消します。ここではtemplatよりも上にあるdivの中のタグを全て消しました。
templateのなかにH1要素を入れて。そこにmsgと入力し２重カッコで囲みます。なお、msgというのは任意の変数名で、後ほど定義します。Vueではscript内で定義した変数を二重カッコで囲むことで使用することができます（ちなみにタグ内だと、また書き方が違うんですが、一旦はこう書けば良いと覚えてください）
<h1>{{msg}}</h1>
続いて、script内にdataという箇所があり、そこにmsgというのが定義されていると思いますが、グローバル変数を定義するときはdata内に定義します。ここでは、msgという変数を定義して、初期値として”How are you?”と設定します。
保存して、中身を見てみましょう
H1のタグで囲まれた箇所が”How are you?”という文字列に置き換わっているのがわかると思います。
以下がコードの全容となります。
<template>
<h1>{{msg}}</h1>
</template>
<script>
export default {
name: 'Sample1',
data () {
return {
msg: 'How are you?'
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
ボタンを押すと文字が変わる
続いて、ボタンを押すと文字が変わるページを作成したいと思います。
HelloWorldを使用して、新しくページを作成します。
先ほどと同じように、余分な項目を削除します。templatよりも上にあるdivの中のタグを全て消しました。
次にtemplate内に以下のコードを入れます。
<div>
<h1>{{msg}}</h1>
</div>
なでDivで囲ったかというとtemplate内は一つの要素しか使えないからです。つまりDivタグを親として、そこに子タグがあるのは良いですが、Divタグを親として、そのほかにH1タグを親タグと書くことは禁止されています。
ダメな例
<div>
<h1>{{msg}}</h1>
</div>
<div>
<p>Hello</p>
</div>
これで、H1タグに”How are you?”が表示されると思います。
次にButtonタグをH1タグの下に加えます。そして、:v-on:clickという属性を書きます。そして、実行すべきメソッドを:v-on:click=”実行したいメソッド”と記載します。このコードで言えば、ボタンがクリックされた時にchangeTextと内のメソッドを実行することを意味します。
<template>
<div>
<h1>{{msg}}</h1>
<button v-on:click="changeText">ChangeText</button>
</div>
</template>
次に実行すべきメソッドchangeText内の内容を記載します。メソッドは、script以下に記載します。今回の場合はdataというコードの下に書きます。その際に、必ずカンマを書くことを忘れずに！
このmethodsという関数内にどんどん処理すべきメソッドを記載します。msgが先ほどのグローバル変数で、そこに文字列を代入します。文字列は’クオテーションで囲ってあげます。なお注意して欲しいのがグローバル変数でもメソッド内で使用するときはthis.というのを必ずつけないといけません。つけないと全く反映されないので、グローバル変数にはthis.をつけるのをお忘れなく。
保存して、中身を見てみましょう
ボタンをクリックしてPush buttonに変更されれば成功です。
コード：
<template>
<div>
<h1>{{msg}}</h1>
<buttonv-on:click="changeText">ChangeText</button>
</div>
</template>
<script>
export default {
name:'Sample1',
data () {
return {
msg:'How are you?'
}
},
methods:{
changeText:function(){
this.msg='Push button'
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
テキストボックスを追加する
テキストボックスを追加しましょう。ここからはSample1をベースに新規作成しましょう。まずは、新規のページを作成します。
sample1.vueのテキストをコピペで貼り付けます。
するとこんな感じになります。
次にname属性をSample2に変更して
sample2.vueという名前で保存します。
続いて、index.jsというファイルを開いて、下記のようにコンポーネント登録を行います。ここまでで、一旦準備は完了ですね。
続いて、inputと記載すればテキストボックスが出来上がります！なお、value属性には初期値をtypeにはtextと書きます。
<input type="text" value="Text here">
こんな感じになれば、成功です。
複数行のテキストボックスを追加する
複数行のテキストボックスを追加してみましょう。先ほどのテキストボックスの下に複数行のテキストボックスを追加します。まず、先ほどのinputタグをPタグで囲いましょう。
次に以下の内容をInputタグのすぐ下に入力します。
<textarea name="question" rows="4" cols="40"></textarea>
なお、初期値はテキストエリアタグ内に記載すると、初期値となります。実際に表示させてみましょう。このように複数行のテキストエリアが表示されれば、成功です。
テキストボックスの内容を別の場所に表示させる。
先ほどのコードをもとに、inputテキストの内容を別の場所に反映させてみましょう。
ボタンを押すとテキストボックスの内容が反映されるものを作る
ボタンを押すと、テキストボックスの内容が反映されるものを作りましょう
