LoginSignup
0
1

More than 1 year has passed since last update.

プロトアウトスタジオAdvent Calendar 2021Day 19protoout-studio
@canonno(canonno)inプロトアウトスタジオ

Vue.jsの基本の「キ」

Last updated at Posted at 2021-12-20

教材用Qiita

プロトタイプをする上で、Vue.jsは何かと便利ですよね。
今回は後輩向けに作った教材を作り直して公開してみました。
サンプルコードみたいな形にしていますので、是非教材などにご利用下さい！

HTML/CSS/Javascriptの基本形

基本の形

HTML/CSS/Javascriptの役割分担はざくっとこんな感じ。
・HTML：何を入れるか決めて
・CSS：どう見せるか決めて
・Javascript：どんな処理をするか決めて
良い感じのホームページを作っている。

<!DOCTYPE html>
<html>
  <!-- titleとかcssとか。ものによってはstyleタグが入る-->
  <head>
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>

  <!-- body-->
  <body>

  </body>
  <!-- script-->
  <script>

  </script>
</html>

HTMLとJavascriptの架け橋：onclick

Javascriptを動かす条件は色々あるけれど、まず覚えておくといいのがonclick。
buttonタグや色んな画像にはonclick属性をつけられる。
onclick=関数名というお作法で、scriptタグの関数をﾗｸﾗｸ実行することができる。

<!DOCTYPE html>
<html>
  <!-- titleとかcssとか。ものによってはstyleタグが入る-->
  <head>
    <title>Progate</title>
　</head>

  <!-- body-->
  <body>
    <button onclick="hoge()">アラートがなるよ</button>
  </body>
  <!-- script-->
  <script>
  function hoge(){
    alert("アラートが鳴ったよ");
  }
  </script>
</html>

画面の表示を変えてみたい

HTMLタグの部分にうにょうにょ書くと、その部分がそのまま表示される。
ただ表示されるだけなので、もっと動的な変化をつけないとなかなか実用的ではなさそうだ。

<!DOCTYPE html>
<html>
  <!-- titleとかcssとか。ものによってはstyleタグが入る-->
  <head>
    <title>Progate</title>
　</head>

  <!-- body-->
  <body>
    <button>文字を変えるよ</button>

    <div id="kokodayo">変更前</div>
  </body>
  <!-- script-->
  <script>

  </script>
</html>

innerHTMLでゴリゴリ書く

文字の書き換え方はいろんな手法があるけれど、ここではinnerHTMLを利用してみよう。
document.getElemntByIdを使うことで、id属性から文章を取り出すことができる。
innerHTMLというパラメータとして文章を持っているので、そこを置き換えると文章を書き換えることができる。

<!DOCTYPE html>
<html>
  <!-- titleとかcssとか。ものによってはstyleタグが入る-->
  <head>
    <title>Progate</title>
　</head>

  <!-- body-->
  <body>
    <button onclick="hoge()">文字を変えるよ</button>

    <div id="kokodayo">変更前</div>
  </body>
  <!-- script-->
  <script>
  function hoge(){
    var mydiv = document.getElementById("kokodayo");
    mydiv.innerHTML = "<h3>h3タグに変更しました</h3>";
  }
  </script>
</html>

でも変えた文字管理したりいちいち定義したり整理整頓が面倒くさい。
そこでもっと楽ちんしようぜ、ということでVue.jsを今回は勉強する。

Vue.jsとは

Javascriptのフレームワークの一つで、このお作法に沿えば画面を動的に変えやすくなる。
色んな紹介のされ方があるけれど、有名どころとして
・Vue.js:プロトタイプ向き
・React.js:中間
・Angular.js:大規模開発向き
がよく取り上げられている。

大前提のお作法

色々な使い方があるけれど、一旦ここでは
①Vue.jsのCDNを読み込む
②divタグのid = "app"の範囲を作る
③app = new VueでVueのオブジェクトを作る
を基本としよう。
基本的な世界はいつものHTML/CSS/Javascriptなので、②のid = "app"の範囲を決めて「ここからここまではVueの世界だよ」と教えてあげる必要がある。
最初の間は、エラーが出てたらappの範囲間違いを疑ってみよう。

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
        <!--ここがhtmlにvueが使える世界-->
        <!--ここまで-->>
    </div>
      　<!--ここがvueとは関係ないいつものHTML-->
        <!--ここまで-->>
　　</body>

　　<script>
      //ここから
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello World!',
        },
      });
      //ここまでがvue.jsのお作法

      //ここからはvueとは関係ないいつものJavascript
    </script>
</html>

色んなお作法：script部分

data

dataの中に辞書型で変数の定義ができる。
↓の場合messageに"Hello World!"を代入している。
HTML側では{{}}でくくってあげることで、変数の中身を表示できる。

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
      {{ message }}
    </div>
    ここから先は普通にHTMLのお作法だよ
    {{message}}

    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello MyName!',
        },
      });
    </script>
</html>

dataの中は何個でも並べられるし、また更に辞書型にすることもできる。
辞書の中の辞書の中の値はnice_message.itsumoみたいに取り出せる。

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
      {{nice_message.itsumo }}
      {{nice_message.shinpai}}
      {{simple_message}}
    </div>
    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          nice_message: {
            itsumo: "いつもありがとう",
            tanjobi: "誕生日おめでとう",
            shinpai: "大丈夫・・・？"
          },
          simple_message:"おはよー"
        },
      });
    </script>
</html>

created/mounted

このHTMLが開かれた瞬間に実行させる関数を用意する場合はcreatedの後に関数を書く。
createdの他にもmountedやbeforeCreateとかあるが、細かい違いはこのサイト参照。
例えば「最新のデータをAPIから取りたい！」のであれば、createdで毎回APIを呼び出す必要がある。

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
      {{simple_message}}
    </div>
    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          simple_message:"おはよー"
        },
        created: function(){
            this.simple_message = "こんばんは！";
        }
      });
    </script>
</html>

methods

関数を新たに用意する場合はmethodsの下に書く。
これも辞書型なのでいくらでも定義可能。
普段のHTMLの世界ではonclick属性だったけど、vueの世界では後述のv-on:click属性なのに注意！

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
      {{simple_message}}
      <button v-on:click="lunchNow()">お昼なう</button>
      <button v-on:click="eveningNow()">夕方なう</button>
    </div>
    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          simple_message:"おはよー"
        },
        methods:{
          lunchNow: function(){
              this.simple_message = "こんにちは";
          },
          eveningNow: function(){
              this.simple_message = "こんばんは";
          }
        } 
      });
    </script>
</html>

色んなお作法：tag部分

v-if

v-if=条件文で表示の制御が可能。超便利。

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
       <div v-if="time<9">おはよー</div>
       <div v-else-if="time>=9&&time<15">こんにちは</div>
       <div v-else>こんばんは</div>
    </div>
    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          time:8
        },
        methods:{
        } 
      });
    </script>
</html>

v-for

HTMLでfor文をぐるんぐるん回せる。超便利。

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
       <div v-for="number in numbers">{{number}}</div>
    </div>
    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          numbers:[1,2,3,4,5]
        },
        methods:{
        } 
      });
    </script>
</html>

(nakami,index) in listという書き方をすると、listでnakamiが何番目かがindexとして取り出せる。
時々便利。

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
       <div v-for="(shiritori, index) in shiritories">{{index}}番目は「{{shiritori}}」でした</div>
    </div>
    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          shiritories:["りんご","ごりら","らっぷ","ぷりん","はい「ん」がついたー"]
        },
        methods:{
        } 
      });
    </script>
</html>

v-on:click

methodsの章で見たやつ。
普通のHTMLの世界はonclick、vueの世界ではv-on:click！

<!DOCTYPE html>
<html>
  <head>
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
     <div id="app">
       <input type="number" id="time">
       <button v-on:click="whatTimeIsIt()">今何時？</button>
        {{simple_message}}時なう
    </div>
    </body>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          simple_message:0
        },
        methods:{
            whatTimeIsIt(){
                var inputNumber = document.getElementById("time")
                this.simple_message = inputNumber.value
            }
        } 
      });
    </script>
</html>

ここまで学べば簡単なものは作れるでしょう

さあ実際に何か作ってみよう！

ということで以上になります。
何かに/誰かの役に立てれば幸いです！

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1