相信很多前端小盆友在剛剛過去的2016年都看到過這樣一片文章
在 2016 年學(xué) JavaScript 是一種什么樣的體驗(yàn)？
圖片來源于網(wǎng)絡(luò)
確實(shí)在剛剛過去的一年前端方面涌現(xiàn)出許多新鮮的技術(shù)或者許多技術(shù)在社區(qū)取得了巨大的發(fā)展進(jìn)步,社區(qū)資料顯示出2016年最流行的前端框架是Vue.JS,因?yàn)楣卷?xiàng)目沒有涉及所以也沒有深入了解,文檔讀了許多遍還只停留在前幾節(jié)(慚愧狀-_-||)
心塞塞
最近趁年后回來公司沒什么任務(wù)好好的讀了一下文檔及許多前輩的博客,決定分享一下自己的學(xué)習(xí)心得然后寫一個(gè)todolist算是對自己最近學(xué)習(xí)的整理和總結(jié),也希望本文能幫助其他剛開始學(xué)vue的小伙伴對它有更好的理解,下面開始吧
不廢話
vue的相關(guān)資料及優(yōu)點(diǎn)我就不總結(jié)了,網(wǎng)上一堆堆bulabula...
一.步驟總結(jié)
用vue寫項(xiàng)目大概可以總結(jié)為三個(gè)步驟
1.注冊組件
2.應(yīng)用組件
3.實(shí)例化
下面我們來舉個(gè)栗子
舉個(gè)栗子
1.注冊組件(js)
<script>
//注冊組件,格式為Vue.component("自定義標(biāo)簽",{相關(guān)模板,數(shù)據(jù),函數(shù)等屬性})
Vue.component('my-component', {
template: '<button>{{ message }}</button>',
//注冊組件是的data必須是函數(shù),與實(shí)例化時(shí)使用的不同
data: function(){
return {
message:"我是一個(gè)可愛的組件"
}
}
})
</script>
2.應(yīng)用組件(html)
<div id="vm">
<my-component></my-component>
</div>
3.實(shí)例化(js)
new Vue({
el:"#vm"
})
這樣一個(gè)最基本的模板就好了
效果如下
簡易組件
如果想把功能及效果寫的更炫酷大家可以隨著技術(shù)的成長和積累后續(xù)了解vue的相關(guān)API及語法,如props,watcher,methods,computed.......下面來做一個(gè)todolist的Demo
二.實(shí)現(xiàn)一個(gè)todolist
代碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--樣式庫-->
<link rel="stylesheet" >
<!--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">添加任務(wù)事項(xiàng)</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">
任務(wù)清單：
</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">任務(wù)計(jì)劃：</div>
<div class="panel-body">
請?jiān)谝恢軆?nèi)完成這些計(jì)劃！
</div>
<div class="panel-footer text-right">
<button class="btn btn-info btn-sm" @click="clearItem">清空任務(wù)計(jì)劃</button>
</div>
</div>
</div>
</div>
</div>
<script>
//該網(wǎng)站的localStorage的鍵值，用于存放數(shù)據(jù)
var todoList = 'todolist';
//對localStorage的封裝
var lsp = (function () {
return ({
add: function (dataval) {
//添加數(shù)據(jù)，鍵為todolist
localStorage.setItem(todoList, JSON.stringify(dataval));
},
get: function () {
//讀取鍵為todolist的數(shù)據(jù)
return JSON.parse(localStorage.getItem(todoList));
},
remove: function () {
//移除該站點(diǎn)下鍵為todolist的數(shù)據(jù)
localStorage.removeItem(todoList);
},
clear: function () {
//清空該站點(diǎn)下的所有l(wèi)ocalStorage的數(shù)據(jù)
localStorage.clear();
}
});
})();
var app = new Vue({
el: '#app',
data: {
title: '任務(wù)清單demo',
items: lsp.get() || [],//讀取數(shù)據(jù)。如果沒有數(shù)據(jù)賦值為數(shù)組[]
newitem: '' //要添加的數(shù)據(jù)
},
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
