vue 项目总结

vue 项目总结

vue组件传值的三种方式

父传子：父子组件的关系可以总结问prop向下传递，事件向上传递

子组件：

父组件：

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可；

子传父

子组件：$emit

父组件：

**子传父的实现方式就是用this.emit的第二个参数，将值作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定自定义事件的监听；

非父子传值

使用中央事件总线 bus：非父子关系的两个组件之间也需要通信，在简单的场景下，可以使用一个空的Vue实例作为事件总线，原理就是把vue实例当作一个中转站。

 var bus =  new Vue(); //创建事件中心

组件A

// 触发组件 A 中的事件
     


     methods: {
      eve() {
       bus.$emit('change','hehe'); //bus触发事件
       }
      }

组件B

// 在组件 B 创建的钩子中监听事件

 

  created() {
     bus.$on('change', () => {   // bus接收事件
       this.msg = 'hehe';
      });
    }

使用vue

vue SSR

理解 ：服务器端渲染

使用vue构建客户端应用程序时，默认情况下时在浏览器中输出vue组件，进而生成DOM和操作DOM，而使用SSR可以将同一个组件渲染为服务端的HTML字符串，然后将他们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。

如何看待一个网页是否是服务端渲染？

简单的方式就是打开开发者工具查看Network中加载的资源，如果返回的第一个文件总是document类型，这是服务器发送过来的完整HTML文档，浏览器只需要加载css/js进行视图渲染即可；

这里说的渲染，就是指生成HTML文档的过程，和之前浏览器的css+html渲染没有关系，简单来说，浏览器端渲染，指的是用js去生成HTML，列入vue，react等前端框架做的路由。 服务器端渲染，指的是用后台语言通过一些模板引擎生成HTML，列入java配合VM模板引擎，nodejs配合jade等，将数据与视图整理出完整的HTML文档发送给浏览器。

nuxt.js

简单来说，Nuxt.js 是一个基于Vue的通用应用框架，采用SSR(Server Side Rendering 服务端渲染);目的是为了解决单页面应用的 SEO 问题；vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成HTML挂载于id为app的DOM元素上，这样会存在两个大问题：

1.由于页面内容是通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，也就是用户搜不到此网站的相关信息，不利于SEO；
2.资源请求量大，造成网站首屏加载缓慢，不利于用户体验

具体内容详见NUXT.js开发心得；

ES6

node.js

js总结

链接：https://blog.csdn.net/cmy0816/article/details/81291766