vue--數據顯示模版上

首先需要知道

掛載點：是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