nuxt写路由接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//在server/interface/city.js
import Router from 'koa-router';
const router = new Router({
prefix:'/city' //给路由添加前缀
})
router.get('/list', async (ctx) => {
ctx.body=['北京','天津']
})
export default router;


//在server/index.js
import cityInterface from './interface/city'
app.use(cityInterface.routes()).use(cityInterface.allowedMethods()) //固定写法

测试一下curl http://localhost:3000/city/list 或者浏览器输入http://localhost:3000/city/list

nuxt服务端渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<div class="page">
page is search
<ul>
<li v-for="(item,idx) in list" :key="idx">{{item}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
layout: 'search',
data() {
return {
list: []
}
},
async asyncData(){
let { status, data: {list}} = await axios.get('http://localhost:3000/city/list')
if(status === 200){
return {
list
}
}
}
}
</script>
<style scoped>
</style>

使用asyncData就是服务端渲染,computed只是浏览器的渲染刷新会有闪烁

nuxt2.0项目创建(最新)

使用import需要babel编译写法如下

vue中computed的作用以及用法

在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值。

参考地址:https://www.jianshu.com/p/ff708a773dc0

vue组件中的.sync修饰符使用

在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的carts改变时,通过事件机制,修改父组件的cart。完成了子组件carts和父组件cart的双向映射。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×