Vue是怎么渲染template内的标签内容的？
我们在使用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
Vue是怎么渲染template内的标签内容的？的更多相关文章
- vue使用动态渲染v-model输入框无法输入内容
最近使用ElementUI框架,在动态渲染表单的时候,表单框无法输入内容,但是绑定model的数据是会发生变化 解决方法: 将动态生成的表单对象,深拷贝到 data 对象中 <el-date-p ...
- [vue] vue服务端渲染nuxt.js
初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...
- webpack4+koa2+vue 实现服务器端渲染(详解)
_ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...
- django 内建标签和过滤器参考
下面的标签和过滤器参考就是为那些没有 admin 站点的可用的人准备的.由于 Django 是高度可定制的,你的 admin 里的关于标签和过滤器的参考可以认为是最可信的. 内建标签参考 block ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- Vue源码后记-其余内置指令（1）
把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...
- Vue(服务端渲染)
一.前言 1.服务端渲染图解 2.简介服务端渲染 ...
- django中模板变量与内置标签以及过滤器
本文参考 官方文档 . 一 模板变量 格式: {{ variable_name }} variable_name 命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...
- vue服务端渲染axios预取数据
首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...
随机推荐
- Ubu18下cpptest安装
1.环境安装 sudo apt install g++ sudo apt install automake sudo apt install autoconf sudo apt install lib ...
- collections、time、datetime、random模块
今日内容概要 1.re模块的其他知识 2.正则起别名与分组机制 3.collections模块 4.time与datetime模块 5.random随机数模块 今日内容详细 re模块的其他知识 imp ...
- 使用IDEA生产JavaDoc文档
源代码 package com.*****.base; //文档注解 /** * @Author intelliyu * @version 1.0 //版本 * since 1.8 //指明需要最早使 ...
- Java语言学习day28--8月03日
###10接口作为方法参数与返回值 * A: 接口作为方法参数 接口作为方法参数的情况是很常见的,经常会碰到.当遇到方法参数为接口类型时,那么该方法要传入一个接口实现类对象.如下代码演示. //接 ...
- WebSocket 协议详解
一.WebSocket 协议背景 早期,在网站上推送消息给用户,只能通过轮询的方式或 Comet 技术.轮询就是浏览器每隔几秒钟向服务端发送 HTTP 请求,然后服务端返回消息给客户端. 轮询技术一般 ...
- CUDA02 - 访存优化和Unified Memory
CUDA02 - 的内存调度与优化 前面一篇(传送门)简单介绍了CUDA的底层架构和一些线程调度方面的问题,但这只是整个CUDA的第一步,下一个问题在于数据的访存:包括数据以何种形式在CPU/GPU之 ...
- git冲突解决、线上分支合并、luffy项目后台登陆注册页面分析引入
今日内容概要 git冲突解决 线上分支合并 登陆注册页面(引入) 手机号是否存在接口 腾讯云短信申请 内容详细 1.git冲突解决 1.1 多人在同一分支开发,出现冲突 # 先将前端项目也做上传到 g ...
- Java继承实例解析
Java继承 前言 继承是面向对象语法的三大特征之一.继承可以降低代码编写的冗余度,提高编程的效率.通过继承,子类获得了父类的成员变量和方法.一个子类如何继承父类的字段和方法,如何修改从父类继承过来的 ...
- web框架的本质、MVC框架MTV框架的介绍
1.web框架的本质 所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响应,按照http协议的请求协议发送请 ...
- SQL连接查询优化[姊妹篇.第五弹]
上篇的sql优化篇章,更多偏向于优化的思想概念,先前抛出的4个优化问题中,篇幅过长,只对前两个问题进行了解析. 接下来我们一起来谈谈sql的连接查询优化,更偏向于实际运用,并对如下两个问题进行探讨.篇 ...