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标签直接解析出来
vue--数据显示模版上的更多相关文章
- 收下这款 Vue 项目模版,它将让你的开发效率在 2021 年提高 50%
这是什么 vue-automation 是一款开箱即用的 Vue 项目模版,它基于 Vue CLI 4 众所周知,虽然 Vue CLI 提供了脚手架的功能,但由于官方的脚手架过于简单,运用在实际项目开 ...
- vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit
vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- Vue 知识复习(上)
Vue Vue实例 创建实例: var vm = new Vue({ //code }) 数据与方法: 只有当实例被创建时 data 中存在的属性才是响应式的; Vm.b = 'h1' 是不会触发视图 ...
- 关于vue使用form上传文件
在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...
- Vue 组件(上)转载
一.定义 组件:应用界面上一个个的区块. 自定义的HTML元素. 二.创建和注册 Vue.extend() 扩展,创建组件构造器 Vue.component()注册组件,2个参数,1为标签,2是组件构 ...
- Vue实现用户自定义上传头像裁剪
使用技术: vue.js2.0.cropperjs.canvas <template> <div id="app"> <div id=&q ...
随机推荐
- ThinkPHP缓存技术(S(),F(),查询缓存,静态缓存)
直接查看原网址 https://blog.csdn.net/u010081689/article/details/47976271
- currval &nextval的差异理解
--currval/nextval的区别 select * from 订单 delete --nextval INSERT INTO 订单(订单编号,单价) --nextval每执行一次,会在下列插入 ...
- Compile pam with pam_cracklib.so
pam_cracklib.so is dependent on libcrack.so. Configure command will search libcrack.so. If it didn't ...
- spark streaming集成flume
1. 安装flume flume安装,解压后修改flume_env.sh配置文件,指定java_home即可. cp hdfs jar包到flume lib目录下(否则无法抽取数据到hdfs上): $ ...
- Ubuntu 18.04 安装Docker
第一种方法从Ubuntu的仓库直接下载安装: 安装比较简单,这种安装的Docker不是最新版本,不过对于学习够用了,依次执行下面命令进行安装. $ sudo apt install docker.io ...
- iOS 线程安全--锁
一,前言 线程安全是iOS开发中避免了的话题,随着多线程的使用,对于资源的竞争以及数据的操作都可能存在风险,所以有必要在操作时保证线程安全. 二,为什么要使用锁? 由于一个进程中不可避免的存在多线程, ...
- [ssh] 通过ssh私钥生成公钥的方法
ssh-keygen -y -f .ssh/id_rsa.key id_rsa.key是私钥.
- Django之中间件&信号&缓存&form上传
中间件 1.中间件是什么? 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用, ...
- python练习题-day13
1.获取移动平均值 def wrapper(fun): def inner(*args,**kwargs): ret=fun(*args,**kwargs) ret.__next__() return ...
- mysql报错Ignoring the redo log due to missing MLOG_CHECKPOINT between
mysql报错Ignoring the redo log due to missing MLOG_CHECKPOINT between mysql版本:5.7.19 系统版本:centos7.3 由于 ...