各位亲爱的小伙伴们，前端的框架层出不穷，也着实让我们这些前端开发人员陷入一阵选择困难症，一会儿react,一会儿angular的，今天呢，我向大家介绍一下vue.js框架，作为一个入行不久的web前端开发人员，我等也只能跟随大神的脚步拼命的学习各种框架知识，大神不停地造轮子，我们不停换轮子，只要是好轮子，跑得快，跑得稳，拿起键盘就是一顿怼！
好了，不废话了，vue呢是一款MVVM的轻量级框架，代码风格比较简约时尚小清新。与其他重量级框架不同的是，vue 采用自底向上增量开发的设计。vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
todolist,就是任务列表，我今天带着大家伙用vue来写一个！ok ! 走起！本案例是npm webpack起的项目，没有接触的过的建议看一下npm和webpack入门使用，如果你不想看也没关系，不会影响你的制作，建议大家把把vue的安装看一下，你可以通过script标签引入文件的方式，也可以直接用npm来安装vue,然后初始化一个vue的项目，因为没写后端，存储用的localstorage,所以没有接触过的赶紧饿补一下localstorage。我是是直接在基于webpack模板写的，所以目录结构上没有什么改动。也便于大家跟着我实际操作一顿。来！上马！
看一下App.vue的内容。
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<input placeholder="在此输入任务名称后按下Enter键即可生成任务" v-model="newItem" v-on:keyup.enter="addNew" />
<h1 style="font-family: '微软雅黑';border-bottom: 2px solid #35495E; padding-bottom: 15px;">任务列表</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">删除任务</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(" 亲！您确定删除此条任务么？");
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的内容
<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内容
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))
}
}
好了,改动的文件都凑齐了！大家可以试试跑起来试试！
npm run dev (启动项目的命令)
注意看看爆的什么错！别忘了安装的的时候安装上依赖包（npm install）不然解析不了我们写的什么鸡儿玩意了。。。。
123.png
网友评论