我们在使用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. 1.Java基础

    1.注释 单行注释 // 多行注释 /*回车 文档注释(注解)./**回车 2.标识符 (1)Java所有组成部分都需要名字,类名,变量名以及方法名都称为标识符 (2)且标识符只能以字母.$或者_ 开 ...

  2. formData一般用法，移动端，pc端都可以用，pc有兼容性问题

    其实FormData是一个 对象他是一个比较新的东东(其实我也不知道改叫什么好) 利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个& ...

  3. Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. Linux（ubuntu）二进制安装mysql8.0

    mysql官方网站下载地址:https://dev.mysql.com/downloads/mysql/ 1.创建mysql运行用户和组 groupadd -g 1001 mysql useradd ...

  5. Halo 开源项目学习（二）：实体类与数据表

    基本介绍 Halo 项目中定义了一些实体类,用于存储博客中的关键数据,如用户信息.文章信息等.在深入学习 Halo 的设计理念与实现过程之前,不妨先学习一下一个完整的博客系统都由哪些元素组成. 实体类 ...

  6. Vert.X CompositeFuture 用法

    CompositeFuture 是一种特殊的 Future,它可以包装一个 Future 列表,从而让一组异步操作并行执行:然后协调这一组操作的结果,作为 CompositeFuture 的结果.本文 ...

  7. Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

    错误描述 在DBeaver执行DDL语句时报错:SQL 错误 [1293] [HY000]: Incorrect table definition; there can be only one TIM ...

  8. Linux文本工具-cat-cut-paste；文本分析-sort-wc-uniq

    1.1 查看文本文件内容  cat 1.1.1 cat可以查看文本内容 cat [OPTION]... [FILE]... 常见选项 -E: 显示行结束符$ -A: 显示所有控制符 -n: 对显示出的 ...

  9. MySQL（3） - 数据库表的相关操作

    1.数据库表的创建 逻辑库 1)创建逻辑库:CREATE DATABASE 逻辑库名称; 2)显示逻辑库:SHOW DATABASES; 3)删除逻辑库:DROP DATABASE 逻辑库名称; 数据 ...

  10. MySQL8新增降序索引

    MySQL8新增降序索引 桃花坞里桃花庵,桃花庵里桃花仙.桃花仙人种桃树,又摘桃花卖酒钱. 一.MySQL5.7 降序索引 MySQL在语法上很早就已经支持降序索引,但实际上创建的却仍然是升序索引,如 ...