首先需要知道
挂载点:是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标签直接解析出来