ディレクティブ
{{変数}}のマスタッシュ構文は便利だが、条件分岐や繰返し処理などは ディレクティブ機能を使う。 本機能は重要である。 「v-●●」で始まるのが特徴
例えば、属性値にJavaScript式を埋め込むにはv-bindを使います
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<a v-bind:href="url">ぐーぐる</a> ※v-bindを省略してa:href と書くことも可能
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
url: 'https://www.google.com/?hl=ja'
}
});
ブール属性をバインドする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<input type="button" value="クリック" v-bind:disabled="flag">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
flag: false
}
});
