我们在使用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. MySQL5.6复制技术

    mysql复制功能介绍 我们可以通过为服务器配置主从即一个或多个备库的方式,以及主主结构来进行数据同步,将MySQL的数据分布到多个系统上去.复制过程中一台主库(master)服务器可以数据被同步到多 ...

  2. C++ functional库中的仿函数

    一.仿函数简介 仿函数(functor)又称之为函数对象(function object),实际上就是 重载了()操作符 的 struct或class. 由于重载了()操作符,所以使用他的时候就像在调 ...

  3. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  4. 2021-ACM-ICPC-济南站 K Search For Mafuyu 【树的遍历与回溯，dfs, 邻接表】

    PAT 题目详情 (pintia.cn) 题目 题意描述 n个房间, 有n-1个通道, kanade初始在1,Mafuyu 位置未知,求K到M的最小期望,也就是到每个地方的平均值,注意的是这里的求法, ...

  5. k8s入门之基础环境准备(一)

    一.在虚拟机中安装Ubuntu20.04.4系统 1.下载Ubuntu20.04.4服务器版本系统 下载链接地址如下: https://mirrors.tuna.tsinghua.edu.cn/ubu ...

  6. 攻防世界-MISC：Aesop_secret

    这是攻防世界高手进阶区的的第九题,题目如下: 点击下载附件一,得到一个压缩包,解压后得到一张GIF动图,找个网站给他分解一下,得到如下图片 不知道是什么意思,所以就跑去看WP了,用010editor打 ...

  7. XCTF练习题---CRYPTO---Morse解析

    XCTF练习题---CRYPTO---Morse解析 flag:morsecodeissointeresting 解题步骤: 1.观察题目,下载附件进行查看 2.得到文件内容,由0.1组成,初步判断为 ...

  8. 一次IOS通知推送问题排查全过程

    原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 发现问题 在上周一个将要下班的夜晚,测试突然和我打招呼,说IOS推送的修复更新上线后存在问题,后台报错. 连忙跑到测试那 ...

  9. 关闭BottomSheetDialogFragment从后台返回后的动画

    问题 显示BottomSheetDialogFragment后.将当前应用放于后台,切换到其他APP,然后再返回当前应用.此时会看到BottomSheetDialogFragment从下而上的动画再次 ...

  10. mybatis各阶段的详解

    1 本阶段的需要注意的几个点 1,首先是在核心配置文件里面的内容: 配置的顺序,不配则不用管,配则必须按顺序来!!!! properties?, settings?, typeAliases?, ty ...