首先需要知道

掛載點：是index.html檔案下的一個dom節點

模板：掛載點裡的內容，也就是模板內容。

元件：

頁面上的某一部分內容。當我們的專案比較大時，可以將頁面拆分成幾個部分，每個部分就是一個元件。單個元件地維護就相對簡單多了。

app.vue就是一個元件。元件一般包括三部分，html部分，css部分，js部分

對於根節點app來說，App.vue是它的模板內容，這個模板的內容是以元件的形式展示的。

我們先在元件的js部分新增一些資料：data裡的內容就是資料，msg是資料的key，後面的內容則為value

<script type="text/javascript
 
">
  export default {
    data () {
      return {
        msg: "hello"
      }
    }
  }
<script>

第一種方式：採用{{ 變數 }}這種形式

資料建立好後，將資料在模板上顯示：

<template>
  <div>
    <div>{{msg}}</div>
  </div>
</template>

還有兩種方式是以指令的方式：v-text 和 v-html

<template>
  <div>
    <div v-html=
 
"msg"></div> 
    <div v-text="msg"></div>
  </div>
</template

兩者區別：

v-text：可以轉義dom標籤

v-html：不可以轉義dom標籤，會把dom標籤直接解析出來

原文連結：https://mp.weixin.qq.com/s？__biz=MzIwMzE3OTI4Ng%3D%3D&mid=2247483718&idx=1&sn=2ddf443353b1e12a2cb5eea0145ecb74&scene=45#wechat_redirect