雙向綁定

<style>
  [v-cloak]{
    display:none;
  }
</style>

<div id="app" v-cloak>
  //有三種做法
  <h1 v-html="msg"></h1>  //使用html 會有資安的風險
  <h1 v-text="msg"></h1>
  <h1> {{msg}} </h1>
</div>

<script>
  (function(window){
  //使用立即函式可以將功能獨立得程式碼包起來，易讀好懂
    var data = {
      msg: 'Hello Vue!'
    }


    var vm = new Vue({
      el: '#app',
      data: data
    })

  })(window)    
</script>

v-text

更新元素的 textContent 。如果要更新部分的 textContent，需要使用 插值。

v-html

更新元素的innerHTML。注意：內容按普通HTML插入 - 不會作為Vue模板進行編譯。
如果試圖使用v-html組合模板，可以重新考慮是否通過使用組件來替代。

在網站上動態渲染任意HTML是非常危險的，因為容易導致XSS攻擊。
只在可信內容上使用v-html，永不用在用戶提交的內容上。