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


Posted in Javascript onJune 05, 2020

我们在使用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>

 到此这篇关于Vue是怎么渲染template内的标签内容的的文章就介绍到这了,更多相关Vue渲染template内容内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 #Javascript
VueX模块的具体使用(小白教程)
Jun 05 #Javascript
Vuex的热更替如何实现
Jun 05 #Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 #Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 #Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 #Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 #Javascript
You might like
PHP教程 基本语法
2009/10/23 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python的Lambda函数用法详解
2019/09/03 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
审计班子对照检查材料
2014/08/27 职场文书
工作收入证明模板
2014/10/10 职场文书
2014年客房部工作总结
2014/11/22 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis