组件通信方式
- 父组件给子组件传值 props
- 子组件给父组件传值 自定义事件$emit('事件名',参数）
- 不相关组件传值 eventBus 创建公共vue实例 组件中引入bus,$emit $on派发和触发事件 $refs $children $parent
服务端渲染
客户端渲染
同构渲染
- 服务器完成首屏输出 客户端接管页面交互
- 拥有客户端渲染和服务端渲染优点
- 解决seo和首屏慢的问题
缺点： 1. 开发条件有限 （浏览器特定代码只能在某些生命周期使用，外部扩展库需要特殊处理才能在服务端运行，不能在服务端操作DOM,某些代码操作要区分环境）
2. 构建部署要求更高，需要构建两个端，只能部署在nodejs服务器
3.更多的服务端负载
nuxt使用
- cnpm i nuxt
- 初始化package.json 修改script命令 dev:nuxt
- 项目目录新建pages目录，目录新建vue文件
- npm run dev运行项目
- 页面在pages中通过vue文件会自动生成对应路由配置加载对应文件
路由导航
- a标签 会刷新页面 去服务端渲染
- nuxt-link
- 编程式导航
- 动态路由 user文件夹新建_id 会生成 user/id动态路由
- 嵌套路由 user.vue文件同级下的user文件夹会作为user的子路由
自定义路由配置
module.exports = {
router:{
base:"/m",
//自定义路由配置 routes路由配置表 resolve解析路由组件路径
extendRoutes(routes,resolve){
routes.push({
name:"hello",
path:"/hello",
component:resolve(__dirname,'pages/about.vue')
})
}
}
}
自定义模板
- 定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件。
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
<h1>app.html</h1>
<!-- 渲染内容最终注入到这里 -->
{{ APP }}
</body>
</html>
layout
- 根目录新建layouts文件夹，下面新建default.vue,会作为所有页面全局公共组件显示
- 根目录新建layouts文件夹，下面新建foo.vue,在页面通过layout选项指定名字来显示对应组件
<template>
<div>
<div>
layout组件
</div>
<div>
<!-- 页面出口 -->
<nuxt/>
</div>
</div>
</template>
<script>
</script>
<style>
</style>
asyncData
- 会将asyncData返回的数据和data中的数据进行合并返回给组件
- 服务器渲染客户端路由更新之前调用 (路由更新切换在客户端调用)
- 只能在页面组件中使用
- 没有this
- 当动态页面需要seo和首屏渲染速度请求需要使用asyncData发请求拿数据
- 无法使用this 可以在context参数中获取上下文对象，比如路由参数
<template>
<div>
首页
<ul>
<li v-for="item in posts" >{{item}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
async asyncData() {
let res = await axios({
url:"http://localhost:3000/data.json"
})
return res.data //{posts:[...]}
},
}
</script>
<style>
</style>
