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

港控/mmm° 2021-09-14 02:06 393阅读 0赞

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

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

[![201704201059018.png][]][201704201059018.png]

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

一.简单的事列

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

运行的效果出来：

![20170726153754044][]

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

![20170803095948991][]

就得到效果如下：

![20170803100106858][]

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

![20170803100145558][]

通过简单的项目，是不是觉得简单多了。![大笑][laugh.gif]

如果我们不用<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>

![20170803103254406][]

三.实现列表选中效果

增加绑定事件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>

![20170803134809914][]

四.自选添加内容

v-model双向绑定

<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>

![20170803142135229][]

四.使用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里面，即使刷新，这个值也是不会消失

![Center][]

[Vue.js]: http://blog.csdn.net/gao_xu_520/article/details/76048036
[vue.js]: http://blog.csdn.net/gao_xu_520/article/details/76146235
[201704201059018.png]: /images/20210813/21a6ef4acbdb474abe4658758488691e.png
[20170726153754044]: /images/20210813/dc9d6a8115a44fcdb365c354dec1e69d.png
[20170803095948991]: /images/20210813/353590a34cf940868f958337241b07d6.png
[20170803100106858]: /images/20210813/8276c549aa804645bb74af132715017c.png
[20170803100145558]: /images/20210813/9440b7b621ff4933825c652795a02692.png
[laugh.gif]: /images/20210813/b23fb5f9d7a04724934e8d4c3054c35b.png
[20170803103254406]: /images/20210813/8945af4f6c03461e8b92150240b90e47.png
[20170803134809914]: /images/20210813/440e67f0d33c4234a5e9911beb9ec7f2.png
[20170803142135229]: /images/20210813/f90a130643fb4821ba54e61a3dbef487.png
[Center]: /images/20210813/149a2a6f16f548129c7da4e472b98ab2.png