Vue是怎么渲染template内的标签内容的?

简介: 欢迎阅读本博文,本博文主要讲述【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'
                },
                on:{
                    click:()=>{
                        alert(1)
                    }
                }
            }, this.text)])
        ])
    }
  })
</script>
</html>



相关文章
|
2天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
15 0
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
12 2
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
9 3
|
2天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
12 2
|
2天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
9 2
|
数据库
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
105 0
基于springboot+mybatisplus+vue的课程学分管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
114 0
基于Springboot+MybatisPlus+Vue的在线课程管理系统
|
JavaScript 前端开发 Java
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
192 0
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
|
JavaScript 开发者
Vue 课程介绍|学习笔记
快速学习 Vue 课程介绍
99 0
|
JavaScript 开发者
Vue课程介绍|学习笔记
快速学习Vue课程介绍
77 0