vue2 开发总结

Z时代
2024-01-10
分类：综合

vue

vue-cli学习资料：

http://m.php.cn/article/394750.html 或

https://www.cnblogs.com/zhanglin123/p/9270051.html

vue-cli 实践案例： https://blog.csdn.net/yuanyuanispeak/article/details/73530523

1、vue插件全局都用（toast 插件示例）：https://www.jb51.net/article/121120.htm 或 https://blog.csdn.net/qq_34802010/article/details/81668692（推荐，亲测有效）

感悟：vue组件：在使用的地方要引入这个vue 文件。 vue 插件：显示的ui放在一个vue文件中，vue插件需要一个js文件进行使用处理的。main.js只要加载这个js文件。

2、路由配置中 meta字段（元数据）的作用：https://www.jianshu.com/p/33c9e7454028 或 http://m.hangge.com/news/cache/detail_2130.html

　　简单理解，就是给对应的路由添加一些信息（状态），对应这个url地址的页面，可以是获取到这些信息的（状态）。

{
  path: '/msite',
  component: msite,
  meta: { keepAlive: true },
},

<router-view v-if="$route.meta.keepAlive"></router-view> <!-- 页面中获取路由 meta中keepAlive字段的信息 -->

3、v-for循环列表中，还有一种 v-for="n in 10" 的循环用法。 n 由原来的 0 ～ 9 迭代变成 1 ～ 10 迭代。

4、vue数据操作DOM，数据的变化不会马上引起DOM的变化。所以需要DOM渲染出来后，再操作的DOM的逻辑，要放到 this.$nextTick()回调中执行。https://cn.vuejs.org/v2/api/#vm-nextTick 如下：

<img v-if="voiceCancel" src="./img/voice.png" alt="" ref="voiceImg">    <!-- voiceCancel起始为false -->
<button @click="voiceSerch">点击</button>

    voiceSerch(){
      this.voiceCancel = true  // voiceCancel 初始为false
      console.log(this.$refs.voiceImg);  // undefinde，这里虽然 voiceCancel为true了，但是html还没有渲染出来，所以是获取不到这个dom对象的
    }

这里获取 img 的DOM对象要放到 this.$nextTick()回调中，即

    voiceSerch(){
      this.voiceCancel = true  
      this.$nextTick(function(){
      console.log(this.$refs.voiceImg);  // 这里DOM已经渲染好了，所以可以获取到 img 对象
      });
    }

5、自定义组件的 v-model：https://www.cnblogs.com/rachelch/p/8944367.html（推荐）或官网介绍

　　官方也说明了,v-model只不过是一个语法糖而已,真正的实现靠的还是

1. v-bind : 绑定响应式数据

2. 触发 input 事件并传递数据 (核心和重点)

6、vue-cli中文件路径使用别名：https://blog.csdn.net/qq_29018891/article/details/90381333

　　html中：@

　　css中：~@ ，并且不要写成字符串

　　js中：@

7、单页应用路由跳转后scrollTop 不是0：https://blog.csdn.net/wang1006008051/article/details/81366355?utm_source=blogxgwz3

　　解决方案1：手动设置

window.scrollTop(0,0)

　　解决方案2：vue-router路由提供的接口设置。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 }
  }
})

8、路由与页面间导航： https://www.jianshu.com/p/bc923ec4d28b

　　a、<router-link :to="{ name : 'explorer' }"> 和 <router-link :to="/explorer"> 的区别是前一个是以路由的name作为参数，后一个是以path属性作为参数。

　　b、动态路由：（需要好好研究下）

9、vue同级可以有多个router-view视图： https://blog.csdn.net/qq_34664239/article/details/79639459

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

10、vue-cli 中组件的使用（两种方式）：

　　a、在main.js文件中进行全局注册，在需要使用这个组件的地方，组件使用这个组件的标签就可以了。注： Switch.name 应该是这个组件默认的标签名，可以设置成自定义的标签名。

// main.js 文件
import { Switch } from 'mint-ui';
Vue.component(Switch.name, Switch);

　　b、main.js 中不动，直接在需要使用的地方，引入这个组件，在 components 选项中注入这个组件。

//  需要使用这个组件的 .vue文件中
import { Switch } from 'mint-ui'
export default { 
    name: 'order',
    components: {
        mtSwitch: Switch
    }
}

11、vue-cli 中 webpack的代理使用： https://www.cnblogs.com/goloving/p/8901189.html 或 https://www.jb51.net/article/130509.htm （推荐）或 https://www.cnblogs.com/ye-hcj/p/7077796.html

proxyTable选项是一个代理表（明确 代理服务器是后端的程序，修改 需要重启程序）。前端有理由表，后端有也有理由表，代理也有路由表（即代理表）。

路由表上的地址都是不写域名和端口的，一般服务器会自动把他们加上去的（严格的说也不是添加上去，前端中，访问这个网页，既然能够访问这个网页，自然域名端口是有的，后端也是一样。代理服务器更是这样，既然能够访问代理服务器，这个域名端口自然也是有的）。

proxyTable: {

'/api': { // 只要在接口中看到 ‘/api‘ 会自动变成我们设置的地址（个人觉得，这里应该是作为匹配请求的地址参数） (理解：应该是自动把前面的协议、域名、端口（即host）替换成我们设置的目标host，下面有一个重写关键字的选项)

target: 'http://localhost:3000', （这里是代理接口的位置）

changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）

pathRewrite: {

'^/api': '' // 因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'或''

}

}

　// (个人)注意：上面的看到 ‘/api‘ 会自动变成我们设置的地址，这个api是绝对路径，服务器地址端口/api（如:http://localhost:9090/api，这点所有的教程里都没有明确的说出来）。
　　　　　　　　　即将 http://localhost:9090/api 变成 http://localhost:3000/api。这里只是将域名端口替换。下面的重写选项，将api再去掉，然后发送请求接口。

npm run dev启动webpack时，命令行中会把对应的代理对应关系显示出来

12、proxy的代理、抓包：https://blog.csdn.net/a0405221/article/details/85234149 或 https://juejin.im/post/5c6baf776fb9a049f746c335（onProxyReq 请求发送前触发的事件；onProxyRes 请求响应后触发的事件）

　为什么使用这个： webpack是没有日志的，代理某个API接口时，如果调用失败（postman上调用目标接口是有效的）。则无法确认代理后请求的目标地址url是不是正确的，很难排除错误原因。

　但是通过 onProxyRes 事件就可以知道，当前 ajax请求有没有触发这个代理请求，如果触发了代理请求，可以知道代理后目标服务器的url和请求参数；如果没有触发请求这个代理请求，要么是没有匹配到代理的字段，要么是被其他的代理字段先匹配到了，

　　比如两个匹配字段 "/api" 和 "/apireq"，如果代理的字段是apireq，则会被api这个字段给代理了，触发了 "/api" 的代理事件，但没有触发"/apireq"的代理事件。(亲测有效)

 proxyTable: {
      '/api1': {
        target: 'https://test.iconntech.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api1': '/'
        },
        onProxyReq: function(onProxyReq, req, res) { // req和res分别是Express框架封装的Request对象和Response对象
          console.log('代理字段', '/api1');
          console.log('前端请求url', onProxyReq._headers.origin + req.originalUrl);  // 这里的输出是自己配的，仅做参考
          console.log('目标请求url1', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + req.url); // 代理配置的target只有host，没有后面的目录
          console.log('目标请求url2', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + onProxyReq.path); // 代理配置的target,有二级目录
        },
        onProxyRes: function(){
          console.log('2');
        }
      }
    }

13、对组件的扩展 —插槽 slot ： https://blog.csdn.net/zhouzuoluo/article/details/80536754

通俗理解：是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑

14、vue中的ref作用：可以实现DOM的联动操作

　　a、ref 加在普通的元素上，用this.$refs.name 获取到的是dom元素 ,减少获取dom节点的消耗参考： https://www.cnblogs.com/xueweijie/p/6907676.html

　　b、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法参考： https://www.cnblogs.com/daiwenru/p/7910363.html

15、vue插件：(如 vue-touch) https://cn.vuejs.org/v2/guide/plugins.html

　　a、开发插件： Vue.js 的插件应当有一个公开方法 install

　　b、使用插件：通过全局方法 Vue.use() 使用插件

注：Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。这样的插件就不用使用Vue.use()了。

16、vue实例中template: '<App/>',这样写是什么意思： https://segmentfault.com/q/1010000008863503

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'    //  template 的内容会替换 el 选项中对应的标签的。 可以参考 vue官网 https://cn.vuejs.org/v2/api/#template

})

19、vue 中使用scoped关键字后样式不能修改第三方组件问题：

　　原因： https://www.jb51.net/article/143272.htm

　　解决方案： https://www.cnblogs.com/goloving/p/9119265.html 或 https://www.cnblogs.com/tongjiaojiao/p/11511964.html（推荐）

　　　推荐解决方案：

.gHeader ::v-deep .name{ //第一种写法
    color:red;
  }

　　注意【亲测bug】：vue-cli3中使用 /deep/ 在选择器的最后面就会失效。后面发现有个 ::v-deep，使用这个就有效了。如下，无效

.gHeader /deep/ {   //vue-cli3中， /deep/ 在选择器最后面，就会失效。但是不报错
    .name{
        color:red;
    }
}

原因分析： style标签中添加了scopde 属性后，vue-loader编译vue文件时：

　　编译 template 时会给每一个标签加上相同的自定义属性 data-* ；

　　编译 style 会给每一个选择器（整体的一个）的后面加上这个属性 elm[data-*] ；

　　但是第三方组件中的标签是不会添加这个自定义属性 data-* 的，所以编译后的这个选择器 elm[data-*]，在第三方的组件中找不到这样的标签。

上面推荐解决方案的原理：

　　就是把选择器后面的属性去掉，放到第一基本选择器上。如下面这样

.gHeader[data-*] .name

20、vue组件的is特性： https://www.cnblogs.com/x123811/p/8329289.html

　　作用：因为vue模板就是dom模板，使用的是浏览器原生的解析器进行解析，所以dom模板的限制也就成为vue模板的限制了。

　　如：ul 标签中放入非li标签，就会被浏览器踢出去（浏览器的容错机制），这样我们在ul里面放入组件标签（组件标签名肯定不会是li）就会被踢出去。

　　　　使用is属性就是为了解决浏览器容错机制导致的组件标签无效的问题。

　　原理（个人理解）： is属性所在的标签名，只是一个临时占位标签，正在使用的是is指向的组件名。如：下面的li只是占个位置，正在的渲染后的内容还是v-li组件。参考： https://blog.csdn.net/zhumengzj/article/details/79300784 （往下面浏览）

<ul>
    <li is="v-li"></li>
</ul>

　这个 is 特性的作用同样起到了动态组件的效果： https://blog.csdn.net/m0_37479246/article/details/78915665

22、VUE配置 ip地址访问：

　　方法 1、2：

　　https://segmentfault.com/q/1010000014797068（localhost和IP地址都可以使用,但是启动的是0.0.0.0地址访问的，需要自己在地址栏重新输入有效的域名或IP地址）或

　　方法 3 ：（推荐这个，IP地址可以是动态变化的）

　　https://blog.csdn.net/m0_37036014/article/details/79639788 （缺点就是 localhost访问无效，但是在ip可以的时候，localhost根本不需要使用，所以不影响）

28、vue-cli按需加载，懒加载组件：https://www.cnblogs.com/love314159/p/9284727.html

29、vue 导航守卫【即路由守卫】：https://www.cnblogs.com/elfpower/p/9230528.html 或官方文档

　　概念：正如其名，导航守卫主要用来通过跳转或取消的方式守卫导航。

路由的改变或首次进入就会执行里面的函数，调用next()方法，页面才会跳到对应路由的页面进去。

　　全局的路由守卫分：全局前置守卫【常用这个】、全局解析守卫、全局后置钩子

// 全局路由守卫
router.beforeEach((to, from, next) => {
  console.log('守卫')
  next() // 必须使用 next ,执行效果依赖 next 方法的调用参数
})

// 全局解析守卫【和 beforeEach的区别，主要就是时间的不同。路由组件解析后调用】

router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

// 全局后置钩子【和 守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身】
router.afterEach((to, from) => {
  // ...
})

路由独享的守卫：beforeEnter【常用】。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的路由守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

30、

以上是 vue2 开发总结的全部内容，来源链接： utcz.com/z/375721.html

vue2 开发总结

其他人也看了：