Vue基础(4)组件模板的几种写法,及优化方式

本文介绍了Vue组件模板的多种写法,包括单引号换行使用反斜杠、反引号写法、`template`标签以及`script`类型为`text/x-template`的写法。特别提到了`.vue`单文件组件作为常用的解决方案。同时,文章还讨论了Vue的`is`属性用于解决组件标签不规范的问题。最后,提出了网站优化建议,如CDN加速和减少DOM操作以降低运行消耗。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组件模板语法:
template 单引号换行用 \ 反斜杠
template: '

\

haha{{name}}

\ ',

反引号写法:
template: `

haha{{name}}

`,

template标签写法:

6666

template 不会被渲染出来

script写法 type="text/x-template"固定写法,必须有

终极方案(常用方案) .vue 单文件组件

vue注意事项: 标签嵌套如果不规范,vue不会写入进去。 Vue is属性可以让一个标签解析成对应的组件(填属性名),解决标签不规范的问题

//网站优化
//1.CDN加速,全球内容分布系统
//2.减少DOM操作

		//Vue也做减少DOM的操作,虚拟DOM 创建了一个VNODE对象
		//多个虚拟节点组成了虚拟DOM 然后依次渲染
		
		//原生减少DOM操作
		//innerHTML就是DOM操作,减少DOM操作就是原理就是操作完然后一次性添加
			var uli = document.getElementById('uli');
			//文档碎片: JS端,不是DOM操作
			var frag = document.createDocumentFragment();
			var str = '';
// 			for(let i = 0;i<20;i++){
// 				uli.innerHTML += "<li>"+i+"</li>"
// 			}
			//更好的方法
// 			for(let i = 0;i<20;i++){
// 				str += "<li>"+i+"</li>"
// 			}
// 			//只操作一次DOM
// 			uli.innerHTML +=str;

			for(var i = 0;i < 100;i++){
				var li = document.createElement('li');
				li.innerHTML = i;
				frag.appendChild(li);
			}
			uli.appendChild(frag);

减少DOM操作,减少运行消耗。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值