vue实例属性之el,template,render
一、el,template,render属性优先性
当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通过将template模板编译生成渲染函数,然后再渲染DOM树,而当Vue选项对象中既没有render渲染函数,也没有template模板时,会通过el属性获取挂载元素的outerHTML来作为模板,并编译生成渲染函数。
换言之,在进行DOM树的渲染时,render渲染函数的优先级最高,template次之且需编译成渲染函数,而挂载点el属性对应的元素若存在,则在前两者均不存在时,其outerHTML才会用于编译与渲染。
1、写html文件
<div class="vapp-1">{{ info }}</div> <div class="vapp-2">{{ info }}</div> <div class="vapp-3">{{ info }}</div>
2、写js文件
new Vue({ el: '.vapp-1', data: { info: '这是通过el属性获取挂载元素的outerHTML方式渲染。' }, template: '<div>这是template属性模板渲染。</div>', render: function(h){ return h('div', {}, '这是render属性方式渲染。') } }) new Vue({ el: '.vapp-2', data: { info: '这是通过el属性获取挂载元素的outerHTML方式渲染。' }, template: '<div>这是template属性模板渲染。</div>' }) new Vue({ el: '.vapp-3', data: { info: '这是通过el属性获取挂载元素的outerHTML方式渲染。' } })
3、查看渲染结果
这是render属性方式渲染。
这是template属性模板渲染。
这是通过el属性获取挂载元素的outerHTML方式渲染。
二、独立构建和运行时构建
Vue.js 1.0,编译器需要依赖浏览器的DOM,所以无法将编译器和运行时分开。因此在Vue.js 1.0分发包中,编译器和运行时是打包在一起,都在浏览器端执行。
Vue.js 2.0,为了支持服务端渲染(server-side rendering),编译器不能依赖浏览器的DOM,所以必须将编译器和运行时分开。于是形成了独立构建(编译器 + 运行时)和运行时构建(仅运行时)。显而易见,运行时构建体积要小于独立构建。
1、模板编译器
模板编译器的职责是将模板字符串编译为纯JavaScript的渲染函数,即将<template>编译成render函数。
2、Vue.js的执行过程
包含编译过程和运行过程,在编译过程,编译器将字符串模板(template)编译为渲染函数(render)
在运行过程,调用渲染函数。
3、运行时构建
运行时构建指不能进行模板编译的Vue库。运行时构建不包含模板编译器,即不支持template选项,如果使用vue-loader和vueify预编译模板,只需要打包运行时,而不需要打包编译器。
运行时构建,可以用render选项,但它只在单文件组件中起作用,因为单文件组件的模板是在构建时预编译到render函数中,运行时构建只有独立构建大小的30%,只有16Kb min+gzip大小。
// 不需要编译器 new Vue({ render (h) { return h('div', this.hello) } })
4、独立构建
独立构建指能够将template模板或者从el挂载元素提取的模板编译成渲染函数的Vue库,独立构建包含模板编译器,可以用template选项实时编译模板。
// 需要编译器 new Vue({ template: '<div>{{ hello }}</div>' })
使用vue-cli生成项目时,会提醒使用哪种构建方式,npm包默认导出的是运行时构建,即runtime版本vue.runtime.common.js,如果想使用独立构建,需要在webpack.config.js中配置alias。
resolve: { alias: { vue: 'vue/dist/vue.js' } }
vue实例属性之el,template,render的更多相关文章
- vue实例属性之el,template,render--(转载)
转载链接:https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html 一.el,template,re ...
- Vue实例属性/方法/生命周期
一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...
- vue实例属性(vm.$els)
不需要表达式 参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:s ...
- es6下 vue实例属性template不能使用
esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...
- vue实例属性之methods和computed
我们可以把同一函数放在methods或者computed中,区别在于computed有缓存,计算属性只有在它的相关依赖发生改变时才会重新求值,即数据改变才会执行函数.而methods每当触发重新渲染时 ...
- vue实例属性的方法
1.$mount() 手动设置挂载点 eg:vm.$mount("#app") 2.$destroy() 销毁 eg:vm.$destroy(); 3.$forceUp ...
- Vue基础进阶 之 常用的实例属性
Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- Vue学习之vue实例中的数据、事件和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【sqli-labs】Less7
Less-7: 输出文件 sql导出文件语句 select * from table_test into outfile 'test.txt' 既然名字是输出文件,那肯定是和文件有关系. 首先,确保s ...
- burpsuite使用教程和实战详解(一)
1.最近做渗透测试,其实使用一种方式很难全面的对一个web或者app等安全服务器做安全评估,所以要尽可能的对网络安全的渗透测试有一个较全面的认知.不光要熟悉前端和 后天的编程,还有掌握基于这两种编程的 ...
- matlab提取wind底层数据库操作
首先需要安装navicat for SQL server 软件, 为了实现Matlab 通过JDBC方式连接Sqlserver数据库, 需要安装Sqlserver JDBC驱动. 地址: https: ...
- Error: Java VM internal error:Error Loading javai.dll
因为前几天的JMS测试,第一次写了loadrunner的脚本,感觉路一下子宽了. 知道loadrunner可以使用java写脚本,今天就试了一下,遇到了两个第一次写Java Vuser脚本普遍都会遇到 ...
- 饮冰三年-人工智能-linux-07 硬盘分区、格式化及文件系统的管理
先给虚拟机添加一个硬盘 通过fdisk -l sdb,查看磁盘内容 通过fdisk /sdb 来操作分区 创建一个新分区 创建第二个分区 创建第三个分区 创建扩展分区 再次创建分区,其实使用的是扩展分 ...
- JDK8 新特性流式数据处理
https://blog.csdn.net/canot/article/details/52957262
- [转] history.back()和history.go()的区别
Javascript:history.go()和history.back()的用法和区别 go(-1): 返回上一页,原页面表单中的内容会丢失:history.go(-1):后退+刷新:history ...
- [转] UniCode编码表
Unicode编码则是采用双字节16位来进行编号,可编65536字符,基本上包含了世界上所有的语言字符,它也就成为了全世界一种通用的编码,而且用十六进制4位表示一个编码,非常简结直观,为大多数开发者所 ...
- C# 会话,进程,线程,线程安全
会话->进程->线程 b/s网站中,每个用户的访问为一次会话,会话中包含CPU为用户在内存中开辟空间存储的会话信息, 如Session,进程,会话拥有一个进程,同一进程下可以拥有多个线程. ...
- django 视图函数返回queryset对象或日期对象至浏览器ajax接收的写法
class MyDateTimeEncode(json.JSONEncoder): def default(self, o): if isinstance(o, datetime): return o ...