大连学校网站建设,商丘市做网站的公司,淄博网站建设电话,怎么建设局域网网站一、el#xff0c;template#xff0c;render属性优先性 当Vue选项对象中有render渲染函数时#xff0c;Vue构造函数将直接使用渲染函数渲染DOM树#xff0c;当选项对象中没有render渲染函数时#xff0c;Vue构造函数首先通过将template模板编译生成渲染函数#xff0c;然…一、eltemplaterender属性优先性 当Vue选项对象中有render渲染函数时Vue构造函数将直接使用渲染函数渲染DOM树当选项对象中没有render渲染函数时Vue构造函数首先通过将template模板编译生成渲染函数然后再渲染DOM树而当Vue选项对象中既没有render渲染函数也没有template模板时会通过el属性获取挂载元素的outerHTML来作为模板并编译生成渲染函数。 换言之在进行DOM树的渲染时render渲染函数的优先级最高template次之且需编译成渲染函数而挂载点el属性对应的元素若存在则在前两者均不存在时其outerHTML才会用于编译与渲染。 1、写html文件
div classvapp-1{{ info }}/div
div classvapp-2{{ info }}/div
div classvapp-3{{ info }}/div2、写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 mingzip大小。
// 不需要编译器
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}
}
