以下の２つのコードは同じ表現になります。

{{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
  }
}