Vueで質掲示板を作る

こんにちは、今回はVueで掲示板を作ることで、Vueについて理解していただければと思います。なお、初期設定についてはすでにできているという前提で進めます。

新しいページを作ろう

では、まずは基本の基本として新しいページを作ることから始めたいと思います。

HelloWorld.vueの内容をそのままコピーする

新規プロジェクトを作ると必ず、HelloWorld.vueができますよね?まず、はじめにそれを開いて内容を新規のファイルにコピーすることから始めます。

スクリーンショット 2020-02-09 9.44.06.png

HelloWorldの内容をコピーして、

スクリーンショット 2020-02-09 9.44.41.png

新規で作ったファイルに内容をコピペします。ファイル名はsample1.vueとしておきます。

スクリーンショット 2020-02-09 16.57.24.png

次にsample1.vueのテキスト内をスクロールして、name と書いてあるところに移動します。HelloWorldと書いていると思いますが、Sample1と書き換えます。これが、このコンポーネントの名前となります。sample1_mov.png

続いて、  router>index.jsを開きます。

スクリーンショット 2020-02-09 16.58.16.png

そして、以下のコードを書きましょう

{

 path:'/sample1',

 name:'Sample1',

 component:Sample1

}

スクリーンショット_2020-02-09_17_02_48.png

全体的にこんな感じになります。

ここまでで、一旦保存して中身を見てみましょう

スクリーンショット 2020-02-09 17.19.25.png

#/sample1のルートまで行って、以下のように表示されればひとまず成功です。

スクリーンショット 2020-02-09 21.21.29.png

文字を表示させよう

まずは、新しいページを作成します。

HelloWorld.vueから内容をコピーします。

スクリーンショット 2020-02-11 11.29.38.png

そして、不要な内容を消します。ここではtemplatよりも上にあるdivの中のタグを全て消しました。

スクリーンショット 2020-02-11 11.30.20.png

templateのなかにH1要素を入れて。そこにmsgと入力し2重カッコで囲みます。なお、msgというのは任意の変数名で、後ほど定義します。Vueではscript内で定義した変数を二重カッコで囲むことで使用することができます(ちなみにタグ内だと、また書き方が違うんですが、一旦はこう書けば良いと覚えてください)

<h1>{{msg}}</h1>

スクリーンショット 2020-02-11 11.31.50.png

続いて、script内にdataという箇所があり、そこにmsgというのが定義されていると思いますが、グローバル変数を定義するときはdata内に定義します。ここでは、msgという変数を定義して、初期値として”How are you?”と設定します。

スクリーンショット 2020-02-11 12.08.04.png

保存して、中身を見てみましょう

スクリーンショット 2020-02-09 17.19.25.png

H1のタグで囲まれた箇所が”How are you?”という文字列に置き換わっているのがわかると思います。

スクリーンショット 2020-02-11 13.08.46.png

以下がコードの全容となります。

<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の中のタグを全て消しました。

スクリーンショット 2020-02-11 11.30.20.png

次に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?”が表示されると思います。

スクリーンショット 2020-02-11 13.31.37.png

スクリーンショット 2020-02-11 13.08.46.png

次にButtonタグをH1タグの下に加えます。そして、:v-on:clickという属性を書きます。そして、実行すべきメソッドを:v-on:click=”実行したいメソッド”と記載します。このコードで言えば、ボタンがクリックされた時にchangeTextと内のメソッドを実行することを意味します。

<template>
 <div>
  <h1>{{msg}}</h1>
  <button v-on:click="changeText">ChangeText</button>
 </div>
</template>

スクリーンショット 2020-02-11 13.57.19.png

次に実行すべきメソッドchangeText内の内容を記載します。メソッドは、script以下に記載します。今回の場合はdataというコードの下に書きます。その際に、必ずカンマを書くことを忘れずに!

スクリーンショット 2020-02-11 14.11.52.png

このmethodsという関数内にどんどん処理すべきメソッドを記載します。msgが先ほどのグローバル変数で、そこに文字列を代入します。文字列は’クオテーションで囲ってあげます。なお注意して欲しいのがグローバル変数でもメソッド内で使用するときはthis.というのを必ずつけないといけません。つけないと全く反映されないので、グローバル変数にはthis.をつけるのをお忘れなく。

スクリーンショット 2020-02-11 14.13.51.png

保存して、中身を見てみましょう

スクリーンショット 2020-02-09 17.19.25.png

ボタンをクリックしてPush buttonに変更されれば成功です。

スクリーンショット 2020-02-11 14.26.49.png

コード:

<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をベースに新規作成しましょう。まずは、新規のページを作成します。

スクリーンショット 2020-02-11 15.13.36.png

sample1.vueのテキストをコピペで貼り付けます。

スクリーンショット 2020-02-11 15.13.48.png

するとこんな感じになります。

スクリーンショット 2020-02-11 15.14.08.png

次にname属性をSample2に変更して

2020-02-11 15.14.50

sample2.vueという名前で保存します。

スクリーンショット 2020-02-11 15.14.33.png

続いて、index.jsというファイルを開いて、下記のようにコンポーネント登録を行います。ここまでで、一旦準備は完了ですね。

2020-02-11 15.15.25

続いて、inputと記載すればテキストボックスが出来上がります!なお、value属性には初期値をtypeにはtextと書きます。

<input type="text" value="Text here">

スクリーンショット 2020-02-11 15.32.18.png

こんな感じになれば、成功です。

スクリーンショット 2020-02-11 15.34.05.png

複数行のテキストボックスを追加する

複数行のテキストボックスを追加してみましょう。先ほどのテキストボックスの下に複数行のテキストボックスを追加します。まず、先ほどのinputタグをPタグで囲いましょう。

スクリーンショット 2020-02-11 15.50.50.png

次に以下の内容をInputタグのすぐ下に入力します。

<textarea name="question" rows="4" cols="40"></textarea>

スクリーンショット 2020-02-11 15.52.27.png

なお、初期値はテキストエリアタグ内に記載すると、初期値となります。実際に表示させてみましょう。このように複数行のテキストエリアが表示されれば、成功です。

スクリーンショット 2020-02-11 15.53.35.png

テキストボックスの内容を別の場所に表示させる。

先ほどのコードをもとに、inputテキストの内容を別の場所に反映させてみましょう。

ボタンを押すとテキストボックスの内容が反映されるものを作る

ボタンを押すと、テキストボックスの内容が反映されるものを作りましょう

ツイッターのように入力内容がどんどん追加されるものを作る

Firebaseと連携できるようにしよう

タイトルとURLをコピーしました