Vue
二十三、指令
- 自定义指令
(1)自定义指令介绍 directives - 对普通 DOM 元素进行底层操作
//注册一个全局自定义指令 `v-focus`
Vue.directive('focus',{
//当被绑定的元素插入到DOM中时······
inserted:function(el){
//聚焦元素
el.focus()
}
})
如果想注册局部指令，组件中也接受一个directives的选项：
directives:{
focus:{
//指令的定义
inserted:funcion(el){
el.focus()
}
}
}
(2)钩子函数
- 参数 el,binding,vnode,oldvnode
- bind,inserted,update,componentUpdated,unbind
(3)函数简写
(4)自定义指令-轮播 - inserted 插入最后一个元素时初始化swiper
(5)vue3指令生命周期≈组件生命周期
- nextTick
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
//修改数据
vm.msg='Hello'
//DOM还没有更新
Vue.nextTick(function(){
//DOM更新了
})
this.$nextTick()
二十四、vue-cli 4.5的使用
npm install -g @vue/cli (一次安装) vue --version 查看版本
vue create myapp
*npm run serve开发环境构建
*npm run build生产环境构建
*npm run lint代码检测工具
1 style标签加上scoped属性， css局部生效
2 style标签加上lang=“scss”， 支持scss
二十五、eslint修复
- vscode自动修复eslint
安装eslint插件，并启用
[文件]=>[首选项]=>[设置]=>用户，找到setting.json,加上以下配置
"editor.codeActionsOnSave":{
"source.fixAll":true
}
- 关闭eslint
vue.config.js lintOnSave: false
.eslintrc 删除 ‘@vue/standard’ （对于某个规则关闭， no-new:“off” ）
或者，你也可以通过设置让浏览器overlay同时显示警告和错误：
//vue.config.js
module.exports={
devServer:{
overlay:{
warnings:true,
errors:true
}
}
}
二十六、反向代理&别名
首先找到 vue.config.js文件
在request.js里面配置
devServer: {
port:8000, //随便改端口号
proxy: {
'/api': {
target: 'https://*.*.com',
host: '*.*.com',
changeOrigin:true
}
}
}
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
alias别名配置
@ is an alias to /src
// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
}
}
},
}
二十七、spa&路由引入
SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。
单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势:减少了请求体积，加快页面响应速度，降低了对服务器的压力(以前的开发是jsp,现在是html–静态页面不用访问服务器) 更好的用户体验，让用户在web app感受native app的流畅
1.重定向
当进入页面时，你希望第一个跳转出的是你主页面或者是子页面时
重定向操作{path:‘/’,redirect:‘/login’}
2.声明式导航
<router-link to="路径"> </router-link>
作用:
- 更方便的实现路由跳转, 不需要想要不要加 #, 还会自动添加高亮的类名
- 自动添加类名 router-link-active 模糊匹配 router-link-exact-active 精准匹配
- router-link实质上最终会渲染成a链接 to属性等价于提供 a 标签 href属性(to无需#)
说明: - router-link是 VueRouter提供的全局组件 本质就是a标签
- router-link当标签使用 必须传入to属性 指定路由路径值
注意:
to属性设置跳转路径
3.嵌套路由
通过 Vue Router，你可以使用嵌套路由配置来表达这种关系
4.编程式导航
不可跳转到指定路径:
向前或向后跳转n个页面，n可为正整数或负整数
可跳转到指定路径：
this.$router.push('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.replace('/');(不携带数据跳转，一般可以直接跳转到登录页)
this.$router.push('/xxx')(不携带数据跳转)
this.$router.push({
path:'/xxx'})(不携带数据跳转)
this.$router.push({
name:'xxx'})(不携带数据跳转，路由里需要配置name)
this.$router.push({
path:'/xxx',query:{
data:'data'}})//类似get请求 数据会暴露在地址栏 (携带数据跳转)
this.$router.push({
name:'xxx',params:{
data:'data'}})//数据不在地址栏 (携带数据跳转，路由里需要配置name)
5.动态路由
动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()
调用 router.replace()
router.addRoute({
path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)
通过使用删除路由
router.removeRoute()
按名称删除路由：
router.addRoute({
path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用Symbol作为名字。
当路由被删除时，所有的别名和子路由也会被同时删除
6.命名路由
//1-通过路径跳转
this.$router.push(`/detail/${
id}`)
//2-通过命名路由跳转
this.$router.push({
name:'ziminDetail',
params:{
id
}
})
7.路由模式
HTML5 History模式
vue支持两种模式
a. hash #/home
b. history /home
- hash路由=> location.hash切换
window.onhashchange 监听路径的切换 - history路由=>history.pushState切换
window.onpopstate 监听路径的切换
8.路由拦截
通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权 如果权限不够，访问的路径虽然存在但会被拦截。
9.路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：
// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')
const router = createRouter({
// ...
routes: [{
path: '/users/:id', component: UserDetails }],
})