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

63 阅读 0 评论 42 点赞

我是靠谱客的博主曾经小白菜，这篇文章主要介绍Vue基础（4）组件模板的几种写法,及优化方式，现在分享给大家，希望可以做个参考。

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

haha{{name}}

反引号写法：
template: `

haha{{name}}

template标签写法：

6666

template 不会被渲染出来

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

终极方案（常用方案） .vue 单文件组件。

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

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

复制代码

1
2
3
4
5
6

//Vue也做减少DOM的操作,虚拟DOM 创建了一个VNODE对象
//多个虚拟节点组成了虚拟DOM 然后依次渲染
//原生减少DOM操作
//innerHTML就是DOM操作,减少DOM操作就是原理就是操作完然后一次性添加

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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);