1,建立一個Vue例項;

  <div id="app">
    {{ susan }}
  </div>

//固定的寫法
  <script>
    var app = new Vue({
      el: '#app',   //對應html中的id或者calss
      data: {       //返回指定html中的內容或者數計
        susan: 'my name is susan'
      }
    })
  </script>

此時開啟遊覽器就會輸出: "my name is susan"

注意如果你的div是class屬性 在el裡要寫成el : '.app'

2,資料凍結

 <div id="app">
    {{ message }}
  </div>

<script>
//const申明一個物件
    const Jiangle = {
      message: 'my name is Jiangle'
    }
//建立一個Vue例項
    var app = new Vue({
      el: '#app',
      data: Jiangle
    })
  </script>

以上寫法也可以獲取到message的資料,如果我們要凍結一個數計不會被修改

新增凍結數計的語法:Object.freeze(申明的物件);

修改後的程式碼是:

  <div id="app">
    {{ message }}
  </div>

<script>
//const申明一個物件
    const Jiangle = {
      message: 'my name is Jiangle'
    }
// 凍結數計
Object.freeze(Jiangle);
//建立一個Vue例項
    var app = new Vue({
      el: '#app',
      data: Jiangle
    })
  </script>