脚手架
安装： npm install -g @vue/cli
创建一个项目
-
创建一个新的文件夹(code)，shift 鼠标右键打开PowerShell窗口
-
运行命令：vue create hello-world
-
选择：
-
选择：
-
选择：
-
输入：n
-
选择：
-
输入：n
-
安装完成：
-
在code文件夹中就创建了hello-world文件夹
-
启动hello-world: npm rum serve
-
出现
说明此文件运行到了这两个地址上，一个是本地地址，一个人网络地址
-
在浏览器的地址栏中 复制http://localhost:8080/ 显示一下页面声明成功
-
打开文件，输入npm run serve,点击本地地址就可以了
小项目小练习
实现增删改查
显示首页
在views文件中新建一个List.Vue
<template>
<div>
<table>
<thead>
<tr>
<th>编号</th>
<th>标题</th>
<th>发表时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in posts" :key="item.id">
<td>{{item.id}}</td>
<td><router-link to="/detail">{{item.title}}</router-link></td>
<td>{{item.create_time}}</td>
<td>删除</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data:function(){
return{
posts:[
{id:1,title:'今天又是元气满满的一天',create_time:Date.now()},
{id:2,title:'遇见你是我最大的幸运',create_time:Date.now()},
{id:3,title:'相看两不厌',create_time:Date.now()}
]
}
}
}
</script>
router文件夹中index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
name:'List',
component:List
}
]
const router = new VueRouter({
routes
})
export default router
显示详情页
在List.vue中添加一条新语句
<td><router-link :to="{name:'Detail',params:{id:item.id}}">{{item.title}}</router-link></td>
点击链接跳转到Detail，传递id值
Detail.vue
<template>
<div class="detail">
<router-link to="/">返回首页</router-link>
<h1>{{post.title}}</h1>
<div>{{post.content}}</div>
</div>
</template>
<script>
export default {
data:function(){
return{
posts:[
{id:1,title:'今天又是元气满满的一天',content:'今天又是元气满满的一天今天又是元气满满的一天今天又是元气满满的一天',create_time:Date.now()},
{id:2,title:'遇见你是我最大的幸运',content:'遇见你是我最大的幸运遇见你是我最大的幸运遇见你是我最大的幸运',create_time:Date.now()},
{id:3,title:'相看两不厌',content:'相看两不厌,唯有敬亭山',create_time:Date.now()}
],
post:{} //查找到的符合条件的文章对象
}
},
created:function(){
//获取传递过来的id
let post_id=this.$route.params.id;
//从posts变量中查询id=post_id的元素
let res_post=this.posts.find(item=>{
return item.id==post_id
})
this.post=res_post
}
}
</script>
router文件夹中index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
name:'List',
component:List
},
{
path:'/detail/:id',
name:'Detail',
component:Detail
}
]
const router = new VueRouter({
routes
})
export default router
添加
在List.vue中添加一条新语句
<router-link to='/add'>添加</router-link>
Add.vue
<template>
<div class="box">
<form action="">
<div>
<label for="title">标题：</label>
<input type="text" id="title" v-model="title">
</div>
<div>
<label for="content">内容：</label>
<textarea id="content" cols="30" rows="10" resize='none' v-model="content"></textarea>
</div>
<input type="button" value="添加" @click="saveData">
</form>
</div>
</template>
<script>
export default {
data:function(){
return{
posts:[
{id:1,title:'今天又是元气满满的一天',content:'今天又是元气满满的一天今天又是元气满满的一天今天又是元气满满的一天',create_time:Date.now()},
{id:2,title:'遇见你是我最大的幸运',content:'遇见你是我最大的幸运遇见你是我最大的幸运遇见你是我最大的幸运',create_time:Date.now()},
{id:3,title:'相看两不厌',content:'相看两不厌,唯有敬亭山',create_time:Date.now()}
],
title:'',
content:''
}
},
methods:{
saveData:function(){
this.posts.push({id:4,title:this.title,content:this.content,create_time:Date.now()})
console.log(this.posts)
}
}
}
</script>
router文件夹中index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'
import Add from '../views/Add.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
name:'List',
component:List
},
{
path:'/detail/:id',
name:'Detail',
component:Detail
}
,
{
path:'/add',
name:'Add',
component:Add
}
]
const router = new VueRouter({
routes
})
export default router
删除
在List.vue中添加一条新语句
<a href="javascr:;" @click="deleteData(item.id)">删除</a>
<template>
<div>
<router-link to='/add'>添加</router-link>
<table>
<thead>
<tr>
<th>编号</th>
<th>标题</th>
<th>发表时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in posts" :key="item.id">
<td>{{item.id}}</td>
<td><router-link :to="{name:'Detail',params:{id:item.id}}">{{item.title}}</router-link></td>
<td>{{item.create_time}}</td>
<td>
<router-link :to="{name:'Edite',params:{id:item.id,index:index}}">编辑</router-link>
<a href="javascr:;" @click="deleteData(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data:function(){
return{
posts:[
{id:1,title:'今天又是元气满满的一天',content:'今天又是元气满满的一天今天又是元气满满的一天今天又是元气满满的一天',create_time:Date.now()},
{id:2,title:'遇见你是我最大的幸运',content:'遇见你是我最大的幸运遇见你是我最大的幸运遇见你是我最大的幸运',create_time:Date.now()},
{id:3,title:'相看两不厌',content:'相看两不厌,唯有敬亭山',create_time:Date.now()}
]
}
},
methods:{
deleteData:function(post_id){
this.posts.forEach((item,index)=>{
if(item.id==post_id){
this.posts.splice(index,1)
}
})
}
}
}
</script>
修改
在List.vue中添加一条新语句
<router-link :to="{name:'Edite',params:{id:item.id,index:index}}">编辑</router-link>
Edite.vue
<template>
<div class="box">
<form action="">
<div>
<label for="title">标题：</label>
<input type="text" id="title" v-model="title">
</div>
<div>
<label for="content">内容：</label>
<textarea id="content" cols="30" rows="10" resize='none' v-model="content"></textarea>
</div>
<input type="button" value="修改" @click="updateData">
</form>
</div>
</template>
<script>
export default {
data:function(){
return{
posts:[
{id:1,title:'今天又是元气满满的一天',content:'今天又是元气满满的一天今天又是元气满满的一天今天又是元气满满的一天',create_time:Date.now()},
{id:2,title:'遇见你是我最大的幸运',content:'遇见你是我最大的幸运遇见你是我最大的幸运遇见你是我最大的幸运',create_time:Date.now()},
{id:3,title:'相看两不厌',content:'相看两不厌,唯有敬亭山',create_time:Date.now()}
],
title:'',
content:'',
post:{} //查找到符合条件的文章对象
}
},
created:function(){
let post_id=this.$route.params.id
let post_res=this.posts.find(item=>{
return item.id==post_id
})
this.title=post_res.title
this.content=post_res.content
},
methods:{
updateData:function(){
let arr={title:this.title,content:this.content,create_time:Date.now()}
let post_id=this.$route.params.index
this.posts.splice(post_id,1,arr)
console.log(this.posts[0])
}
}
}
</script>
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'
import Add from '../views/Add.vue'
import Edite from '../views/Edite.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
name:'List',
component:List
},
{
path:'/detail/:id',
name:'Detail',
component:Detail
},
{
path:'/add',
name:'Add',
component:Add
},
{
path:'/edite/:id',
name:'Edite',
component:Edite
}
]
const router = new VueRouter({
routes
})
export default router
扫一扫
4392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
