02 本地应用
-
通过Vue实现常见的网页效果
-
学习Vue指令,以案例巩固知识点
-
Vue指令指的是,以**v-**开头的一组特殊语法
v-text
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用**差值表达式{{}}**可以替换指定内容
- 内部支持写表达式
v-html
- v-html指令的作用是:设置元素的innerHTML
- 内容中由html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
v-on
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为**@**
- 绑定的方法定义在methods属性中
v-text、v-html、v-on实战演练
计数器
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器</title>
<style type="text/css">
#app{
width: 200px;
height: 50px;
border-radius: 10px;
box-shadow: 5px 5px 10px -4px rgba(0,0,0,.3); ;
overflow: hidden;
}
#app button{
float: left;
height: 50px;
width: 66.5px;
font-size: 30px;
color: white;
background-color: gray;
border-width: 0px;
}
#app div{
float: left;
height: 50px;
width: 67px;
font-size: 30px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="sub">-</button>
<div v-text="num"></div>
<button type="button" @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}else{
alert("太满了要溢出了");
}
},
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("已经到底了");
}
}
}
})
</script>
</body>
</html>
效果
v-show
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
v-if
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁的切换用v-show,反之使用v-if,前者切换消耗小
v-bind
- v-bind指令的作用是:为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接忽略v-bind,只保留**:属性名**
- 需要动态的增删class建议使用对象的方式
v-show、v-if、v-bind实战演练
图片切换
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
</head>
<body>
<div id="app">
<a href="#" @click="prev()" v-show="index>0">上一张</a>
<img :src="imgSrcs[index]">
<a href="#" @click="next()" v-show="index<imgSrcs.length">下一张</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
imgSrcs:['1.jpg','2.jpg','3.jpg'],
index:0
},
methods:{
prev:function(){
if(this.index>0){
this.index--;
}
},
next:function(){
if(this.index<this.imgSrcs.length){
this.index++;
}
}
}
})
</script>
</body>
</html>
v-for
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是**(item,index)in 数据**
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
v-on补充
- 事件绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法是需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有很多种,参考https://cn.vuejs.org/v2/api/#v-on
v-model
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据回合表单元素值相关联
- 绑定的数据<–>表单元素的值
v-for、v-on、v-model实战演练
记事本
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记事本</title>
<style type="text/css">
*{
margin: 0px;
padding:0px;
}
li{
list-style: none;
}
body{
background-color: rgb(154, 157, 163);
}
a{
color: black;
text-decoration: none
}
a:hover {
color: gray;
}
.w{
margin: 0 auto;
width: 600px;
background-color: white;
text-align: center;
}
header{
height: 60px;
color: #808080;
font-size: 50px;
font-family: "楷体";
text-shadow: 4px 4px 4px rgba(153, 154, 181, .3);
}
.main_content{
}
.main_content input{
height: 40px;
width: 278px;
padding-left: 20px;
font-size: 20px;
text-align: left;
color: rgb(152, 165, 148);
}
.main_content ul{
display: inline-block;
width: 300px;
border: 1px solid rgb(123, 134, 120);
z-index: 0;
box-shadow: 10px 10px 10px -4px gray;
}
.main_content ul li{
height: 40px;
width: 300px;
text-align: left;
line-height: 40px;
border-bottom: 1px solid rgb(123, 134, 120);
}
.main_content ul li span{
float: left;
padding:0px 10px;
}
.main_content ul li p{
float: left;
margin-left:20px;
}
.main_content ul li a{
float: right;
margin-right:20px;
}
.tip{
display: inline-block;
height: 20px;
width: 300px;
}
.tip span{
float: left;
}
.tip a{
float: right;
}
</style>
</head>
<body>
<div id="app">
<header class="w">
小黑记事本
</header>
<section class="w main_content">
<input type="text"
v-model="inputEvent"
@focusin="inputPrepareFocus()"
@blur="inputPrepareBlur()"
@keyup.enter="addEvent()"/><br>
<ul>
<li v-for="(item,index) in eventList"
@mouseover="changeMouseOverToIndex(index)"
@mouseout="changeMouseOverToNull()">
<span>{{index+1}}</span>
<p>{{item}}</p>
<a href="#"
v-show="index==mouseOver"
@click="removeEvent(index)">X</a>
</li>
</ul><br>
<div class="tip" v-show="eventList.length>0">
<span>{{eventList.length}}条任务</span>
<a href="#" @click="clearEvent()">清空</a>
</div>
</section>
<footer class="w">
由正在学习vue的<span @click="cheer">biang</span>完成
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
eventList:['背单词','学js','学vue'],
inputEvent:'请输入任务',
mouseOver:-1
},
methods:{
inputPrepareFocus:function(){
if(this.inputEvent=='请输入任务'){
this.inputEvent='';
}
},
inputPrepareBlur:function(){
if(this.inputEvent==''){
this.inputEvent='请输入任务';
}
},
addEvent:function(){
if(this.inputEvent!=''){
this.eventList.push(this.inputEvent);
}
},
clearEvent:function(){
this.eventList=[];
},
changeMouseOverToIndex:function(index){
this.mouseOver=index;
},
changeMouseOverToNull:function(){
this.mouseOver=-1;
},
removeEvent:function(index){
this.eventList.splice(index,1);
},
cheer:function(){
alert('棒棒哒!');
}
}
})
</script>
</body>
</html>