入门vue.js,从一个牛逼哄哄的todolist开始！

各位亲爱的小伙伴们，前端的框架层出不穷，也着实让我们这些前端开发人员陷入一阵选择困难症，一会儿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的内容。

Hello.vue的内容

然后在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