vue路由跳转后执⾏跳转后的页⾯⾥的函数_⼩⽩vue⼊坑⾃总
结
⼀、.html页⾯引⼊vue，了解vue的基础指令和整个vue实例的基础架构
1.如何快速地搭建⼀个vue应⽤？
现在不需要提前安装任何环境
· 安装Vue，最简单的是创建⼀个.html页⾯，使⽤<script>标签引⼊Vue
· 创建Vue实例，创建挂载点（dom）
· 设置数据，挂载元素
· 渲染，把vue实例的数据绑定到指定的视图上
2.关于制定模板的⽅式：
1. 以上这种⽅式的模板的来源是通过将Vue实例挂载到⼀个DOM元素上并且将它的内部的HTML作为模板
2. 还可以通过传⼊⼀个字符串给template的⽅式，即把DOM元素内部的HTML传给template。
3. 使⽤渲染函数render
render函数中没有与v-model对应的API，要⾃⼰实现相应的逻辑（不是重点）
3.关于el，template，render属性优先性
当Vue选项对象中有render渲染函数时，Vue构造函数将直接使⽤渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数⾸先通过将template模板编译⽣成渲染函数，然后再渲染DOM树，⽽当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译⽣成渲染函数。
换⾔之，在进⾏DOM树的渲染时，render渲染函数的优先级最⾼，template次之且需编译成渲染函数，⽽挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会⽤于编译与渲染。
搭建好这样的⼀个简单的vue应⽤，就可以对照Vue官⽅教程来学习Vue的基础指令。⼤概到⾃定义事件。这部分主要是理解Vue的响应机制和组件⽣命周期。
4.什么是响应式系统？
概括就是，数据变更驱动视图更新。这样我们就可以以“数据驱动”的思维来编写我们的代码，更多的关注业务，⽽不是dom操作。其实Vue响应式的实现是⼀个变化追踪和变化应⽤的过程。
4.1vue响应式处理：
以数据劫持⽅式，拦截数据变化；以依赖收集⽅式，触发视图更新。利⽤es5 Object.defineProperty拦截数据的setter、getter；getter 收集依赖，setter触发依赖更新，⽽组件render也会变为⼀个watcher callback被加⼊相应数据的依赖中。
四个显著特点：
· 能灵敏响应请求
· 能回复
· 可伸缩扩展
· 基于消息驱动
5.组件。
组件是可复⽤的Vue实例，它接受相同的选项对象，但是Data必须是⼀个函数，还有就是el是根实例特有的选项，另外组件要有⼀个name。
组件分为全局注册和局部注册。
5.1全局注册
全局注册要在根实例（通过new Vue）创建之前发⽣。
5.2局部注册
全局注册不够理想，可以通过⼀个javasScript对象来定义组件，然后在components选项中定义你想要的组件。现在是把这些对象和vue 实例写在⼀个⽂件⾥，我们也可以创建⼏个js⽂件来定义组件，那如何引⽤这些⽂件除了⽤<script>标签引⼊还可以使⽤ES6的模块。
模块的作⽤是将⼤程序拆分成互相依赖的⼩⽂件，再⽤简单的⽅法拼装起来。在ES6之前最主要的模块加载⽅案是CommonJS和AMD两种，分别⽤于服务器和浏览器。ES6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输⼊输出的变量。ES6模块不是对象，⽽是通过export命令显⽰指定输出的代码，再通过import命令输⼊。ES6⾃动采⽤严格模式。
模块功能主要有两个命令构成：export和import。export命令⽤于规定模块的对外接⼝，import命令⽤于输⼊其他模块的功能。
⼆、使⽤npm webpack 构建⼀个Vue单页应⽤
webpack中⽂⽂档：
1.构建步骤webpack打包流程 面试
· 安装node.js（为了保证webpack的正常安装，下载node.js的最新版本），npm包含在node.js之中
· 新建⼀个项⽬，再进⼊项⽬根⽬录执⾏npm init来初始化最简单的采⽤了模块化开发的项⽬（在项⽬根⽬录⽣成package.json⽂件）· 安装webpack(⽬前最新版本是v4.41.2)建议本地安装不要全局安装，如果你使⽤ webpack 4+ 版本，你还需要安装 CLI。
· 在项⽬根⽬录创建webpack的配置⽂件，fig.js。
在项⽬根⽬录下创建⼀个.html⽂件，创建⼀个src⽂件夹，在该⽂件夹下创建⼀个js⽂件、⼀个vue⽂件，这⼏个⽂件的命名要和webpack 配置⽂件⼀致。
1.1webpack中的⼏个核⼼的概念：
Entry：⼊⼝，Webpack执⾏构建的第⼀步将从Entry开始，可抽象成输⼊
Module：模块，在webpack⾥⼀切皆模块，⼀个模块对应⼀个⽂件。Webpack会从配置的Entry开始递归出所有依赖的模块。Chunk：代码块，⼀个Chunk由多个模块组合⽽成，⽤于代码块合并与分割。
Loader：模块转换器，⽤于将模块的原内容按照需求转换成新内容。
Plugin：扩展插件，在webpack构建流程中的特定实际注⼊扩展逻辑，来改变构架结构或者做我们想做的事情。
Output：输出结果，在webpack经过⼀系列处理并得到最终想要的代码后输出结果。
1.2webpack的⼯作流程：
webpack启动后会从Entry⾥配置的Module开始，递归解析Entry依赖的所有Module。每到⼀个Module
就会根据配置的Loader去出对应的转换规则，对module进⾏转换后再解析出当前module依赖的module。这些模块会以Entry为单位进⾏分组，⼀个Entry及其所有依赖的Module被分到⼀个组也就是⼀个Chunk。最后webpack会将所有Chunk转换成⽂件输出。在整个流程中，webpack会在恰当的时间执⾏Plugin⾥定义的逻辑。
1.3如何运⾏安装到本项⽬⾥的webpack
npm script（npm脚本）
直接命令⾏运⾏npm run build，就会在项⽬⾥得到⼀个dist⽂件夹，⾥⾯有⼀个输出的index.bundle.js⽂件，在index.html中引⼊这个js运⾏这个HTML就可以得到想要的结果。
1.4配置HtmlWebpackPlugin插件
以上是不配置HtmlWebpackPlugin插件的时候，配置HtmlWebpackPlugin插件的作⽤是什么？=》不需
要再⼿动对index.html⽂件进⾏管理。当我们修改了⼊⼝起点的名称或者加⼊了⼀个新的名称，这个插件会⾃动更改引⽤⽂件的名称或者添加⼀个新的引⽤。
⾄此已经实现了webpack的基本的构建的过程，并且也知道了如何管理资源、管理输出，接下来应该想办法提升开发效率。
我们希望：
· 提供HTTP服务⽽不是本地预览
· 监听⽂件的变化并⾃动刷新⽹页，做到实时预览
· ⽅便调试
1.5开发环境配置
· 追踪错误和警告，将编译后的代码映射回原始源代码
如果devtool:false
· 代码发⽣变化后⾃动编译代码
选择⼀个开发⼯具webpack-dev-server
三、使⽤vue-cli快速创建Vue项⽬
· 使⽤vue-cli要保证安装了最新版本的node.js.(安装vue-cli要求node版本在8.9及以上，建议是8.11.0+)
· 全局安装webpack使⽤命令 npm install webpack webpack-cli -g，因为webpack4.0+的版本要求安装webpack-cli
· 全局安装vue-cli npm install -g vue-cli
· 使⽤vue-cli来构建项⽬ 使⽤命令 vue init webpack vue-demo
模板下载成功会有⼀些交互的选项供选择，根据⾃⼰的情况⾃主选择，⼀般路由是要的 也推荐使⽤ESLint作为代码规范 包管理器我⼀般选择npm
介绍项⽬的前后端分离过程以及遇到的问题
未完待续....
相关demogithub地址：
github/Xiaobai700/myVueTest.gitXiaobai700/myVueTestgithub/Xiaobai700/myVueTest.git github
项⽬进⾏前后端分离后端接⼝不变单独创建⼀个前端项⽬。
使⽤vue-cli创建⼀个前端项⽬，使⽤ElementUI组件库
实现基本的页⾯跳转（路由）
项⽬中使⽤Vue的官⽅路由vue-router库。
在使⽤vue-cli创建项⽬的时候会有⼀些选项，其中⼀个就是是否安装vue-router，如果你选择yes在最终
创建的项⽬中就会有⼀个router⽂件夹⾥⾯有⼀个index.js⽂件，路由的相关配置就在这个⽂件⾥进⾏。⽽在⼊⼝⽂件中也会引⼊这个router的index.js⽂件。如果你选择了no那就要先安装vue-router，然后⾃⼰创建相关⽂件进⾏相关的配置。
<router-view>
此处的<router-view>是顶级插座。 它使组件与顶层路线匹配。 同样，渲染的组件也可以包含其⾃⼰的嵌套<router-view>。要将组件渲染到此嵌套插座中，我们需要在VueRouter构造函数config中使⽤children选项：
嵌套路线：
页⾯跳转以及传参的⽅式：
<
<router-link :to=”{path:’/user,,query:{userId:123}’}”>
Router.push({path:’/user’,query:{userId:123}’})
获取参数的⽅式：
this.$route.params.userId
导航卫⼠
确定⾸页的布局（组件复⽤）
四个组件：pageAside pageHeader pageTab pageMain
点击pageAside组件中的导航链接，在pageTab中添加相应的tab，在pageMain组件中展⽰相应的页⾯。关于组件之间的通信：
组件之间的嵌套关系如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。