vue实例练习
1.简单的计数功能
2.实现的图片的切换
3.实现记事本功能(未完待续)
涉及知识点
学完vue最基础部分即可
视频学习来源:b站黑马程序员
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的回顾一波</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
#border
{
positon:relative;
display:inline-block;
width:100%;
text-align:center;
border:0.5px solid black;
border-radius:4px 4px 4px 4px;
}
.matter
{
background:pink;
display:inline-block;
width:100%;
}
.border1
{
display:flex;
width:100%;
height:100px;
justify-content:center;
border-radius:5px 5 5 5px;
}
#flex2
{
display:flex;
width:100%;
height:500px;
justify-content:center;
}
.border2
{
border:none;
border-radius:5px 5px 5px 5px;
width:70px;height:60px;position:relative;float:left;background:lightgray;
}
.border3
{
border:none;
border-radius:5px 5px 5px 5px;
background:lightgray;width:70px;height:60px;position:relative;float:right;
}
.question
{
font-size:12px;
}
.answer
{
color:orange;
}
img
{
height:400px;
background:blue;
}
.right
{
position:relative;
display:inline-block;
width:40px;
height:50px;
float:right;
}
.left
{
position:relative;
display:inline-block;
width:40px;
height:50px;
float:left;
}
.table
{
display:inline-block;
width:210px;
background:#f5f5f5;
border:0.2px lightgrey solid;
}
.input
{
background:white;
width:206px;
}
</style>
</head>
<body >
<div id="border" style="margin-right:0;">
鹅是猪吧?虽看得不快,却还是忘掉了看过的那么多知识点。
</div>
<div id='app'>
<p style="color:indianred ">Please remember:ol为有序列表,ul为无需列表</p>
<ol style='margin-left:0;'>
<li v-for="words in line">{{words.text}}</li>
</ol>
<!--实例1-->
<p class="matter">敲重点1:Vue实现简单是计数器-点击加减即可计数(ps:这里是简单的Vue实例,知道基础methods,,,就可以上手)</p>
<div class="border1" >
<div id='flex'>
<button @click="add" class="border2"style="">+</button>
<span style=" display:inline-block;width:70px;height:60px;position:relative;text-align:center;line-height:60px;background:whitesmoke;">{{data1}}</span>
<button @click="reduce" class="border3"style="">-</button>
</div>
</div>
<!--问题区-->
<ul >
<li>
<p class="qustion">怎样让实现按钮没有边框且为自定义的圆角矩形?</p>
<p class="answer">1.设置border:none;border-radius:Ypx Ypx Ypx Ypx;从左上角开始为顺时针方向设置(ps:也可以是百分数)</p>
</li>
<li>
<p class="qustion">怎样让span内的文字居中(水平垂直)对齐?</p>
<p class="answer">设置display:inline-block;然后text-align:center;(设置水平对齐,只适用于块级元素)最后:line_height: Xpx;(设置行高,即可垂直居中)</p>
</li>
</ul>
<p style="color:indianred ">please remember:浮动的时候要相对于父节点浮动滴</p>
<!--实例2-->
<p class="matter">敲重点2:实现按钮点击切换图片功能</p>
<div id="flex2">
<div style="display:inline-block;height:auto;width:auto;text-align:center;">
<p>这是那些年学PS,AI做的图标和页面,我知道it is ugly ( ̄ε(# ̄)☆╰╮o( ̄皿 ̄///)</p>
<!--左箭头-->
<a @click="left" v-show="index!=0">
<img class='left'src="./img/left.png"/>
</a>
<img :src="array[index]" alt=""/ style="padding:0px;margin-left:0px;">
<!--右箭头-->
<a class="right"@click="right"v-show="index<array.length-1">
<img class='right' src="./img/right.png"/>
</a>
</div>
</div>
<!--问题区-->
<ul >
<li>
<p class="qustion">怎样实现图片的切换?</p>
<p class="answer">1.首先将图片的地址储存在数组中,只有地址时不用数组变量{},只需要“双引号括起来就好”用’:‘v-for的缩写)数组索引地址</p>
<p class="answer">2.用@方法使得点击是切换到下一张图(使得数组下标+/-1),同时用v-show的方法实现该键的隐藏</p>
</li>
</ul>
<!--实例3-->
<p style="color:indianred ">please remember:浮动的时候要相对于父节点浮动滴</p>
<p class="matter">实现一个记事本功能,有用户输入框,表单储存(未完待续)</p>
<div class='table'>
<input type='text' class='input'></input>
<div class='table'>
<ol>
<li v-for='th in things'>{{th}}</li>
</ol>
</div>
</div>
</div>
<p style="display:block;width:450px;margin:0 auto;color:pink;">叮~叮叮,短短几行代码,是小可爱一周的心血~~^*^~~</p>
<script type="text/javascript">
var app=new Vue
({
el:'#app',
data:
{
line:
[
{text:'这么快就忘了,鹅该不会是pig吧'},
{text:'知道为什么鹅的Vue有问题嚒?'},
{text:"因为这个要用到Vue的文件需要:新建项目-选择普通项目普通模式(html中引用Vue)"}
],
data1:1,
array:
[
"./img/1.jpg",
'./img/2.jpg',
'./img/3.jpg'
],
index:0,
things:
[
"想吃饭饭",
"想睡觉觉"
]
},
methods:
{
add:function()
{
if(this.data1>=20)
{
alert("不要加仓啦!")
}
else
{
this.data1++;
}
},
reduce:function()
{
if(this.data1<=0)
{
alert("不能减仓啦!")
}
else
{
this.data1--;
}
},
right:function()
{
this.index++;
},
left:function()
{
this.index--;
}
}
});
</script>
</body>
</html>