运维开发网

vue 开发忽略的有用的技巧

运维开发网 https://www.qedev.com 2020-07-23 17:52 出处:网络 作者:运维开发网整理
1.require.context() 加载文件夹下所有的文件,例子: 将 global 文件夹下面所有的组件设置为全局组件,但是不包括 index.vue  index.js:  import Vue from ‘vue‘; // 自动加载 global 目录下的 .vue 结尾的文件 const componentsContext = require.context(‘./‘, true,

1.require.context()

加载文件夹下所有的文件,例子: 将 global 文件夹下面所有的组件设置为全局组件,但是不包括 index.vue

vue 开发忽略的有用的技巧

 index.js: 

import Vue from ‘vue‘;
// 自动加载 global 目录下的 .vue 结尾的文件
const componentsContext = require.context(‘./‘, true, /\.vue$/);
componentsContext.keys().forEach(component => {
  if (component.startsWith(‘./index‘)) return;
  const componentConfig = componentsContext(component);
  const ctrl = componentConfig.default || componentConfig;
  Vue.component(ctrl.name, ctrl);
});

2.watch

vue 开发忽略的有用的技巧

3.$attrs

vue 开发忽略的有用的技巧

 

 

 

vue 开发忽略的有用的技巧

4.$listeners

vue 开发忽略的有用的技巧

5.路由传参

// 路由定义
{
  path: ‘/describe‘,
  name: ‘Describe‘,
  omponent: Describe
}

// 方案1
this.$router.push({
  path: `/describe/${id}`,
})
this.$route.params.id


// 方案2
this.$router.push({
  name: ‘Describe‘, // 必须设置路由名字
  params: { id: id }
})
this.$route.params.id

// 方案3
this.$router.push({
  path: ‘/describe‘,
    query: {
      id: id
  `}
)
this.$route.query.id

 

方案二:必须设置路由名字;参数不会拼接在路由后面,页面刷新参数会丢失

方案一和三: 参数拼接在后面,丑,而且暴露了信息

6.异步组件

全局异步组件:

vue 开发忽略的有用的技巧

 

局部异步组件:

vue 开发忽略的有用的技巧

 

处理异步组件加载状态:

vue 开发忽略的有用的技巧

7.递归组件

递归组件: 组件在它的模板内可以递归的调用自己,只要给组件设置name组件就可以了。

必须给一个条件来限制数量,否则会抛出错误: max stack size exceeded

vue 开发忽略的有用的技巧

8.事件修饰符

.stop: 阻止冒泡
.prevent: 阻止默认行为
.self: 仅绑定元素自身触发
.once: 2.1.4 新增, 只触发一次
.passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用

9.router-view 的 key

vue 开发忽略的有用的技巧

 

10. 样式的 <<<; scss中的deep属性

一般样式:

vue 开发忽略的有用的技巧

 

 添加 <<<:

vue 开发忽略的有用的技巧

 

 

scss:

vue 开发忽略的有用的技巧

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号