首先通过前面俩篇 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里面,即使刷新,这个值也是不会消失