Vue要点

最新推荐文章于 2024-04-04 09:50:26 发布

@小匠

最新推荐文章于 2024-04-04 09:50:26 发布

阅读量307

点赞数

分类专栏： JavaStudy2020 前端文章标签： vue

本文链接：https://blog.csdn.net/qq_45629145/article/details/111413944

版权

前端同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

JavaStudy2020

35 篇文章 1 订阅

订阅专栏

回调函数

回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调

混入 (mixin)

提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

1. 组件

1、组件化开发时，为了不影响多个组件之间的样式，可以在组件的style元素里面，添加一个scoped属性

2. 路由

要点：

1、在router文件夹中添加index.js
2、导入vue
3、导入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

4、导入需要跳转的组件

import Film from '../views/Film.vue'

5、注册模块Vue.vse（Vuerouter)，在这里会自动注册全局组件router-view，所以需要显示路由跳转到的组件内容时，不必导入

Vue.use(VueRouter)

6、声明一个数组，用于存放需要跳转的组件路径及名称

const routes = [
    {
        path: '/film',
        component: Film
    },
]

7、创建VueRouter对象，传入数组

var router = new VueRouter({
    routes,//如果属性名和赋值的属性名相同则可以简写，比如routes=routes
})

8、最后到处VueRouter对象

//导出
export default router

9、多个组件之间跳转，使用<router-link>声明式导航

10、重定向：

    {
        path: '*',//无论输入什么路径都会跳转到指定的路径，优先级最低
        redirect: '/film'
    }

11、补充：

声明式导航：a链接

<router-link to="/组件名" tag="标签名" active-class="myclass">XXX</router-link>

编程式导航：location.href

this.$router.push('/组件名')

12、动态路由

在路由配置文件中，在需要跳转到某个组件的路径后加入:自定义属性名即可动态的跳转至该组件并且代入参数,比如

handleClick(id) {
      this.$router.push(`/detail/${id}`) //编程式导航
    }

不管后面传入的是什么都可以跳转到指定的组件

{
        path: '/detail/:id', //动态路由
        component: Detail
    }

13、补充

this.$route：获取到当前匹配的路由对象信息
this.$router：获取路由对象

14、路由模式切换
15、路由守卫：拦截器
全局守卫

//全局路由守卫
router.beforeResolve((to,form,next)=>{
    const auth = ['/center','/order']

    if (auth.includes(to.fullPath)) {
        //验证token
        if (localStorage.getItem('token')) { //如果有token就放行
            next()
        } else next('/login')
    }
})

组件内的守卫

<script>
export default {
  //组件内部拦截
  beforeRouteEnter(to,form,next) {
      //验证token
      if (localStorage.getItem('token')) { //如果有token就放行
        next()
      } else next('/login')
    }
}
</script>

16、路由懒加载

{
        path: '/login',
        component: () => import('../views/Login') //路由懒加载，在使用时才加载
    }

17、添加反向代理解决跨域手册
在项目根目录添加vue.config.js

//反向代理
module.exports = {
    devServer: {
        proxy: {
            '/ajax': {
                target: 'https://m.maoyan.com',//需要代理的网址
                changeOrigin: true
            }
        }
    }
}

在Ajax请求的路径中去除域名，只留下路径

如何使用router-link对象方式传递参数？

要点总结：

在vue-router中，有两大对象被挂载到了实例this；
$route（只读、具备信息的对象）；
$router（具备功能的函数）

查询字符串：
去哪里？

<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

导航（查询字符串path不用改）

{name:'detail',path:'/detail',组件}

去了干嘛？获取路由参数（要注意是 query ，还是 params 和对应的 id 名? 是后者需要注意设置相关文件的id规则）

+ this.$route.query.id

path方式：
去哪里？

<router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>

导航（查询字符串path不用改）

{name:'detail',path:'/detail/:name',组件}

去了干嘛？获取路由参数（要注意是 query ，还是 params 和对应的 name 名? 是后者需要注意设置相关文件的id规则）

+ this.$route.params.id

组件之间传值

1、父传子
使用props
2、子传父，自定义事件$emit
3、兄弟组件传值，使用bus
举例：
将Ajax请求的数据传递给另外一个组件中

main.js中加入
在这里插入图片描述

在这里插入图片描述
经过测试，可用！

给组件中的data（）的数组赋值

在这里插入图片描述

swiper 轮播图划不动问题

所以在原来的swiper初始化代码中加上这两行即可。

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

在这里插入图片描述

axios模块封装，抽取复用部分

在这里插入图片描述

import axios from "axios";

const http = axios.create({
    baseURL: 'https://m.maizuo.com',  //请求的路径会与组件中异步请求的路径拼接起来
    timeout: 10000, //请求超时时间
    headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"160860133388407606820865","bc":"310100"}',
        //复用部分
    },
})

export default http //导出，在组件中需要导入，但不需要导入axios

比如：

<script>
import http from "../util/http";  //@ src的绝对路径

export default {
name: "Detail",
  mounted() {
    //console.log(this.$route.params.id)
    let id = this.$route.params.id;
    http({
      url: `/gateway?filmId=${id}&k=6243259`,
      type: 'GET',
      headers: {
        "X-Host": "mall.film-ticket.film.info",
      },
    }).then(res => {
      console.log(res.data)
    })
  }
}
</script>

要点记载

1、动态绑定的和静态绑定的属性渲染后会合在一起
比如： <div :style="{backgroundImage:'url('+item+')'}" style="height: 100px"></div>

created和mounted的区别

created：是在模板渲染成HTML前调用的，此时data已经准备完毕，el仍是undefined，因为没有渲染成HTML，所以不能操作dom节点，它主要用来初始化一些数据；

即使created中的方法没有执行完，mounted也会被调用！

mounted：是在模板渲染成HTML之后调用的，此时data，el都已准备好，可以操作html的dom节点，可以通过id什么的来查找页面元素，也可以加载一些组件什么的

computed和methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

store模块拆分

1、按功能分解，比如：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const tabbarModule = {
    namespaced: true, //命名空间
    state: {
        isTabbarShow: true,
    },
    mutations: {
        //修改tabbar显示隐藏
        hide(state, hide) {
            state.isTabbarShow = hide
        },
        show(state, show) {
            state.isTabbarShow = show
        },
    },
    actions: {}
}

export default tabbarModule

2、在index.js中添加modules对象

    modules: {
        cityModule,
        tabbarModule,
        cinemaModule
    }

3、在组件中访问，访问state使用mapState，访问mutations使用mapMutations
使用扩展符号...

  computed: {
    ...mapState('tabbarModule',['isTabbarShow']) //相当于下面的写法
    // isTabbarShow() {
    //   return this.$store.state.isTabbarShow
    // }
  }

4、state在计算属性中写，mutations在方法里面写，因为mutations里面是方法

移动端300ms延迟解决方案

1、300ms延迟由来

300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。那么这和 300 毫秒延迟有什么联系呢？假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。
、解决方案

（1）添加viewpoint meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

（2）FastClick

https://github.com/ftlabs/fastclick

移动端事件触发顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click。

fastclick.js的原理是：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。

fastclick同样可以解决移动端点透现象。

点透现象：当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认click事件（如a标签）或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。点透现象的关键点：

A/B两个层上下z轴重叠。

上层的A点击后消失或移开。（这一点很重要）

B元素本身有默认click事件（如a标签）或 B绑定了click事件。

在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

vue中使用fastclick

添加模块

npm install fastclick --save

在main.js中引入

import fastClick from 'fastclick'
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function () {
    fastClick.attach(document.body);
  }, false);
}

Nginx使用

1、./nginx.exe -s restart 重启服务器
2、reload 重新加载配置文件
3、./nginx.exe -c /conf/nginx.conf 启动服务器
4、将打包好的文件夹dist复制到Nginx根目录
5、修改配置文件

        location / {
            root   dist;
            index  index.html index.htm;
        }

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
官网

反向代理

在vue.config.js文件中

//反向代理
module.exports = {
    devServer: {
        proxy: {  //配置跨域
            '/api': {
                target: 'http://localhost:81/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
                changOrigin: true,  //允许跨域
                pathRewrite: {
                    /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/XXX 时
                      实际上访问的地址是：http://localhost:81/XXX,因为重写了 /api
                     */
                    '^/api': ''
                }
            },
        }
    }
}