Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@shibaHaya

Vue.jsについてと少しの実践(Laravel使用)

More than 1 year has passed since last update.

◆DOMとは

HTMLの要素や属性はDOMによって、オブジェクトデータにまとめられているため、JavaScript
からアクセスできる。

◆ツリー構造

DOMは、HTMLをツリー構造にまとめることで、中身をきれいに分けることができる。
考え方としては、htmlの中にheadとbodyその中にといった感じで階層に分けられている。

Vue.jsの考え方

設計はMVVMパターンを採用しています。
ViewModel(VM)とViewの間でデータ連携を行います。
ViewはHTMLのことで、VMはデータとメソッドです。
画面が表示される際に、VMが存在して、そのデータによってViewが表示されています。(データ駆動)
ディレクティブ(vからはじまるもの)を利用し、VMはViewとデータを連動させ、コンポーネントという単位で作成していくので、
再利用がしやすいようになっています。

vue.js概要
vue.js概要

vue.jsChapter1
を参考にさせていただき、実践していきます。

◆el・data・Vue

まず画面に「ようこそ!!」を表示します。

<body>
    <div id="sample">
        @{{ message }} //laravel使用のため@
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            message: 'ようこそ!!'
        }
    });
</script>

・new VueでVueインスタンスを作成することでVueアプリケーションを利用できます
・elは、DOM要素を表すセレクタを指定することで、その範囲で利用可能になる
・dataは、new Vueで作成したVueアプリ内で利用できるデータ(変数)
@{{ message }}にdata内のmessageの内容が表示されます。これをテキストのバインディングといいます。

◆繰り返し描画

<body>
    <div id="sample">
        <ol>
            <li v-for="fruit in fruitsList">
                @{{fruit}}
            </li>
        </ol>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data: {
            fruitsList: ['みかん', 'れもん', 'めろん']
        }
    });
</script>

v-forディレクティブを使用して、バインディングしたデータのリストを表示しています。
v-for=(リストの項目 in バインディングしたデータ)
そして、リストの項目を表示している。

ディレクティブ(Directive)

データのバインディングを行うときに利用する(v-から始まる属性)
ディレクティブを指定すると、それはjsの変数になる(今回ならfruit)

◆イベント検知

<body>
    <div id="sample">
        <button v-on:click="handleClick">クリック検知</button>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        methods:{
            handleClick: function () {
                alert('クリックしたよ!')
            }
        }
    });
</script>

v-onはイベントを検知します。今回のclickはクリックを検知します。(省略形は@click)
v-on種類
methodsはVueアプリ内で使用する関数を用意する場所です。
今回ですと、ボタンを押したらalertが出るようにしています。

◆入力値の同期

<body>
    <div id="sample">
        <input type="text" v-model="message">
        <p>@{{ message }}</p>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data:{
            message: 'ようこそ!!'
        }
    });
</script>

v-modelディレクティブを利用し、入力値を同期させています。

◆条件分岐

<body>
    <div id="sample">
        <button v-on:click="handleClick">表示切替</button>
        <p v-if="show">表示されています</p>
    </div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
    const sample = new Vue({
        el: '#sample',
        data:{
            show: true
        },
        methods:{
            handleClick: function () {
                this.show = !this.show;
            }
        }
    });
</script>

v-ifを使用して条件分岐を行っています。ボタンを押すと表示非表示が入れ替わります。
表示非表示では、v-showというものもあります。v-ifはfalseだとDOMから削除されますが、
v-showの場合、display:noneになり、非表示となります。

◆まとめ

基礎から始めるVue.js
こういったサイトがあることが、すごくありがたいです。参考にさせていただきます。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shibaHaya
新米 コードレビューサイト【https://everyone-code-review.com/】 twitterアカウント https://twitter.com/shibahayaBlog

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?