vue学习笔记-写一个todolist
2017-02-14 本文已影响902人
牛油果大虾
相信很多前端小盆友在刚刚过去的2016年都看到过这样一片文章
在 2016 年学 JavaScript 是一种什么样的体验？
图片来源于网络
确实在刚刚过去的一年前端方面涌现出许多新鲜的技术或者许多技术在社区取得了巨大的发展进步,社区资料显示出2016年最流行的前端框架是Vue.JS,因为公司项目没有涉及所以也没有深入了解,文档读了许多遍还只停留在前几节(惭愧状-_-||)
心塞塞
最近趁年后回来公司没什么任务好好的读了一下文档及许多前辈的博客,决定分享一下自己的学习心得然后写一个todolist算是对自己最近学习的整理和总结,也希望本文能帮助其他刚开始学vue的小伙伴对它有更好的理解,下面开始吧
不废话
vue的相关资料及优点我就不总结了,网上一堆堆bulabula...
一.步骤总结
用vue写项目大概可以总结为三个步骤
1.注册组件
2.应用组件
3.实例化
下面我们来举个栗子
举个栗子
1.注册组件(js)
<script>
//注册组件,格式为Vue.component("自定义标签",{相关模板,数据,函数等属性})
Vue.component('my-component', {
template: '<button>{{ message }}</button>',
//注册组件是的data必须是函数,与实例化时使用的不同
data: function(){
return {
message:"我是一个可爱的组件"
}
}
})
</script>
2.应用组件(html)
<div id="vm">
<my-component></my-component>
</div>
3.实例化(js)
new Vue({
el:"#vm"
})
这样一个最基本的模板就好了
效果如下
简易组件
如果想把功能及效果写的更炫酷大家可以随着技术的成长和积累后续了解vue的相关API及语法,如props,watcher,methods,computed.......下面来做一个todolist的Demo
二.实现一个todolist
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--样式库-->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!--vue.js库-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.isFinish {
background-color: #d58512 !important;
}
.itemcount {
display: block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 10px;
float: left;
background-color: #d9edf7;
}
</style>
</head>
<body>
<div class="container text-center" id="app">
<h2>{{title}}</h2>
<div class="row">
<div class="col-md-7">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="toitem">添加任务事项</label>
<input class="form-control" type="text" id="toitem" v-model="newitem" @keyup.enter="addItem()">
</div>
<div class="list-group text-left form-group" style="margin-top: 2em;">
<a href="#" class="list-group-item active text-left">
任务清单：
</a>
<a href="#" v-for="item in items" class="list-group-item" v-on:click="toogleFinsih(item)">
<span class="itemcount">{{item.id}}</span>
{{item.lable}}
<span class="badge" v-bind:class="{isFinish:item.isFinish}">√</span>
</a>
</div>
</form>
</div>
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading">任务计划：</div>
<div class="panel-body">
请在一周内完成这些计划！
</div>
<div class="panel-footer text-right">
<button class="btn btn-info btn-sm" @click="clearItem">清空任务计划</button>
</div>
</div>
</div>
</div>
</div>
<script>
//该网站的localStorage的键值，用于存放数据
var todoList = 'todolist';
//对localStorage的封装
var lsp = (function () {
return ({
add: function (dataval) {
//添加数据，键为todolist
localStorage.setItem(todoList, JSON.stringify(dataval));
},
get: function () {
//读取键为todolist的数据
return JSON.parse(localStorage.getItem(todoList));
},
remove: function () {
//移除该站点下键为todolist的数据
localStorage.removeItem(todoList);
},
clear: function () {
//清空该站点下的所有localStorage的数据
localStorage.clear();
}
});
})();
var app = new Vue({
el: '#app',
data: {
title: '任务清单demo',
items: lsp.get() || [],//读取数据。如果没有数据赋值为数组[]
newitem: '' //要添加的数据
},
methods: {
addItem: function () {
var that = this;
this.items.push({
id: that.items.length + 1,
lable: that.newitem,
isFinish: false
});
lsp.add(this.items);
this.newitem = '';
},
toogleFinsih: function (item) {
item.isFinish = !item.isFinish;
},
clearItem: function () {
this.items = [];
}
}
})
</script>
</body>
</html>
todolist.gif
