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标签直接解析出来

巴特西