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

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

haha{{name}}

反引号写法：
template: `

haha{{name}}

template标签写法：

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操作，减少运行消耗。

最后

以上就是曾经小白菜为你收集整理的Vue基础（4）组件模板的几种写法,及优化方式的全部内容，希望文章能够帮你解决Vue基础（4）组件模板的几种写法,及优化方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。