# 小知识1
## 一、常见的菜单列表
我们以一个菜单的案例展开，先来看一个平常程序员怎么常规的vue文件如何写？
以element-ui为基础组件的部分代码
```
<el-row :span="24">
<el-col span="8" @click="event1">
<i class="icon-caidan1" :style="{backgroundColor:color1}"></i>
<p>菜单1</p>
</el-col>
<el-col span="8" @click="event2">
<i class="icon-caidan2" :style="{backgroundColor:color2}"></i>
<p>菜单2</p>
</el-col>
<el-col span="8" @click="event3">
<i class="icon-caidan3" :style="{backgroundColor:color3}"></i>
<p>菜单3</p>
</el-col>
<el-col span="8" @click="event4">
<i class="icon-caidan4" :style="{backgroundColor:color4}"></i>
<p>菜单4</p>
</el-col>
</el-row>
```
这就是大多数人们写的代码，有着大量的重复代码，而且难以高效的维护，如果让再加10个菜单，他就会ctrl+c/ctrl+v复制10个出来，代码量特别的大
## 二、数据驱动视图
>（数据+模版=视图）
我们分析代码发现有很多重复的部分，无疑是改变了几个关键的信息
- 图标
- 标题
- 背景色
- 点击事件
- 其他参数
我们把上述的参数具体为了一个对象数组，也就是我们说的(数据层)
```
[
{
title:'菜单1'，
icon:'icon-caidan1',
event:'event1,
style:{
backgroundColor:'color1'
color:'color1'
}
}
...
]
```
我们想想如果用循环的方式遍历这个数组对象，把相关的关键内容填充到相应的位置，换言之就是插入到我们的卡槽中,我们接下来构建我们的卡槽(模版层)
```
<el-row :span="24" v-for="(item,index) in list" :key="index">
<el-col span="8" @click="goLink(item)">
<i :class="item.icon" :style=loadStyle(item)></i>
<p v-text="item.title"></p>
</el-col>
</el-row>
```
接下来我们写goLink和loadStyle，逻辑写起来比较简单
```
...
event1(item){
//每一个菜单对应的事件逻辑
},
...
goLink(item){
this[item.event](item);
},
loadStyle(item){
const style = item.style;
return style
}
```
- list就是我们前面构建的数组对象
- goLink我们点击事件的处理方法，并将item当前数据对象传入方法
- loadStyle我们样式加载处理方法
接下来我们将数据和模版组合到一起就呈现我们看到的视图了，从而达到了数据驱动视图的质量高、维护性高的优点
再接着我们上面的老板的需求，让我们加10个20个都不用去写重复代码，只要在数据数组中配置好要加的东西即可
## 番外
在js里面，经常需要使用js往页面中插入html内容。
比如这样：
```
var number = 123;
$('#d').append('<div class="t">'+number+'</div>');
```
- 如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
- 给script设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="user_info"></div>
</body>
<script type="text/tmplate" id="tmplate">
<div>
<ul>
<li>姓名：{{name}}</li>
<li>年龄：{{age}}</li>
<li>电话：{{phone}}</li>
</ul>
</div>
</script>
<script type="application/javascript">
//实例参数
var user = { name: "陈立明", age: 23, phone: "15932582632"};
//模板
var template = document.getElementById("tmplate").innerHTML;
//使用mustache.js进行模板解析填充数据
var view = template.replace('{{name}}',user.name)
view = view.replace('{{age}}',user.age)
view = view.replace('{{phone}}',user.phone)
document.getElementById("user_info").innerHTML = view;
</script>
</html>
```