vue总结

1.Vue CLI

1.1.脚手架2中runtime-compiler和runtime-only的区别

区别：
1、runtime-only 比 runtime-compiler 轻 6kb
2、runtime-only 效率更高，打包更快
3、runtime-only 其实只能识别render函数，.vue文件中的也是被 vue-template-compiler 翻译成了render函数，然后将内容给v-dom
4、runtime-compiler 将template模板解析成抽象语法树，然后将抽象语法树在编译成render函数。而runtime-only没有执行上面的两步操作，直接通过vue-template-compile翻译成了render函数，然后将内容给v-dom

• 1.1.1.ESLine到底是什么？

ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，ESLint 这样的工具可以让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。

• 1.1.2.模板template的转化–>ast–>render–>vdom–>真实DOM

• 1.1.3.render:(h) =>h(App),–>creatElement

render: function (createElement) {
    return createElement(App);
}

进一步缩写为(ES6 语法)：

render (createElement) {
    return createElement(App);
}

再进一步缩写为：

render (h){
    return h(App);
}

按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

1.2.Vue CLI3

1.2.1.如何通过CLI3创建项目

1.2.2.CLI3的目录结构

1.2.3.配置文件：1.Vue UI 2.隐藏的配置文件 3.自定义vue.config.js

2.Vue-Router

2.1.什么是前端路由

前端路由不同于传统路由，它不需要服务器来进行解析，而是通过一个hash函数或者H5提供的history API来实现。在进行开发时，路由用来设定访问路径，并将路径与相应的组件映射起来，用户在访问相应的路径时，路由根据映射关系实现不同组件间的切换，整个过程都是在同一个页面中实现，不涉及页面间的跳转。

2.2.路由的基本配置

安装vue-rounter
Vue.use–>创建vueRouter对象–>挂载到Vue示例上
配置映射关系：1.创建组件2.配置映射关系3.使用router-link/router-view

2.3.细节处理

默认路由：redirect
mode:history
router-link->tag/replace/active-class

2.4.动态路由

/:user/:id
this.$route.params.id

2.5.参数的传递

params
query->URL
URL:
协议：//主机：端口/路径？查询
scheme://host:port/path?query#fragment

2.6.路由嵌套

children[]

2.7.导航守卫

全局导航守卫
路由独享守卫
组件类守卫