筆試題：基于vue實作一個?件管理器組件，
需要效果圖：
要求:
- ?持串列和?格兩種視圖展??件
- ?持?件按照?件名排序
- ?持?件搜索
考察點:
- 對CSS布局的掌握
- 組件的抽象和組件間的資料通信
- 排序功能
- 查找功能
這里我們用外部引入vue.js的方式，創建htm頁面，引入vue.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
按要求完成頁面結構
<form id="main" v-cloak>
<div >
<!-- 這兩個按鈕用于轉換頁面布局形式，使得UL布局正確顯示 -->
<a v-bind: v-on:click="layout = 'list'">
串列視圖
</a>
<a v-bind: v-on:click="layout = 'grid'">
網格視圖
</a>
<input type="text" @input="search" v-model="searchString" placeholder="請輸入搜索內容">
</div>
<!-- 選擇哪種布局取決于 layout系結 -->
<ul v-if="layout == 'grid'" >
<!-- 搜索時資料渲染 -->
<div v-if="searchData">
<li v-for="a in searchData">
<div>{{a}}</div>
</li>
</div>
<!-- 正常資料渲染 -->
<div v-else>
<li v-for="a in articles">
<div>{{a}}</div>
</li>
</div>
</ul>
<ul v-if="layout == 'list'" >
<!-- 搜索時資料渲染 -->
<div v-if="searchData">
<li v-for="a in searchData">
<p>{{a}}</p>
</li>
</div>
<!-- 正常資料渲染 -->
<div v-else>
<li v-for="a in articles">
<p>{{a}}</p>
</li>
</div>
</ul>
</form>
頁面搭建完成后設定css樣式：
[v-cloak]{
display: none;
}
* {
margin: 0;
padding: 0;
}
a,
a:visited {
outline: none;
}
a:hover {
text-decoration: none;
}
/*-------------------------
導航欄樣式
--------------------------*/
.bar {
border-radius: 5px;
width: 580px;
padding: 10px;
position: relative;
line-height: 1;
}
.bar a {
width: 105px;
height: 35px;
display: inline-block;
text-decoration: none !important;
margin-right: 5px;
border-radius: 5px;
cursor: pointer;
background-color: #ccc;
line-height: 35px;
text-align: center;
}
.bar input {
width: 300px;
line-height: 19px;
padding: 11px 0;
text-align: left;
font-size: 14px;
color: #738289;
outline: none;
text-indent: 40px;
}
/*-------------------------
串列布局
--------------------------*/
ul.list {
list-style: none;
width: 500px;
text-align: left;
}
ul.list li {
border-bottom: 1px solid #ddd;
padding: 10px;
overflow: hidden;
cursor: pointer;
}
/*-------------------------
網格布局
--------------------------*/
ul.grid {
list-style: none;
width: 570px;
text-align: left;
}
ul.grid li {
margin: 5px 5px 0 0;
float: left;
cursor: pointer;
width: 100px;
height: 100px;
border: 1px solid #e8e8e8;
box-sizing: border-box;
}
/*------------------
超出隱藏
------------------*/
ul.grid li div {
text-align: center;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
接下來就是頁面的資料互動：
var demo = new Vue({
el: '#main',
data: {
// 布局形式可能的值為grid或者list
layout: 'grid',
articles: [
"test3.txt", "test4.txt", "test2.txt", "testtest5.txt", "test1.txt"
],
searchString: "",
searchData: null
},
methods: {
// 資料串列冒泡排序
sortArticles() {
let arr = this.articles
let temp;
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1; j++) {
if (arr[j].substr(-5, 1) > arr[j + 1].substr(-5, 1)) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
},
// 搜索框搜索功能
search() {
let searchString = this.searchString
console.log(searchString, "searchString");
if (searchString) {
this.searchData = https://www.cnblogs.com/prince-heng/p/this.articles.filter(item => {
console.log(item,"item")
return item.indexOf(searchString) > -1
})
console.log(this.searchData, "searchData");
}
}
},
created() {
this.sortArticles()
}
})
頁面效果：
總結：
-
功能比較簡單，非專案頁面面試題，直接引入外部的vue檔案，不需要用腳手架搭建專案，
-
頁面開始，首先要搭建好基礎頁面，根據需求自定義模擬資料，渲染頁面，
-
頁面的tab切換，如果用腳手架搭建專案引入ui組件庫都會有tab欄切換組件，在這里我們利用vue的v-bind動態系結兩種表格樣式，通過v-on點擊事件切換當前表格樣式，通過v-if/v-else
去判斷當前顯示的表格形式，用v-for回圈渲染資料， -
注意：可以看到，頁面中使用了v-cloak指令，當網路較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼，我們可以使用 v-cloak 指令來解決這一
問題，而在工程化專案中，我們的頁面內容是通過路由掛載實作的，因此就用不到該指令， -
頁面完成之后，就可以進行css樣式調整，因人而異吧，可實作的css樣式太多了，我這里用的是最簡單的css樣式，逐級調整，沒復雜的布局之類的，這里就不做贅述，
-
最后就是簡單的資料互動嘍，通過截取資料中的數字，進行冒泡排序，
-
搜索功能的話是利用用陣列的filter方法將陣列中符合我們搜索條件的項拿出來進行渲染實作搜索功能，
以上就是此次面試題的所有代碼，本人資歷不深，如有不正確的地方，歡迎指教，謝謝 ！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/14440.html
標籤：其他
上一篇：頁面性能
下一篇：求職面試，你不知道的面試官思維