前言

最近突然想学习vue框架了，这周用空闲把vue的文档扫了一扫，跟以前看的感觉有了很大的不同，以前看是一脸懵的，现在由于基础的增强，看这个文档思路清晰很多，这周末亲自体验了一下，跟着视频做了一个不成型的todolists来熟悉vue的运用。

vue-cli脚手架的安装

1. 安装vue-cli之前我们要安装node.js和git
2. 最好安装cnpm淘宝镜像或者yarn,可以加速安装速度
3. 具体安装步骤见文档https://cn.vuejs.org/v2/guide/installation.html#NPM，百度资源也很多。

配置文件

建立vue-cli之后，开始分析各个文件的用途,本次学习只是用了小部分的文件，和大型项目是没办法对比的。

package.json

package.json配置所有依赖的文件，我们可以自己添加依赖， 我们可能在安装vue-cli过程中已经安装了许多依赖，例如：vue-router，可以根据需要自己添加依赖。

APP.vue

APP.vue父组件配置文件，是一个大模板，我们可以引入很多子组件进入，来渲染这个模板。

components文件

我们可以把许多子组件放入其中。有效的进行模块化。

App.vue代码片段

 <template>
<div id="app">
  <h1 v-text="title"></h1>
  <input v-model="newItem" v-on:keyup.enter = 'addNew'>
  <button v-on:click = 'addNew'> 确定</button>
  <ul>
    <li class="active"   v-for= "(item,index ) in items"  v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
     {{ index+1 }}.{{item.label}}<button v-on:click="removeNew">Remove</button>
    </li>
  </ul>
</div>
</template>

<script>
import Store from './store.js'
import hello from './components/HelloWorld' //引入组件
export default {
data () {
  return {
    title: 'this is a todo list',
    items:Store.fetch(),
    newItem:''
  }
},
components:{hello}, //注册组件

watch:{
  items:{
    handler:function(items){
      Store.save(items)
    },
    deep:true
  }
},
methods:{
  toggleFinish:function(item){
  item.isFinished = !item.isFinished
},
addNew:function(){
  this.items.push({
    label:this.newItem,
    isFinished:false
  })
  this.newItem = ""
},
removeNew:function(){
  this.items.splice(this.items, 1)
  }
  }
}

<style>
#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;
}
*{
  list-style: none;
}
.active{
  cursor: pointer;
}
.finished{
  color:red;
}
</style>

1. template

1 .v-for 为vue特有的循环属性，遍历items中的所有item

2. v-text文本渲染属性，与v-html不同的是不可以解析html标签
3. v-bind:class 我们可以传给 v-bind:class 一个对象，以动态地切换 class，显示boolean值。
4. v-on:click或@click 鼠标点击对象 触发methods中的对象。
5. {{}}进行页面渲染

2.script

1. import ... form '/'进行模块的引入
2. export default{
   data//数据传输
   components//组件注册
   watch //触发时间后监听
   methods//function对象集合
   }

3. 关于localStorage

    const StorageKey = 'todos-vue.js'
    export default{
    fetch:function(){
    return JSON.parse(window.localStorage.getItem(StorageKey ||'[]'))
    },
    save:function(items){
    window.localStorage.setItem(StorageKey,JSON.stringify(items))
    }   
    }

常用的浏览器的缓存工具，可以将输入值转换为json保存在缓存中，再次刷新后释放。

localStroage缓存

第一个简易todolist

todolist

现阶段有删除和添加的功能。

小坑： eslint语法检测工具.png

npm run dev启动时，由于没有符合eslint语法规范，启动失败。

解决：

进入build文件，找到webpack.base.conf,js,找到moudle下的rules，注释掉useEslint(图中已经注释)

小结

由于第一次运用vue-cli，踩了许多的坑。这个todolist就像婴儿一样，在接下来的时间里在探究vue的过程中不断优化功能和对其进行美化。