# 小知識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>
```