ディレクティブ

ディレクティブとは、DOM要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。

v-bind

htmlタグに属性を付ける場合などに使用する。

case1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
 <!-- href属性にdataで定義したgoogleプロパティを追加することができる。 --> 
    <a v-bind:href="google">googleへのリンク</a>
 <!-- 省略記法 --> 
     <a :href="google">googleへのリンク</a>


</div>
    <script>
    let app = new Vue({
        el: '#app',
        data(){
            return{
                message:'Hello Vue!',
                google: 'https://google.com'
            }
        }
        })

    </script>
</body>
</html>

case2

オブジェクト形式で書くことも可能。
DOMの属性に対してプロパティ名が同じの場合は省略して書くことができる。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
    <a v-bind:href="google">googleへのリンク</a>
    <br>
    <a :href="book.url"></a>{{book.title}}</a>
    <br>
    <input v-bind="formInput"> DOMの属性に対してプロパティ名が同じの場合は省略して書/くことができる。
    <br>
    <input v-bind="{name:formInput.name,placeholder:formInput.placeholder }">
</div>

    <script>
    let app = new Vue({
        el: '#app',
        data(){
            return{
                message:'Hello Vue!',
                google: 'https://google.com',
                book:{
                    title: '宇宙はなぜこんなに上手くできているのか',
                    url:'https://www.amazon.co.jp/%E5%AE%87%E5%AE%99%E3%81%AF%E3%81%AA%E3%81%9C%E3%81%93%E3%82%93%E3%81%AA%E3%81%AB%E3%81%86%E3%81%BE%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B-%E7%9F%A5%E3%81%AE%E3%83%88%E3%83%AC%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E5%8F%A2%E6%9B%B8-%E6%9D%91%E5%B1%B1%E6%96%89-ebook/dp/B00MTUI0LA'
                },
                formInput:{
                    name:'your_name',
                    placeholder:'お名前を入力してください。'
                }
            }
        }
        })

    </script>
</body>
</html>

case3

syleやclassの設定ができる。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <style>
        .active {
            border:10px, solid red;
        }
    </style>
</head>
<body>
<div id="app">
//cssプロパティなどでスネークケースプロパティがあるが使用できない。
//変わってキャメルケースで記述する必要がある。`font-size` > fontSize
<h1 :style="{fontSize:fontSize, color:color}">いろはす</h1>

//isAcriveに真偽値を設定することで表示非表示ができる。
<div :class="{active: isActive}">classテスト</div> 
</div>

<script>
    const app = new Vue({
        el: '#app',
        data(){
            return {
                fontSize:"50px",
                color:"green",
                isActive: true
            }
        }
    })
</script>
</body>
</html>

【Vue.js】ディレクティブ v-bind

ディレクティブ

v-bind

case1

case2

case3