vue视频教程系列第六节-数据如何显示在模板上
vue视频教程系列第六节-数据如何显示在模板上
在开始这节课之前呢，我们需要先了解一下两个概念：挂载点和模板以及组件
挂载点：是index.html文件下的一个dom节点
作用：vue实例对象只会处理挂载点下面的内容。用我们通俗的语言来解释呢，就是vue的职权范围就是挂点以内，对挂点载以外的内容，无权干涉。
模板：挂载点里的内容，也就是模板内容。
组件：页面上的某一部分内容。当我们的项目比较大时，可以将页面拆分成几个部分，每个部分就是一个组件。单个组件地维护就相对简单多了。我们上一节讲的app.vue就是一个组件。组件一般包括三部分，html部分，css部分，js部分
有些概念听起来很深奥，但一旦理解了，其实也就那样，没什么。
下面言归正传，了解一下数据如何显示在模板上。一共有三种方式：
第一种方式：采用{{ 变量}}这种形式
我们以上节我们创建的vue项目来做介绍。对于根节点app来说，App.vue是它的模板内容，这个模板的内容是以组件的形式展示的。我们先在组件的js部分添加一些数据：data里的内容就是数据，msg是数据的key，后面的内容则为value
数据创建好后，将数据在模板上显示：
需要注意一点的是，我们所有的内容需要包裹在template标签里，还需要包裹在div里，这样才不会报错。
这样数据就显示出来，我们可以看下浏览器。
还有两种方式是以指令的方式：v-text 和v-html
这两种方式都是写在标签内的，
<div class="bb" v-html="msg"></div>
<div class="bb" v-text="msg"></div>
这个msg是变量名。这两者的区别：
v-text：可以转义dom标签
v-html：不可以转义dom标签，会把dom标签直接解析出来
如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注微信公众号：Web前端风暴
