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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
简单的js表格操作
Sep 24 Javascript
jQuery的事件预绑定
Dec 05 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 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之预定义接口详解
2015/07/29 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
Python中的包和模块实例
2014/11/22 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python中反射和描述器总结
2018/09/23 Python
python for和else语句趣谈
2019/07/02 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
外贸业务员工作职责
2014/01/06 职场文书
自荐信需注意事项
2014/01/25 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
2014年维修工作总结
2014/11/22 职场文书
员工离职通知函
2015/04/25 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
幽灵公主观后感
2015/06/09 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android