Vue是怎么渲染template内的标签内容的?
2024-10-19 15:36:56
我们在使用Vue做项目时,都会用到脚手架,相应的我们会在template写标签内容。那么你知道为什么会在template写标签吗?这当中经过了怎样的处理呢?
<template>
<div id="app">
<div id="nav">
</div>
<router-view/>
</div>
</template>
<style lang="less">
</style>
其实Vue在处理template时,是经过这样处理的,它是通过内置的render方法处理我们输入的标签,生成VNodes。下面我注释了template内的代码,你可以先看下效果,然后注释掉render方法内的内容,取消注释template。看下前后效果是否一样。
<!DOCTYPE html>
<html>
<head>
<title>render</title>
</head>
<style type="text/css">
#text{
font-weight: bold;
font-size: 26px;
}
</style>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data: {
text: 'hello world',
style1: {
width: '200px',
height: '200px',
border: '1px solid red'
},
style2: {
textAlign: 'center'
},
colorText: {
color:'blue'
}
},
// template:`<div :style='style1'>
// <p :style='style2'>
// <span :style='colorText' @click='cli()' id='text'>{{text}}</span>
// </p>
// </div>`,
// methods:{
// cli(){
// alert(1)
// }
// },
render(createElement) {
return createElement('div', {
style: this.style1
}, [
createElement('p', {
style: this.style2
}, [createElement('span', {
style: this.colorText,
attrs:{
id:'text'
},
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119250657
最新文章
- 正则表达式的先行断言(lookahead)和后行断言(lookbehind)
- Duplicate Protocol Definition of DTService Is Ignored
- Hello China操作系统STM32移植指南(三)
- Java数据类型在实际开发中的应用一
- jenkins 时区设置
- python注释方法以及编码问题
- javaMail邮件发送功能(多收件人,多抄送人,多密送人,多附件)
- Windows 快捷键总结
- 安装jar包到本地仓库和远程仓库
- hdu-2072(字典树)
- Python 的异步 IO:Asyncio 简介
- 【问题解决:信息提示】SpringBoot启动时提示The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path
- Luogu P3366 【模板】最小生成树
- 使用@property - 廖雪峰的官方网站
- BZOJ.3064.CPU监控(线段树 历史最值)
- Linux一些基本配置
- C内存管理相关内容--取自高质量C++&;C编程指南
- AES加密工具类(对称加密算法)
- 【第三十二章】 elk(3)- broker架构 + 引入logback
- sublime3中运行python 和设置
热门文章
- 『忘了再学』Shell基础 — 10、Bash中的特殊符号(二)
- docker基础_数据卷
- 手把手教会将 Windows 窗体桌面应用从.NET Framework迁移到 .NET SDK/.NET 6 格式
- Oracle 定时任务增删改查
- Halo 开源项目学习(三):注册与登录
- netty系列之:netty中的核心编码器bytes数组
- 团队Arpha4
- 为什么建议大家使用 Linux 开发?
- 使用本地自签名证书为 React 项目启用 https 支持
- Java 14中对switch的增强,终于可以不写break了