开始 Vue 之旅--开发项目（一）

       首先通过前面俩篇 Vue.js安装以及创建项目和vue.js项目结构，我们自己心中对vue项目也了解百分之80了，现在我们来开始开发项目。

      根据vue.js项目结构，我们了解到vue的项目结构，我们只要修改src文件里面的内容就好，其他的文件是配置好的，每个项目都是一样（有遇到特殊情况的时候，我们再来讨论）

   所以在这里我们直接把官网的项目打包过来，开发新的项目只要修改src文件内的文件。

一.简单的事列

       （1）. 首先我们把项目放在f盘，通过命令cmd找到myVue文件，再运行项目npm run dev （如果这部分还有不懂，请看 Vue.js安装以及创建项目中五.运行别人的vue项目domo）

    运行的效果出来：

   （2）修改这个app.vue文件来创建新项目

就得到效果如下：

现在我们来对比下，官网和我们修改后的

通过简单的项目，是不是觉得简单多了。

  

     如果我们不用<h1>{{title}}</h1>直白的方式来表示，那么我们也可用v-text的指令来

        

       <h1 v-text="title"></h1>

最后的效果都是一样。

二.数据是数组的简单案例

采用v-for以及v-bind的指令

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <ul class="itemslist">
     <li v-for="item in items" v-bind:class="{finished:item.isFinished}">{{item.label}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return { 
      title: '好吃的水果，快来看：',
      items:[
        {
          label:'苹果',
          isFinished:false
        },
        {
          label:'香蕉',
          isFinished:false
        },
        {
          label:'凤梨',
          isFinished:true
        }
      ]
    }
  }
}
</script>

<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;
}
.itemslist{
  text-align:left;
  line-height:30px;
}
.finished{
  color:#f00;
}
</style>

三.实现列表选中效果

增加绑定事件v-on ，以及methods方法

<li v-for="(item,index) in items" v-bind:class="{active:index == num}" 
      v-on:click="itemactive(index)">{{item.label}}</li>

或是

 <li v-for="item in items" v-bind:class="{active:item == num}" 
      v-on:click="itemactive(item)">{{item.label}}</li>

不需要索引index.把index替换成item,其效果是一样的

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <ul class="itemslist">
      <li v-for="(item,index) in items" v-bind:class="{active:index == num}" 
      v-on:click="itemactive(index)">{{item.label}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return { 
      title: '好吃的水果，快来看：',
      items:[
        {
          label:'苹果'
        },
        {
          label:'火龙果'
        },
        {
          label:'香蕉'
        },
        {
          label:'凤梨'
        }
      ],
      num:0
    } 
  },
  methods:{
    //添加颜色
    itemactive:function(index) {
      this.num = index;
    }
       
  }
}
</script>

<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;
}
.itemslist{
  text-align:left;
  line-height:30px;
}
.active{
  color:#f00;
}
</style>

四.自选添加内容

v-model双向绑定

<input v-model="newItem" v-on:keyup.enter="addNew"/>

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <input v-model="newItem" v-on:keyup.enter="addNew"/>
    <ul class="itemslist" >
      <li v-for="(item,index) in items" v-bind:class="{active:index == num}" 
      v-on:click="itemactive(index)">{{item.label}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return { 
      title: '水果的种类很多，让我们一起添加：',
      items:[],
      num:0,
      newItem:''
    } 
  },
  methods:{
    //添加颜色
    itemactive:function(index) {
      this.num = index;
    },
    addNew:function(){
      //因为列表是数组，push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
      this.items.push({
        label:this.newItem
      })
      this.newItem=" ";//当enter完后，input的值自动消失(双向绑定的原因)
    }
       
  }
}
</script>

<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;
}
.itemslist{
  text-align:left;
  line-height:30px;
}
.active{
  color:#f00;
}
</style>

四.使用localstorage来做存储

（1）.首先创建store.js文件（放在src的目录下）

const  STORAGE_KEY = 'todos-vuejs'
export default{
	//fetch()是获取localStorage里面的值
	fetch:function (){
		return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
	},
	//设置localStorage里面的值并保存
	save:function(items){
		window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
	}
}

（2）.在app.vue文件中，修改

①引入store.js
import Store from './store.js'

②使用watch对象监听的方法:来监听items属性的变化

要添加deep：true,否则监听不到键的变化，

 watch:{
    items: {  
        handler: function (items) {
          Store.save(items);
        },  
        deep: true  
    }  
  }

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <input v-model="newItem" v-on:keyup.enter="addNew"/>
    <ul class="itemslist" >
      <li v-for="(item,index) in items" v-bind:class="{active:index == num}" 
      v-on:click="itemactive(index)">{{item.label}}</li>
    </ul>
  </div>
</template>

<script>
//引入store.js
import Store from './store.js'
export default {
  name: 'app',
  data: function () {
    return { 
      title: '水果的种类很多，让我们一起添加：',
      items:Store.fetch(),
      num:0,
      newItem:''
    } 
  },
  //watch对象监听的方法
  watch:{
    items: {  
        handler: function (items) {
          Store.save(items);
        },  
        deep: true  
    }  
  },
  methods:{
    //添加颜色
    itemactive:function(index) {
      this.num = index;
    },
    addNew:function(){
      //因为列表是数组所以push()
      this.items.push({
        label:this.newItem
      })
      this.newItem=" ";//当enter完后，input的值自动消失(双向绑定的原因)
    }
       
  }
}
</script>

<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;
}
.itemslist{
  text-align:left;
  line-height:30px;
}
.active{
  color:#f00;
}
</style>

效果如：值都保存在local Storage里面，即使刷新，这个值也是不会消失