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'}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249845.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql8的坑

plugin caching_sha2_password could not be loaded 我在mac上用Sequel Pro连数据库的时候&#xff0c;会报出以上错误&#xff0c;这是应为8.0.11把身份认证插件改成了 caching_sha2_password &#xff0c;而客户端没法使用此插件。 这是我们只要用命令行进去mysql&#xff0c…

c/c++ 继承与多态 文本查询的小例子(非智能指针版本)

问题&#xff1a;在上一篇继承与多态 文本查询的小例子&#xff08;智能指针版本&#xff09;在Query类里使用的是智能指针&#xff0c;只把智能指针换成普通的指针&#xff0c;并不添加拷贝构造方法&#xff0c;会发生什么呢&#xff1f; 执行时&#xff0c;代码崩掉。 分析下…

day19_生成器

20180730 初次上传 20180731 更新&#xff0c;4、列表生成式&#xff0c;以及部分注释 #!/usr/bin/env python # -*- coding:utf-8 -*-# ********************day19_生成器 ******************* # ********************day19_生成器 ******************* # *******************…

HTML渲染过程详解

由于本人对http协议以及dns对url的解析问题并不了解&#xff0c;所以这里之探讨url请求加载到浏览器端时&#xff0c;浏览器对html的解析到呈现过程&#xff0c;后来经过几位道友分享&#xff0c;整理了一下url解析的过程&#xff0c;如下&#xff1a; 用户输入url地址&#x…

grid布局

CSS Grid 布局CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同&#xff0c;CSS Grid 布局是一个二维布局系统&#xff0c;也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素&#xff08;成为 Grid Items 网格项…

vue之router-view组件的使用

开发的时候有时候会遇到一种情况&#xff0c;比如 &#xff1a;点击这个链接跳转到其他组件的情况&#xff0c;通常会跳转到新的页面&#xff0c;蛋是&#xff0c;我们不想跳转到新页面&#xff0c;只在当前页面切换着显示&#xff0c;那么就要涉及到路由的嵌套了&#xff0c;也…

go 学习Printf

package main import "fmt" import "os" type point struct {x, y int } func main() { //Go 为常规 Go 值的格式化设计提供了多种打印方式。例如&#xff0c;这里打印了 point 结构体的一个实例。p : point{1, 2}fmt.Printf("%v\n", p) // {1 2…

博客园使用latex编辑公式

如何开启数学公式编辑功能 开启方法见下链接https://www.cnblogs.com/cmt/p/3279312.html 功能 支持数学公式块支持文中数学公式DEMO $$ f(n) \begin{cases}\frac{n}{2}, & \text{if $n$ is even} \\3n1, & \text{if $n$ is odd}\end{cases} $$ 以上的代码产生如下的公…

console.dir有很多浏览器,系统的兼容性问题,不要随便用!

console.dir有很多浏览器&#xff0c;系统的兼容性问题&#xff0c;不要随便用&#xff01; 要使用console.log();转载于:https://www.cnblogs.com/bluestear/p/9400356.html

go 区分指针

先看一段代码 先放一段代码&#xff0c;人工运行一下&#xff0c;看看自己能做对几题&#xff1f; package mainimport "fmt"func main() {var a int 1 var b *int &a var c **int &b var x int *b fmt.Println("a ",a) fmt.Println("&a…

ajax和axios、fetch的区别

1.jQuery ajax $.ajax({type: POST,url: url,data: data,dataType: dataType,success: function () {},error: function () {} });传统 Ajax 指的是 XMLHttpRequest&#xff08;XHR&#xff09;&#xff0c; 最早出现的发送后端请求技术&#xff0c;隶属于原始js中&#xff0c…

函数函数sigaction、signal

函数函数sigaction 1. 函数sigaction原型&#xff1a; int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 分析&#xff1a; 参数 signum &#xff1a;要捕获的信号。参数act&#xff1a;truct sigaction 结构体&#xff0c;后面具体讲解传入…

使用SQL Server连接xml接口,读取并解析数据

--数据源格式&#xff0c;放到任意程序中部署接口即可--<Data xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd"http://www.w3.org/2001/XMLSchema"> --<Peoples> --<People> --<Name>张三</Name> --<S…

mac 卸载编辑器卸不干净

Configuration~/Library/Preferences/Caches~/Library/Caches/Plugins~/Library/Application Support/Logs~/Library/Logs/转载于:https://www.cnblogs.com/smzd/p/10114540.html

vue中使用axios最详细教程

前提条件&#xff1a;vue-cli 项目 安装&#xff1a; npm npm 在main.js导入&#xff1a; // 引入axios&#xff0c;并加到原型链中 import axios from axios; Vue.prototype.$axios axios; import QS from qs Vue.prototype.qs QS;封装好的axios,拿走不送&#xff1a;&am…

Java 类型转换String,List,Map,Array

1. JsonString转为Map String jsoNStr "{\n" "\t\"TestArray\": [\"1\", \"2\", \"3\"]\n" "}";Map map JSON.parseObject(jsoNStr,Map.class);2.Object转为JsonArray(得保证obj是个Array数组&#x…

关于固件

固件(Firmware)就是写入EROM或EPROM(可编程只读存储器)中的程序&#xff0c;通俗的理解就是“固化的软件”&#xff0c;台港澳称为“韧体”。更简单的说&#xff0c;固件就是BIOS的软件&#xff0c;但又与普通软件完全不同&#xff0c;它是固化在集成电路内部的程序代码&#x…

React-Native 指定模拟器RUN-IOS

react-native run-ios --simulator "iPhone 7” 转载于:https://www.cnblogs.com/smzd/p/10185263.html

vue和element-ui使用

上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242 这一篇主要是创建一个vue项目并结合饿了么框架element-ui。 1.先创建vue项目&#xff0c;我准备把项目放在e盘下&#xff1a;E:\Work\RegisterProject&#xff1b; 命令行进入这个目录&#xff1a; 创…

javaweb学习6——自定义标签

声明&#xff1a;本文只是自学过程中&#xff0c;记录自己不会的知识点的摘要&#xff0c;如果想详细学习JavaWeb&#xff0c;请到孤傲苍狼博客学习&#xff0c;JavaWeb学习点此跳转 本文链接&#xff1a;https://www.cnblogs.com/xdp-gacl/p/3916946.html https://www.cnblogs…