<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="<https://unpkg.com/[email protected]>"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:value="message">
    </div>

    <script>
        const app = Vue.createApp({
            data: () => ({
                message: 'Hello Vue.Js!'
            })
        })
        app.mount('#app')

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

v-bindの省略記法

＜完全な構文＞

<a **v-bind**:href='url'>Link</a>

＜省略記法＞

<a :href='url'>Link</a>

応用的な使い方

<div id="app">
	<a :[attribute]="url">Google</a>
	🔼このようの属性キーにも参照することができる
	<br>
  <a :[attribute]="urlTwitter" :id="number">Twitter</a>
  <br>
  <a v-bind="{href: urlTwitter, id: number}">Twitter</a>
  <br>
  <a v-bind="twitterObject">Twitter</a>
	🔼dataにオブジェクトを作成しておけば、このように使用することもできる
</div>

new Vue({
    el: "#app",
    data: {
        url: '<https://google.com>',
        urlTwitter: '<https://twitter.com>',
        attribute: 'href',
        number: 31,
        twitterObject: {href: "<https://twitter.com>", id: 31}
    }

});