我们在使用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. String类为什么被设计成不可变类

    1.享元模式: 1.共享元素模式,也就是说:一个系统中如果有多处用到了相同的一个元素,那么我们应该只存储一份此元素,而让所有地方都引用这一个元素. 2.Java中String就是根据享元模式设计的,而 ...

  2. .net 使用Docker开发

    .NET多年以前已经开始支持Docker,但由于国内.net现状,生产过程中几乎用不到docker支持,趁着有点时间捣鼓下~. 先期工作 1.首先安装 Docker Desktop 2.安装Visua ...

  3. iperf/LANSpeedTest网络传输速度测试工具

    最近公司测试限速,搜集软件发现两款,iperf,LANSpeedTest. iperf,多平台. LANSpeedTest,读写显示,操作简单. 局域网测试传输,优先考虑UDP. iperf Iper ...

  4. 【二进制枚举】【CF Div2 C】

    2022.3.4  https://codeforces.com/contest/1646/problem/C 题意: 给一个数, 问可以最少有几个以下的数构成: 1.x! 2.2^x(x在每次都是任 ...

  5. bootStrap简要和学习笔记

    bootStrap简要和学习笔记前端在学些了html.css.JavaScript三件套后,我们感觉前端变数太多了,需要创造力来设计一些可能经常使用的界面啊.按钮样式啊等,也就有了一些前端的框架,那何 ...

  6. JavaScript学习基础1

    ##JavaScript: # 概念:一门运行在客户端的脚本语言 *运行在客户端浏览器中的.属于前端三件套之一,属于静态资源,每一个浏览器都有JavaScript的解析引擎 *脚本语言:不需要编译,直 ...

  7. 清除安装的Rancher、K8s

    #清除主机的所有容器.挂载.镜像(慎用) docker stop $(docker ps -aq) docker system prune -f docker volume rm $(docker v ...

  8. windodws pyusb hub端口对应连接的usb设备

    源码: 1 #!/usr/bin/python 2 import sys 3 import usb.core 4 # find USB devices 5 dev = usb.core.find(fi ...

  9. QCustomPlot开发笔记（一）：QCustomPlot简介、下载以及基础绘图

    前言   QCustomPlot开发笔记系列整理集合,这是目前使用最为广泛的Qt图表类(Qt的QWidget代码方向只有QtCharts,Qwt,QCustomPlot),使用多年,系统性的整理,过目 ...

  10. LINUX系统下安装PyCharm和annaconda3并配置

    以下是在ubantu18.04版本下的配置教程: Step 1 去PyCharm官网下载Linux版的PyChram安装压缩包 网址:https://www.jetbrains.com/zh-cn/p ...