以下の２つのコードは同じ表現になります。
{{sayYes()}}
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p>{{sayYes()}}</p>
<p v-text="message"></p>
</div>
<script>
new Vue({
el: '#app',
data: { message: "おはよう"},
methods: {
sayYes: function() {
return this.message;
}
}
})
</script>
</body>
v-onceディレクティブ 再代入を防ぐ
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p v-once>{{message}}</p>
<p>{{sayYes()}}</p>
</div>
<script>
new Vue({
el: '#app',
data: { message: "おはよう"},
methods: {
sayYes: function() {
this.message="おはようございます"
return this.message;
}
}
})
</script>
</body>
最初に代入したものしか受け付けなくなる
（this.message="おはようございます"で２度目に追加していますが）
v-htmlディレクティブ タグを機能させる
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p v-html="html"></p>
<p>{{html}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
html: '<h1>h1タグです</h1>'
}
})
</script>
</body>
*クロスサイトスクリプチィング（脆弱性）を生み出す危険性があります。
＊ユーザーから提供されたコンテンツは絶対におかないでください。信頼のあるコンテンツに使ってください。
v-bindディレクティブ Linkタグを生成
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<a v-bind:href="url">google</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://www.google.com'
}
})
</script>
</body>
いままでとコードの仕方が違います。(引数を取ります)
<a v-bind:href="url">google</a>
省略形
<a href="url">google</a>
v-bindディレクティブを動的に扱う Linkタグを生成
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<a :[attribute]="url">google</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://www.google.com',
attribute: 'href'
}
})
</script>
</body>
<a :[attribute]="url">google</a>
v-bindディレクティブ:引数を繋げることもできます
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<a :href="url" :id="number">Twitter</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://twitter.com',
number: 100
}
})
</script>
</body>
<a :href="url" :id="number">Twitter</a>
v-bindディレクティブ:urlとidをオブジェクトとして扱う
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<a v-bind="{href: url, id: number}">Twitter</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://twitter.com',
number: 100
}
})
</script>
</body>
<a v-bind="{href: url, id: number}">Twitter</a>
v-bindディレクティブ:urlとidをオブジェクトとして扱う(2)
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<a v-bind="urlObject">Twitter</a>
</div>
<script>
new Vue({
el: '#app',
data: {
urlObject: {
href: 'https://twitter.com',
id: 100
}
}
})
</script>
</body>
<a v-bind="urlObject">Twitter</a>
中略
data: {
urlObject: {
href: 'https://twitter.com',
id: 100
}
}