Vue.js基本文法1

Vue.js入門編

導入方法

まずは一番簡単な奴から

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

上記をhtmlで読み込む

Vueアプリケーションの作成

const app = new Vue({
  //オプション
})

コンストラクタ関数Vueを使用し、Vueインスタンスを作成する。
戻り値はルートのインスタンスとなっているので、変数化しておく事でコンソールからアクセスできる。

　基本機能

テキストのバインディング

index.html

<p>{{message}}</p>

main.js

new Vue({
    el:"#app",
    data:{
        message:'Hello World!'
    }
})

結果

<p>Hello World!</p>

v-forディレクティブ

index.html

<ul>
  <li v-for="item in list">{{ item }}</li>
</ul>

main.js

new Vue({
    el:"#app",
    data:{
        list:['hoge1','hoge2','hoge3']
    }
})

結果

<ul>
  <li>hoge1</li>
  <li>hoge2</li>
  <li>hoge3</li>
</ul>

イベントハンドリング

index.html

<button v-on:click="click">ボタン</button>

main.js

new Vue({
    el:"#app",
    methods:{
        click(){
            console.log(event);
        }
    }
})

結果

　MouseEvent

フォーム入力バインディング

index.html

  <input v-model="message">
  <p>{{ message }}</p>

main.js

new Vue({
    el:"#app",
    data:{
        message:'同期するぞ！'
    }
})

v-model.numberと書くと入力値を数値として受け取ることができる

v-ifディレクティブ

index.html

    <button v-on:click="show=!show">切り替え</button>
    <p v-if="show">Hello Vue.js</p>

main.js

new Vue({
    el:"#app",
    data:{
        show:true
    }
})

上記で表示の切り替えができます。