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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 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中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
dojo 之基础篇
2007/03/24 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python dict 相同key 合并value的实例
2019/01/21 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python import 上级目录的导入
2020/11/03 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
绩效工资实施方案
2014/03/15 职场文书
五好关工委申报材料
2014/05/31 职场文书
庆元旦活动总结
2014/07/09 职场文书
退学证明范本3篇
2014/10/29 职场文书
信访维稳承诺书
2015/05/04 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
房屋质量投诉书
2015/07/02 职场文书