您的位置：首页 > 产品设计 > UI/UE

vue.js,基础用法实例

2017-06-30 17:16 746 查看

vue的基础用法实例

v-if , v-else

v-on ( 缩写 @ )

v-bind ( 缩写 : )

v-for

v-model

methods

el

watch

data

demo可直接复制使用，自行下载vue.js文件，助于熟悉基础

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>to-do-list</title>
<style type="text/css">
#vuedotolist{width: 400px;height: 500px;border: 2px solid #333;border-radius: 3px;margin:60px auto;position: relative;}
.edit{width: 80%;height: 35px;line-height: 35px;margin-top:30px;box-shadow: 0 0 4px #ccc;border: 1px solid #ccc;border-radius: 4px;outline: 0;box-sizing: border-box;margin-left: 10%;text-indent: 20px;}
.list{margin:0 auto;max-width: 80%;height: 60%;overflow-y: auto;}
.unit{position: relative;padding: 10px 0;border-bottom: 1px solid #efefef;}
.unit:last-child{border-bottom: 0;}
.finish{text-decoration: line-through;color: #ccc;}
.del{background: red;text-decoration: none;position: absolute;right: 20px;font-size: 12px;border:0;padding: 2px 5px;border-radius: 5px;color: #fff;cursor:pointer;}
.empty{font-size: 14px;color: #928787;text-align: center;padding: 10px 0;}
.number{position: absolute;right: 40px;bottom: 0px;}
</style>
</head>
<body>
<div id="vuedotolist">
<input  v-model="task.content" type="text"  class="edit" placeholder="编写任务" @keydown.enter="addTask" />
<p v-if="list.length==0" class="empty">今天暂无安排...</p>
<div class="list" v-else>
<div class="unit" v-for="(item,index) in list">
<input type="checkbox" :checked="item.finished" @click="changeState(index)" />
<span :class="{'finish':item.finished}">{{item.content}}</span>
<button @click="removeTask(index)" class="del">删除</button>
</div>
</div>
<p class="number">任务数量：{{list.length}}</p>
</div>
</body>
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<script src="src/vue.js"></script>
<script>
const STORAGE_KEY = 'to-do-list'
var fetch=function(){
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
};
var save=function(items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
};

const vuedotolist = new Vue({
el:"#vuedotolist",
data:{
//默认
task:{
content:'',       //内容
finished:false,   //未完成
},
//任务列表，默认取localStorage的数据
list:fetch()
},
methods:{
//添加新的任务
addTask:function(){
if (this.task.content != "") {
this.list.push(this.task);
// save(this.task);
//存入list之后，重置task
this.task={
content:'',
finished:false,
// deleted:false
}
}
},
//取反值，修改状态
changeState:function(index){
let curSate=this.list[index].finished;
this.list[index].finished=!curSate;
},
//移除当前的数据，重新返回数组给lsit
removeTask:function(index){
this.list.splice(index,1);
}
},
//监听，一旦list[]发生变化，存入localStorage数据
watch:{
list:{
handler:function(){
save(this.list);
}
}
}
})

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue-js 基础 demo

相关文章推荐

新的分享

章节导航