初学Vue基础语法
刚刚接触Vue框架 了解了一些有关于Vue的基础语法知识,觉的 在实现一些功能上,不用去操作DOM是真的很方便… 我做了一个简简单单的一个日程计划(引入了Bootstrap、layer等插件)。
插件地址链接:
Bootstrap全局css样式插件(美观又快捷)
Layer弹窗效果 (美观大方,个人比较推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="lib/boostrap/css/bootstrap.min.css">
<style>
.container {
width: 500px;
}
.panel-primary {
margin-bottom: 5px;
}
.things {
width: 130px;
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<form class="form-inline">
<div class="panel panel-primary">
<div class="panel-heading">日程事件</div>
<div class="panel-body">
<input type="text" class="form-control" v-model.trim='things' placeholder="请输入日程">
<button type="button" class="btn btn-success" @click='add()'>添加日程</button>
</div>
<!-- 处理中 -->
<div class="panel panel-primary">
<div class="panel-heading">进行中的日程</div>
<!-- Table -->
<table class="table">
<ul class="list-group">
<li class="list-group-item" v-for='(item,index) in doing' :key="index">
<!-- <span>{{item}}:{{index}}</span> -->
<span class="things">{{item}}</span>
<button type="button" class="btn btn-success" @click=finish(index)>完成</button>
<button type="button" class="btn btn-success" @click=delDoing(index)>×</button>
</li>
</ul>
</table>
</div>
<!-- 处理完 -->
<div class="panel panel-primary">
<div class="panel-heading">完成的日程</div>
<!-- Table -->
<table class="table">
<ul class="list-group">
<li class="list-group-item" v-for='(item,index) in finished' :key="index">
<!-- <span>{{item}}:{{index}}</span> -->
<span class="things">{{item}}</span>
<button type="button" class="btn btn-success" @click=unfinished(index)>撤消</button>
<button type="button" class="btn btn-success" @click=delFinished(index)>×</button>
</li>
</ul>
</table>
</div>
</div>
</form>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="lib/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
things: '',
doing: [],
finished: []
},
methods: {
// 添加事件
add() {
// 判断是否为空
if (this.things == '') {
layer.msg('请输入日程!');
return;
}
// 插入事件
this.doing.push(this.things);
// this.things = '';
},
// 删除待办事件
delDoing(index) {
this.doing.splice(index, 1);
},
// 完成事件
finish(index) {
this.finished.push(this.doing[index]);
this.doing.splice(index, 1);
},
// 删除完成事件
delFinished(index) {
this.finished.splice(index, 1);
},
// 撤销完成的事件
unfinished(index) {
this.doing.push(this.finished[index]);
this.finished.splice(index, 1);
},
}
})
</script>
</body>
</html>
就是自己简简单单的写了写咱们模拟日程的小玩意,巩固一下自己学的东西,大佬们勿喷!