2019年最全最新Vue、Vuejs教程,从入门到精通【p91-p118】

本文深入探讨Vue CLI的安装与项目创建,详细讲解runtime-only与runtime-compiler的差异,解析vue-cli3的新特性与配置方式。同时,介绍箭头函数的使用场景和路由原理,包括前端路由的实现与vue-router的集成。最后,讨论keep-alive的实战应用,包括标题动态更新与组件缓存策略。
摘要由CSDN通过智能技术生成

一、Vue CLI
1.什么是Vue CLI
-CLI是Command-Line Interface ,翻译为命令行界面,俗称脚手架。
-Vue CLI是一个官方发布vue.js项目脚手架
-使用vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

2.安装Vue CLI
-npm install -g @vue/cli 安装脚手架2:npm install -g @vue/cli-init
-vue create 项目名称 /vue init webpack 项目名称 脚手架3和2创建项目的方式

在这里插入图片描述

二、runtime-only和runtime-compiler的区别
1.两者在vue中的渲染过程
-runtime-compiler: 在vue中保存的template 首先会解析成一个 ast(abstract syntax tree )然后再进行编译成一个render函数,通过执行render函数,会把template中的内容添加到虚拟DOM中,最后显示到浏览器里。 整体的过程也就是 template->ast->render函数->virtual dom -> UI
-runtime-only:会直接通过render函数 把vue中的内容添加到虚拟DOM中,最后显示到浏览器里。整体的过程也就是 render函数->virtual dom -> UI。 而.vue文件中的template是由加载的vue-template-compiler解析成了render函数
在这里插入图片描述
2.两者的区别
-runtime-only(1.性能更高 2.代码量更少)
-runtime-compiler

3.render函数
-语法 : render:function(createElement){
//第一个参数是标签名,第二个参数是标签的属性,第三个参数是标签的内容
return createElement('h2",{class"box"},[‘h2里面的内容’])
}
-render函数还可以传入组件对象 render:function(h){
return h(组件)
}

在这里插入图片描述

三、vue-cli3
1.vue-cli3和2的区别
-vue-cli3是基于webpack4打造,vue-cli还是webpack3
-vue-cli3的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
-vue-cli3提供了vue ui命令,提供了可视化配置,更加人性化
-移除了static文件夹,新增了public文件夹,并且index.html移动到public中

2.vue-cli3的配置
-可以使用vue ui 进入GUI界面(可视化界面)查看 修改配置
-也可以在项目文件下创建一个vue.config.js,在这里面进行配置的修改

四、箭头函数
1.箭头函数的写法
-const obj = (n) => { return nn }
-当参数只有一个时,可以不用写小括号 当返回值只有一个时,可以不用写大括号和return
即可以这样写:const obj = n => n
n
2.什么情况下可以使用箭头函数
-一般来说,当一个函数作为另外一个函数的返回值(回调函数)的时候,我们使用箭头函数

(补充this的指向问题)
this的指向问题详解

五、路由
1.什么是路由?
-路由是一个网络工程里面的术语,路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动
-路由器提供了两种机制:路由和转送。 路由是决定数据包从来源到目的地的路径,转送将输入端的数据转移到合适的输出端。
-路由中有一个非常重要的概念叫路由表,路由表本质上就是一个映射表,决定了数据包的指向。

2.后端渲染和后端路由
-当我们的用户通过浏览器,向服务器发送url请求的时候,我们的服务器会直接调取在服务端已经通过jsp写好的页面,返回给客户端进行展示,这个就叫做后端渲染
-那么,当发送了多个URL给服务器的时候,服务器通过正则对这些url进行匹配,并最后交给一个控制器进行处理,控制器最后生成HTML或数据 ,返回客户端,这一过程就叫做后端路由
-后端路由的优点:【1】这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
-后端路由的缺点:【1】前端的模块要交给后端人员编写和维护,而前端人员要编写网页的话还需要使用PHP和Java等语言来编写,通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情

3.前端渲染
-前后端分离阶段;后端只负责提供数据,不负责任何阶段的内容
-前端渲染:浏览器中显示的网页中的大部分内容,不再是从后端渲染好返回的,而是通过从静态服务器中请求来的js代码,在浏览器中执行,最终渲染出来的网页。

在这里插入图片描述

4.前端路由
-在SPA中,整个网页只有一个页面,当我们输入网页的时候,网页会从静态资源服务器中请求全部的资源。
-当我们需要在这个网页中去切换到其页面的时候,这里并不是去再向静态资源服务器请求网页的资源,而是从我们第一次加载的资源中,通过前端路由的规则,来获取我们这个网页需要的组件资源,进行渲染。
-前端路由:管理SPA中不同url和网页与组件资源的映射关系

5.url的hash和HTML5的history
-使用location.hash(‘newpage’) 可以在不刷新页面的情况下,切换新的url
-使用history.pushState({},’’,‘newpage’)方法 也可以在不刷新页面的情况下,切换新的url,使用history.back相当于history.go(-1)可以在不刷新页面的情况下,返回上一次的页面。history.forward()相当于history.go(1)可以在不刷新页面的情况下,进入下一次页面
-使用history.replaceState({},’’,‘newpage’)这种方法会将当前页面替换,不能再返回

六、vue-router
1.vue-router是和vue.js深度集成的,适合用于构建单页面应用
-vue-router基于路由和组件的
-路由用于设定访问路径,将路径和组件映射起来
-在vue-router的单页面应用中,页面的路径的改变就是组件的切换
2.使用vue-router
-<router-link标签,该标签是一个vue-router中已经内置的组件,它会被渲染成一个a标签
-<router-view标签,该标签会根据当前的路径,动态渲染出不同的组件
-网页的其他r内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view处于同一个等级
-在路由切换时,切换的是<router-view挂载的组件,其他内容不会发生改变
3.配置默认首页
-可以在路由配置中,使用redirect:‘/home’(重定向),将首页设置成路由的默认值
4.修改网页路径为history模式
-可以在路由配置中,添加一个mode属性,设置mode:‘history’,将url模式从哈希设置成html5的history模式
5.router-link的其他属性的补充
-tag:tag可以指定router-link之后渲染成什么组件,比如:tag=“button” 可以渲染成一个按钮
-replace:replace不会留下history记录,所以指定replace的情况下,后退键不能返回到上一个页面中
-active-class:当router-link对应的路由器匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称。(也可以在路由当中使用linkActiveClass:'active’将所有的router-link一次性修改)
6.使用代码的方式跳转路由
在这里插入图片描述
7.认识路由的懒加载
1.起因
-当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由器被访问的时候才加载对应组件,这样就更加高效了
2.懒加载的作用
-路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块,只有在这个路由被访问到的时候,才加载对应的组件
3.懒加载的语法
-const home = () => import("…/components/home.vue");

8.vue-router中router和route的区别
1.router
-router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象
2.route
-route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等

9.前置守卫
-网页标题是通过title标签来实现的,但是SPA只有一个固定的HTML,切换不同页面时title不会发生变化,但是我们可以通过JavaScript来修改title的内容 可以使用document.title=“新的标题”
-在vue路由中可以通过导航守卫的方法,来实现标题的改变
-语法:router.beforeEach((to,from,next)=>{
// 从from跳转到to
document.title=to.matched[0].meta.title,
console.log(to),
next()
})

10.后置钩子
-router.afterEach((to,from)=>{
console.log("-----")
})

七、keep-alive
1.router-view与keep-alive
-router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存
-keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

2.keep-alive中的两个函数
-activated函数,这个函数当组件活跃时生效
-deactivated函数,这个函数当组件不活跃时生效

3.实现保留上一次组件路径状态的代码。
在这里插入图片描述
4.keep-alive中重要的属性
-exclude 语法:exclude=“name” 可以排除某一个组件的keep-alive
-include 只有匹配的组件才会使用keep-alive

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值