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 验证日期的函数
Mar 18 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP 类型转换函数intval
2009/06/20 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python文件读写代码实例
2019/10/21 Python
python  logging日志打印过程解析
2019/10/22 Python
python删除某个目录文件夹的方法
2020/05/26 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
公司中秋节活动方案
2014/02/12 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
护理培训心得体会
2016/01/22 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang