2024年Web前端最全Vue实例属性之el,template,render(1),小红书 前端 面试

最后

除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

el: ‘.vapp-2’,

data: {

info: ‘这是通过el属性获取挂载元素的outerHTML方式渲染。’

},

template: ‘

这是template属性模板渲染。

})

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的渲染函数,即将编译成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: ‘

{{ hello }}

})

使用vue-cli生成项目时,会提醒使用哪种构建方式,npm包默认导出的是运行时构建,即runtime版本vue.runtime.common.js,如果想使用独立构建,需要在webpack.config.js中配置alias。

学习笔记

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分

**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式

HTML5 /CSS3

**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性

**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型

JavaScript

**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串

Script数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串

[外链图片转存中…(img-By0js3Ku-1715383122794)]

  • 29
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值