vue前端面试笔试总结
1. 应用filters选项定义本地过滤器，截取新闻标题“每天编程一小时大型IT公益活动”的前9个字符，后面的字符用“……”代替。<div id="box"><span>{{title | subStr}}</span></div><script type="text/javascript">var demo = new Vue({el
·
1. 应用filters选项定义本地过滤器，截取新闻标题“每天编程一小时大型IT公益活动”的前9个字符，后面的字符用“……”代替。
<div id="box">
<span>{{title | subStr}}</span>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
title : '每天编程一小时大型IT公益活动',
},
filters : {
subStr : function(value){
if(value.length > 9){
return value.substr(0,9)+"......";
}else{
return value;
}
}
}
});
</script>
2. 应用Prop和$emit实现父子组件之间数据的传递。定义一个按钮和一张图片，通过单击按钮实现放大图片的功能。
<div id="example">
<my-font :url="url" :width="width" v-on:enlarge="width += $event">
</my-font>
</div>
<script type="text/javascript">
Vue.component('my-font', {
props : ['url','width'],
template : '<div> \
<button v-on:click="action(10)">放大图片</button> \
<img :src="url" :width="width"> \
</div>',
methods : {
action : function(value){
this.$emit('enlarge',value);
}
}
})
var vm = new Vue({
el:'#example',
data: {
url : '2-4/images/js.png',
width : 350
}
})
</script>
3. 实现文字隐藏和显示的过渡效果。单击“隐藏文字”按钮隐藏文字，同时“隐藏文字”按钮变为“显示文字”按钮，单击“显示文字”按钮显示文字，同时“显示文字”按钮变为“隐藏文字”按钮。
<style type="text/css">
.fade-enter-active, .fade-leave-active{
transition: opacity 3s
}
.fade-enter, .fade-leave-to{
opacity: 0
}
</style>
<div id="box">
<input type="button" :value="bText" v-on:click="toggle">
<transition name="fade">
<div v-show="show">
一切有为法，如梦幻泡影
</div>
</transition>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
bText : '隐藏文字',
show : true
},
methods : {
toggle : function(){
this.bText == '隐藏文字' ? this.bText = '显示文字' : this.bText = '隐藏文字';
this.show = !this.show;
}
}
});
</script>
4. 应用动态组件实现一个切换文字的横向选项卡。页面中有“HTML”、“CSS”和“JavaScript”3个选项卡，默认显示“HTML”选项卡的内容，当鼠标单击不同的选项卡时，页面下方会显示不同的文字描述。
<style type="text/css">
@charset "utf-8";
body {
width: 600px;
margin: 100px auto 0 auto;
font-family: Arial, Helvetica;
font-size: small;
line-height:1.6;
background:#FF9966;
}
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
#tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after {
background: #fff;
}
#tabs a:focus {
outline: 0;
}
#tabs a::after {
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
transform: skew(10deg);
border-radius: 0 5px 0 0;
}
#tabs .current a, #tabs .current a::after {
background: #fff;
z-index: 3;
}
#content {
background: #fff;
padding: 2em;
height: 120px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p {
margin: 0 0 15px 0;
}
#about {
color: #999;
}
#about a {
color: #eee;
}
</style>
<div id="example">
<ul id="tabs">
<li :class="{current:current=='htm'}"><a href="#" @click="current='htm'">HTML</a></li>
<li :class="{current:current=='css'}"><a href="#" @click="current='css'">CSS</a></li>
<li :class="{current:current=='js'}"><a href="#" @click="current='js'">JavaScript</a></li>
</ul>
<div id="content">
<component :is="current"></component>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#example',
data : {
current : 'htm'
},
components : {
htm : {
template : `<div id="tab1">
<h2>超文本标记语言</h2>
<p>HTML语言（Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言）是一种文
本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML
文件。</p>
</div>`
},
css : {
template : `<div id="tab2">
<h2>层叠样式表</h2>
<p>CSS是Cascading Style Sheet（层叠样式表）的缩写，是用于控制网页样式并允许将样式信息与网页
内容分离的一种标记性语言。</p>
</div>`
},
js : {
template : `<div id="tab3">
<h2>脚本语言</h2>
<p>JavaScript是一种解释型的、基于对象的脚本语言，其核心已经嵌入到目前主流的Web浏览器中。虽然
平时应用最多的是通过JavaScript实现一些网页特效及表单数据验证等功能，但JavaScript可以实现的功能远
不止这些。</p>
</div>`
}
}
});
</script>
5. 在三个下拉菜单中实现年、月、日的联动效果。
<div id="box">
<div>
<select v-on:change="getY">
<option v-for="value in year" v-bind:value="value">{{value}}年</option>
</select>
<select v-on:change="getM">
<option v-for="value in month" v-bind:value="value">{{value}}月</option>
</select>
<select>
<option v-for="n in getD" v-bind:value="n">{{n}}日</option>
</select>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data:{
y : 1990,
m : 1,
year : [],
month : []
},
created : function(){
for(var i = 1990; i <= 2010; i++){
this.year.push(i);
}
for(var i = 1; i <= 12; i++){
this.month.push(i);
}
},
methods : {
getY : function(e){
this.y = e.target.value;
},
getM : function(e){
this.m = e.target.value;
}
},
computed : {
getD : function(){
if(this.m == 4 || this.m == 6 || this.m == 9 || this.m == 11){
var day = 30;
}else if(this.m == 2){
if((this.y%4 == 0 && this.y%100 != 0) || (this.y%400 == 0)){
var day = 29;
}else{
var day = 28;
}
}else{
var day = 31;
}
return day;
}
}
});
</script>
6. 应用动态组件和过渡效果实现一个切换图片的纵向选项卡。页面左侧有4个选项卡，默认显示第一个选项卡对应的图片。当鼠标指向不同的选项卡时，页面右侧会显示不同的图片，在变换图片时有过渡的效果。
<style type="text/css">
*{
margin: 0;
padding:0;
font-family: "微软雅黑";
box-sizing:border-box;
}
img{
width: 580px;
height: 380px;
}
body{
background: url(./img/bg.gif);
}
p{
width:800px;
margin: 10px auto;
}
::selection{
background: #f00;
color: #fff;
}
span{
cursor: pointer;
text-decoration: underline;
color: blue;
}
.box{
max-width: 800px;
height: 400px;
margin: 10px auto;
background: #fff;
box-shadow: 0 2px 2px #f2f2f2;
position: relative;
}
#tab{
width: 200px;
height:400px;
}
#tab_left,#tab_content{
margin: 10px;
background: #fff;
}
#tab,#tab_content{
float: left;
}
#tab_left{
width:180px;
height:380px;
}
#tab_left li{
list-style-type: none;
font-size: 20px;
text-align: center;
border-top: 1px solid #ccc;
}
#tab_left li:last-child{
border-bottom:1px solid #ccc;
}
#tab_left li a{
color: #000;
text-decoration: none;
line-height: 94px;
width: 180px;
height: 94px;
display: block;
background: #fff;
text-shadow:1px 1px 2px #ccc;
border-left: 1px solid #ccc;
}
#tab_left li a:hover{
background: #f1f1f1;
text-decoration: none;
border-left: 1px solid #f00;
opacity: 0.4;color: #f00;
text-shadow:1px 1px 2px #ccc;
}
#tab_content{
width: 580px;
height: 380px;
overflow: hidden;
}
.fade-enter-active, .fade-leave-active{
transition: opacity .3s
}
.fade-enter, .fade-leave-to{
opacity: 0
}
</style>
<div id="example">
<div class="box">
<div id="tab">
<ul id="tab_left">
<li @mouseover="current='one'"><a href="#">图片1</a></li>
<li @mouseover="current='two'"><a href="#">图片2</a></li>
<li @mouseover="current='three'"><a href="#">图片3</a></li>
<li @mouseover="current='four'"><a href="#">图片4</a></li>
</ul>
</div>
<div id="tab_content">
<transition name="fade">
<component :is="current"></component>
</transition>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#example',
data : {
current : 'one'
},
components : {
one : {
template : '<div><img src="./img/1.jpg"></div>'
},
two : {
template : '<div><img src="./img/2.jpg"></div>'
},
three : {
template : '<div><img src="./img/3.jpg"></div>'
},
four : {
template : '<div><img src="./img/4.jpg"></div>'
}
}
});
</script>
7. 实现改变文本颜色的功能。每间隔1秒钟，使文本颜色在红、绿、蓝三种颜色之间进行变换。
<div id="box">
<span v-bind:style="{color : color[i]}">变换颜色的文本</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data : {
color : ['red','green','blue'],
i : 0
},
mounted : function(){
setInterval(this.changeColor,1000);
},
methods : {
changeColor : function(){
this.i++;
this.i = this.i == this.color.length ? 0 : this.i;
}
}
});
</script>
8. 应用自定义指令实现如下功能：单击“单击显示下拉菜单”按钮弹出一个下拉菜单，单击页面中除了下拉菜单本身之外的其他区域后隐藏下拉菜单内容。
<style type="text/css">
.box{
width:126px;
}
button{
color:#FFFFFF;
background:#3366FF;
border:0;
padding:5px;
text-align:center;
font-size:14px;
border-radius:5px;
cursor:pointer;
outline:none;
}
.content{
width:100%;
height:100px;
margin:6px 0;
font-size:12px;
background:#FFFFFF;
border-radius:5px;
box-shadow:0 1px 3px;
}
.content p{
padding:10px;
}
</style>
<div id="example">
<div class="box" v-clickout="hideContent">
<button @click="show = !show">单击显示下拉菜单</button>
<div class="content" v-show="show">
<p>下拉菜单的内容，单击外面区域关闭内容</p>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#example',
data: {
show : false
},
methods: {
hideContent: function(){
this.show = false;
}
},
directives: {
clickout: function(el,binding){
function action(e){
if(el.contains(e.target)) return false;
if(binding.expression) binding.value();
}
document.addEventListener('click',action);
}
}
})
</script>
9. 购物车中的商品列表如下：
| :----😐 :----: | :----: |
| 商品名称 | 单价 | 数量 |
| OPPO R17 | 3199 | 3 |
| 华为P10 | 2699 | 2 |
| iPhone 7 | 5199 | 1 |
输出商品列表并应用计算属性统计购物车中的商品总价。
<style type="text/css">
table{
border:1px solid #CCCCCC;
border-collapse:collapse;
}
th,td{
padding:8px 16px;
border:1px solid #CCCCCC;
text-align:center;
}
th{
background:#f6f6f6;
color:#5d6c6d;
font-weight:500;
white-space:nowrap}
</style>
<div id="example">
<table>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody v-for="value in shop">
<tr>
<td>{{value.name}}</td>
<td>{{value.price | twoDecimal}}</td>
<td>{{value.count}}</td>
<td>{{value.price*value.count}}</td>
</tr>
</tbody>
</table>
<p>合计：{{totalprice}}</p>
</div>
<script type="text/javascript">
var exam = new Vue({
el:'#example',
data:{
shop : [{
name : 'OPPO R17',
price : 3199,
count : 3
},{
name : '华为P10',
price : 2699,
count : 2
},{
name : 'iPhone 7',
price : 5199,
count : 1
}]
},
computed : {
totalprice : function(){
var total = 0;
this.shop.forEach(function(s){
total += s.price * s.count;
});
return '¥'+total;
}
}
})
</script>
11. 一日三餐的健康食谱如下：
早餐搭配：鸡蛋+全麦面包片+蔬菜汁
早餐一定要营养均衡搭配，鸡蛋富含蛋白质，为身体补充所需能量，面包片增加饱腹感，
蔬菜汁能够促进肠胃的蠕动，清理肠道，为迎接新的一天做好准备。
午餐搭配：鸡胸肉+蔬菜+海鲜
脱脂鸡肉的热量较低，适合减肥女性，蔬菜是一日三餐都必不可少的，可以为人体补充足
够的维生素，海鲜可以选择鱼类，鱼肉的蛋白质较高。
晚餐搭配：稀饭+水果+酸奶
晚餐尽量选择低脂、易消化的食物，且注意不宜吃的过饱。酸奶可以促进肠胃蠕动，稀饭
和水果容易消化。
将上述一日三餐的健康食谱以分页的形式进行显示。当单击不同的页码时会显示不同的数
据。
<style type="text/css">
.page {
width: 100%;
background-color: #fff;
padding: 5px;
text-align: center;
margin-top: 10px;
box-sizing:border-box;
clear:both;
}
.pagelist {
font-size: 0;
background: #fff;
height: 50px;
line-height: 50px;
}
.pagelist span {
font-size: 14px;
}
.pagelist .jump {
border: 1px solid #ccc;
padding: 5px 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
margin-left: 5px;
}
.pagelist .bgprimary {
cursor: default;
color: #fff;
background: #337ab7;
border-color: #337ab7;
}
.pagelist .jump.disabled{
pointer-events: none;
background: #ddd;
}
.container{
margin:0 auto;
width:500px;
}
.box{
width:500px;
margin:3px;
float:left;
}
.box ul{
list-style:none;
}
.box ul li{
font-family:"微软雅黑";
margin:20px auto;
}
.box ul li:first-child{
font-size:18px;
font-weight:bolder;
color:#669900
}
</style>
<div id="wrapper">
<div class="container">
<div class="box">
<ul>
<li>早餐搭配</li>
<li>鸡蛋+全麦面包片+蔬菜汁</li>
<li> 早餐一定要营养均衡搭配，鸡蛋富含蛋白质，为身体补充所需能量，面包片增加饱腹感，蔬菜汁能够促进肠胃的蠕动，清理肠道，为迎接新的一天做好准备。</li>
</ul>
</div>
<div class="box">
<ul>
<li>午餐搭配</li>
<li>鸡胸肉+蔬菜+海鲜</li>
<li> 脱脂鸡肉的热量较低，适合减肥女性，蔬菜是一日三餐都必不可少的，可以为人体补充足够的维生素，海鲜可以选择鱼类，鱼肉的蛋白质较高。</li>
</ul>
</div>
<div class="box">
<ul>
<li>晚餐搭配</li>
<li>稀饭+水果+酸奶</li>
<li> 晚餐尽量选择低脂、易消化的食物，且注意不宜吃的过饱。酸奶可以促进肠胃蠕动，稀饭和水果容易消化。</li>
</ul>
</div>
</div>
<div class="page" v-show="show">
<div class="pagelist">
<span class="jump" :class="{disabled:pstart}" @click="jumpPage(current_page-1)">上一页</span>
<span class="jump" v-for="num in pages" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
<span class="jump" :class="{disabled:pend}" @click="jumpPage(current_page+1)">下一页</span>
</div>
</div>
</div>
<script type="text/javascript">
var newlist = new Vue({
el: '#wrapper',
data: {
items: [],
current_page: 1,
each_num: 1
},
mounted: function(){
this.items = document.querySelectorAll('.box');
for(var i = 0; i < this.items.length; i++){
if(i < 1){
this.items[i].style.display = 'block';
}else{
this.items[i].style.display = 'none';
}
}
},
computed:{
show:function(){
return this.pages && this.pages !=1
},
pstart: function() {
return this.current_page == 1;
},
pend: function() {
return this.current_page == this.pages;
},
count: function () {
return this.items.length;
},
pages: function(){
return Math.ceil(this.count/this.each_num);
}
},
methods: {//定义页面跳转方法
jumpPage: function (n) {
this.current_page = n;
if(this.current_page < 1){
this.current_page = 1;
}
if(this.current_page > this.pages){
this.current_page = this.pages;
}
for(var i = 0; i < this.items.length; i++){
this.items[i].style.display = 'none';
}
var start = (this.current_page - 1) * this.each_num;
var end = start + this.each_num;
end = end > this.count ? this.count : end;
for(var i = start; i < end; i++){
this.items[i].style.display = 'block';
}
}
}
})
</script>
我是程序员峰峰，我们一起学习，共同进步。感谢峰峰博客
前往低代码交流专区
更多推荐
10
0- 0
已为社区贡献2条内容
所有评论(0)