各位親愛(ài)的小伙伴們糠悼，前端的框架層出不窮届榄，也著實(shí)讓我們這些前端開(kāi)發(fā)人員陷入一陣選擇困難癥，一會(huì)兒react,一會(huì)兒angular的倔喂，今天呢铝条，我向大家介紹一下vue.js框架靖苇，作為一個(gè)入行不久的web前端開(kāi)發(fā)人員，我等也只能跟隨大神的腳步拼命的學(xué)習(xí)各種框架知識(shí)班缰，大神不停地造輪子贤壁，我們不停換輪子，只要是好輪子埠忘，跑得快脾拆，跑得穩(wěn)，拿起鍵盤就是一頓懟莹妒！
好了名船，不廢話了，vue呢是一款MVVM的輕量級(jí)框架旨怠，代碼風(fēng)格比較簡(jiǎn)約時(shí)尚小清新渠驼。與其他重量級(jí)框架不同的是，vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)鉴腻。vue 的核心庫(kù)只關(guān)注視圖層迷扇，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合拘哨。另一方面谋梭，vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。
todolist,就是任務(wù)列表倦青，我今天帶著大家伙用vue來(lái)寫一個(gè)瓮床！ok ! 走起！本案例是npm webpack起的項(xiàng)目产镐，沒(méi)有接觸的過(guò)的建議看一下npm和webpack入門使用隘庄，如果你不想看也沒(méi)關(guān)系，不會(huì)影響你的制作癣亚，建議大家把把vue的安裝看一下丑掺，你可以通過(guò)script標(biāo)簽引入文件的方式，也可以直接用npm來(lái)安裝vue,然后初始化一個(gè)vue的項(xiàng)目述雾，因?yàn)闆](méi)寫后端街州，存儲(chǔ)用的localstorage,所以沒(méi)有接觸過(guò)的趕緊餓補(bǔ)一下localstorage。我是是直接在基于webpack模板寫的玻孟，所以目錄結(jié)構(gòu)上沒(méi)有什么改動(dòng)唆缴。也便于大家跟著我實(shí)際操作一頓。來(lái)黍翎！上馬面徽！
看一下App.vue的內(nèi)容。
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<input placeholder="在此輸入任務(wù)名稱后按下Enter鍵即可生成任務(wù)" v-model="newItem" v-on:keyup.enter="addNew" />
<h1 style="font-family: '微軟雅黑';border-bottom: 2px solid #35495E; padding-bottom: 15px;">任務(wù)列表</h1>
<ol>
<li v-for="(item,index) in items" v-bind:class="{finished:item.isFinished}" >
{{item.project}}
<a href="#" v-on:click="Delete(index)" class="delete">刪除任務(wù)</a>
<a href="#" v-on:click="toggleFinish(item)" v-bind:class="{fibtn:item.fibtn}">
{{item.info? '已完成':'待完成'}}
</a>
</li>
</ol>
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
import Storage from './storage'
export default {
name: 'app',
components: {
Hello
},
data () {
return {
items: Storage.fetch(),
newItem: ''
}
},
watch: {
items: {
handler: function (items){
Storage.save(items)
},
deep:true
}
},
methods:{
toggleFinish: function (item){
item.isFinished=!item.isFinished,
item.info=!item.info,
item.fibtn=!item.fibtn
},
addNew: function (){
this.items.push({
project: this.newItem,
isFinished: false,
info: false,
fibtn: false
}),
this.newItem=''
},
Delete: function (index){
var r=confirm(" 親！您確定刪除此條任務(wù)么趟紊？");
if(r){
this.items.splice(index,1);
Storage.save(this.items);
console.log(this.items);
}
else{
return;
}
}
}
}
</script>
<style>
input{
width: 40%;
height: 50px;
font-size: x-large;
border: 2px solid forestgreen;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
margin-right: 10px;
margin-left: 10px;
}
ol{
padding-left: 25%;
text-align: center;
width: 50%;
}
li{
font-family: "微軟雅黑";
padding-left: 120px;
height:40px;
font-size: 35px;
text-align: center;
background-color: #41b883;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px ridge #333;
}
.finished{
color: #41b883;
background-color: #35495e;
}
a{
text-decoration: none;
color: white;
float: right;
padding: 5px;
margin-right: 15px;
margin-top: 4px;
background: #35495e;
border-radius: 8px;
width: auto;
font-family: "微軟雅黑";
font-size: medium;
}
a:hover{
background-color: white;
color:#35495e;
}
.fibtn{
color:#35495e;
background-color: #41b883;
}
.fibtn:hover{
color:#41b883;
background-color: white;
}
.delete{
background-color: crimson;
color: white;
}
.delete:hover{
background-color: lightcoral;
}
</style>
Hello.vue的內(nèi)容
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Hi氮双！小主人! 歡迎使用TracySoke為您制作的todolist'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
然后在src文件夾下新建storage.js
storage.js內(nèi)容
const STORAGE_KEY = 'todos-vuejs'
export default{
fetch: function (){
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save: function (items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
},
shanchu: function (items){
window.localStorage.removeItem(STORAGE_KEY,JSON.stringify(items))
}
}
好了,改動(dòng)的文件都湊齊了！大家可以試試跑起來(lái)試試霎匈！
npm run dev (啟動(dòng)項(xiàng)目的命令)
注意看看爆的什么錯(cuò)戴差！別忘了安裝的的時(shí)候安裝上依賴包（npm install）不然解析不了我們寫的什么雞兒玩意了。唧躲。造挽。。
