Vue.js入門２

ディレクティブによるデータアクセスv-text

データオブジェクトにアクセスするのに、（{{…}}の代わりに）v-textディレクティブを利用しても構まわない。

 

以下コードは同じ意味である

<p>{{ message }}</p>
<p v-text="message"></p>

 

ディレクティブとは、v～ではじまる特別な属性のこと。
directive（指令）という名前の通り、Vue.jsになんらかの指示を渡すためのしくみ。
v-textディレクティブであれば、現在の要素配下を指定された式の値で置き換える。

コードの可読性、記述の簡便さを考慮すると{{…}}のほうが良いと思われる。

 

文字列をHTMLとして埋め込むv-html

Vue.jsでは、式によるテキストの埋め込みにも、セキュリティ的な考慮がなされている。

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速習Vue.js</title>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>

</body>

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

</html>

hello.js

var app = new Vue({
    el: '#app',
    data: {
        message: '<h1>こんにちは</h1>' + '<span><a href="https://jp.vuejs.org/">Vue.js!</a></span>'
    }
});

画面

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速習Vue.js</title>
</head>

<body>
    <div id="app">
        <p v-html="message"></p>
    </div>

</body>

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

</html>

hello.js

var app = new Vue({
    el: '#app',
    data: {
        message: '<h1>こんにちは</h1>' + '<span><a href="https://jp.vuejs.org/">Vue.js!</a></span>'
    }
});

画面

  • {{…}}式やvtextディレクティブが要素オブジェクトのtextContentプロパティを設定する。
  • v-htmlディレクティブはinnerHtmlプロパティを設定する。

属性値にJavaScriptをうめこむ v-bind

属性値の操作には、v-bindディレクティブを利用する。

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速習Vue.js</title>
</head>

<body>
    <div id="app">
        <a v-bind:href="url">Vue.js</a>
    </div>

</body>

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

</html>

hello.js

var app = new Vue({
    el: '#app',
    data: {
        url: 'https://jp.vuejs.org/'
    }
});

 

「v-bind:属性名=”値”」のように、ディレクティブ名と属性名はコロン（:）区切りで表記する。

画面

プロパティ値をアプリ独自のルールで加工する 算出プロパティ

テンプレートには、{{…}}、vbindを用いることで、任意のJavaScript式を埋め込むことができる。

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速習Vue.js</title>
</head>

<body>
    <div id="app">
        <p>{{ localEmail }}</p>    
    </div>

</body>

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

</html>

hello.js

var app = new Vue({
    el: '#app',
    data: {
        email: 'yuji@example,com'
    },

    //演算した結果を算出するプロパティ
    computed: {
        localEmail: function(){
            return this.email.split('@')[0].toLowerCase();
        }
    }

});

コメント