【前端词典】Vue 使用时常见的 5 个问题
前言
今天分享 5 个你或许在使用 Vue 开发过程中也遇到的问题。
Vue 使用时常见的 5 个问题
自定义路径别名
可能有些人注意到了,在 vue-cli 生成的模板中在导入组件时使用了这样的语法:
import Index from '@/components/Index'
这个 @ 是什么东西?后来改配置文件的时候发现这个是 webpack 的配置选项之一:路径别名。
我们也可以在基础配置文件中添加自己的路径别名,比如下面这个就把 ~ 设置为路径 src/components 的别名:
// build/webpack.base.js { resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '~': resolve('src/components') } } }
然后我们导入组件的时候就可以这样写:
// import YourComponent from '/src/components/YourComponent' import YourComponent from '~/YourComponent'
既解决了路径过长的麻烦,又解决了相对路径的烦恼,方便很多吧!
CSS 作用域与模块
组件内样式
通常,组件中 <style></style> 标签里的样式是全局的,在使用第三方 UI 库(如:Element)时,全局样式很可能影响 UI 库的样式。
我们可以通过添加 scoped 属性来使 style 中的样式只作用于当前组件:
<style lang="less" scoped> @import 'other.less'; .title { font-size: 1.2rem; } </style>
在有 scoped 属性的 style 标签内导入其他样式,同样会受限于作用域,变为组件内样式。复用程度较高的样式不建议这样使用。
导入样式
相对于 style 使用 scoped 属性时的组件内样式,有时候我们也需要添加一些全局样式。当然我们可以用没有 scoped 属性的 style 来写全局样式。
但是相比较,更推荐下面这种写法:
/* 单独的全局样式文件 */ /* style-global.less */ body { font-size: 10px; } .title { font-size: 1.4rem; font-weight: bolder; }
然后在入口文件中导入全局样式:
// src/main.js import 'style-global.less'
v-for 的使用 tips
v-for 指令很强大,它不仅可以用来遍历数组、对象,甚至可以遍历一个数字或字符串。
基本语法就不讲了,这里讲个小 tips:
索引值
在使用 v-for 根据对象或数组生成 DOM 时,有时候需要知道当前的索引。我们可以这样:
<ul> <li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }} </ul>
但是,在遍历数字的时候需要注意,数字的 value 是从 1 开始,而 key 是从 0 开始:
<ul> <li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }} </ul> 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。
vue 中 this 指向问题
method 不能使用箭头函数
因为箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例。
const App = new Vue({ el: 'body', methods: { foo: () => { console.log(this) // undefined } } }) const App = new Vue({ el: 'body', methods: { foo () { console.log(this) // Vue instance } } })
method 中方法使用定时器需要使用箭头函数
箭头函数中的this指向是固定不变的,即是在定义函数时的指向
而普通函数中的this指向时变化的,即是在使用函数时的指向
箭头函数代码:
methods: { goPage: function (index) { this.newPage = index }, inv: function () { this.invt = setInterval(() => { this.goPage(this.nextPage) console.log(this) //此时的this指向是该vue组件,不管在哪使用,指向都是该vue组件 }, 1000) } }
普通函数的代码:
methods: { goPage: function (index) { this.newPage = index }, inv: function () { this.invt = setInterval(function () { this.goPage(this.nextPage) console.log(this) //此时的this并不是该vue组件,而是指向window。 }, 1000) } }
setInterval() 与 setTimeout() 是 window 对象的函数,所以 this 会指向 window
一个 template 模板只能有一个可渲染的子元素
一个 <template> 下面只能有一个可渲染的子元素否则会报错,
报错如下:
即:
<template> <h1>Title</h1> <p>Balabala...</p> <p>Balabala...</p> </template> // 应该为 <template> <div> <h1>Title</h1> <p>Balabala...</p> <p>Balabala...</p> </div> </template>
最后
这篇文章是我从笔记中抽离出来的,有些内容已经忘了出处。
如果你想进【大前端交流群】,关注公众号点击“交流加群”添加机器人自动拉你入群。关注我第一时间接收最新干货。
- 【前端词典】Vue 使用时常见的 5 个问题
- Vue中使用axios(POST请求)调用后端接口时,后端接口接收不到前端参数的问题
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- 后台使用freeMarker和前端使用vue的方法及遇到的问题
- 当使用Vue开发前端遇到的问题及解决办法汇总
- 前端使用Vue框架解决跨域问题
- vue的爬坑之路(三)之-----基于vue-cli的VueAwesomeSwiper轮播滑块插件的使用及常见问题(转)...
- 近期一个称重设备微信端开发前端知识点,及使用插件遇到的常见问题
- Vuex 状态管理学习记录,基本使用方法与常见问题解决
- 前端vue使用 axios解决跨域问题【转】
- Vue2.0总结———vue使用过程常见的一些问题
- vue使用过程常见的一些问题
- Vue2.0总结———vue使用过程常见的一些问题
- 前端学习笔记之vue项目遇到的问题(与vuex的使用有关)
- VUE常见问题 - AXIOS使用请求
- Vue2.0总结———vue使用过程常见的一些问题
- BAT前端面试都问啥!Vue常见热点问题&解决方案
- vue2.0总结 --- vue使用过程中的常见问题
- Vue2.0使用过程常见的一些问题总结学习
- vue-cli使用方法及常见问题