码迷,mamicode.com
首页 > 其他好文 > 详细

vue--数据显示模版上

时间:2018-11-21 16:06:15      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:转义   script   页面   rect   redirect   不可   nbsp   部分   exp   

首先需要知道

挂载点:是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-textv-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

 

vue--数据显示模版上

标签:转义   script   页面   rect   redirect   不可   nbsp   部分   exp   

原文地址:https://www.cnblogs.com/vinieo/p/9994353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!