我们在使用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内的标签内容的？的更多相关文章

  1. vue使用动态渲染v-model输入框无法输入内容

    最近使用ElementUI框架,在动态渲染表单的时候,表单框无法输入内容,但是绑定model的数据是会发生变化 解决方法: 将动态生成的表单对象,深拷贝到 data 对象中 <el-date-p ...

  2. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  3. webpack4+koa2+vue 实现服务器端渲染(详解)

    _ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...

  4. django 内建标签和过滤器参考

    下面的标签和过滤器参考就是为那些没有 admin 站点的可用的人准备的.由于 Django 是高度可定制的,你的 admin 里的关于标签和过滤器的参考可以认为是最可信的. 内建标签参考 block ...

  5. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  6. Vue源码后记-其余内置指令（1）

    把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

  7. Vue(服务端渲染)

    一.前言 1.服务端渲染图解                                                 2.简介服务端渲染                             ...

  8. django中模板变量与内置标签以及过滤器

    本文参考 官方文档 . 一  模板变量 格式: {{ variable_name }} variable_name   命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...

  9. vue服务端渲染axios预取数据

    首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...

随机推荐

  1. @RequestBody和@RequestParam注解以及返回值，ajax相关知识点

    关于前后端传递json数据这块查了好多资料,好多地方还是不清楚,先记录一下清楚的地方. 如果我们前端使用ajax发json数据,一般都加上contentType:'application/json;c ...

  2. RPC及Dubbo和ZooKeeper的安装

    RPC及Dubbo和ZooKeeper的安装 RPC 通信有两种方式:HTTP(无状态协议,通信协议),RPC(远程过程调用) 它两的本质没有区别,只是功能有点不一样 官方解释: RPC是指远程过程调 ...

  3. 论文解读（MLGCL）《Multi-Level Graph Contrastive Learning》

    论文信息 论文标题:Structural and Semantic Contrastive Learning for Self-supervised Node Representation Learn ...

  4. spring中的事件发布与监听

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. spring事件发布与监听的应用场景 当处理完一段代码逻辑,接下来需要同 ...

  5. Java面试题资料合集

    Java面试题资料合集 2021年最新版--Java+最常见的+200++面试题汇总+答案总结汇总.pdf BIO,NIO,AIO,Netty面试题 35道.pdf Dubbo面试题 47道.pdf ...

  6. .NET 6上的WebView2体验

    上次说为了不想在web端登录博客园,我想着还是继续使用MarkWord编写博客,不过在使用的过程中,如果markdown文件的目录中有中文的话,Markdown预览就不能够显示粘贴的图片了,原因是之前 ...

  7. SpringBoot中异常处理

    一.背景 在我们编写程序的过程中,程序中可能随时发生各种异常,那么我们如何优雅的处理各种异常呢? 二.需求 1.拦截系统中部分异常,返回自定义的响应. 比如: 系统发生HttpRequestMetho ...

  8. 【问题解决】'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

    问题复述 今天项目组有人找我说之前部署的程序在测试环境没问题,到生产环境出现了奇怪的问题,点按钮没反应. 我通过腾讯会议发现他们的浏览器控制台上打出了如下错误: Access to XMLHttpRe ...

  9. [题解] 树(tree)

    题目大意 ​ 给定一颗 \(N\) 个点的有根树,其中 \(1\) 是树根,除了 \(1\) 以外的其他点 \(u\) 有唯一的父亲 \(Father_u\).同时,给定 \(M\) 条路径,第 \( ...

  10. svelte组件：svelte3.x自定义美化虚拟滚动条组件svelte-scrollbar

    基于svelte3.0自定义pc端虚拟滚动条组件svelteScrollbar. svelte-scrollbar:运用svelte3.x创建的桌面pc版自定义美化滚动条组件.支持是否原生滚动条.自动 ...