Vue开发中的常见问题

最近在群里看到在你们在学习vue的过程当中，遇到的不少问题都十分的相似，这里作一下总结：

2016-6-12 更新

新的基于Vue实现的问题和解决方案查询文库上线 地址

• 能够根据关键字查询相关的问题

• 每一篇均可以分享

• 能够贡献你的问题和解决方案，加入到文库中

欢迎你们的pull request & star

---

eslint静态检查

在你们用vue-cli建立工程的时候，会有一项，使用使用eslint，若是选择了y，那么工程就会安装并启用eslint。

这里列举一下常见的错误：

1.多余的分号

2.定义了却未使用的变量

3.结尾多余空格

4.超过一行的空行

5.代码尾行应该有空行

错误确定是列举不完的，那么提示错误的时候，咱们应该先去看提示信息（翻译），若是发现没有错误，能够对照eslint的官方文档

在你们适应了eslint的写法后，效率和正确率会直线上升，这里安利下个人另外一篇文章，提高效率的eslint+vscode的开发环境搭建

---

this指向

常常会有朋友问一些undifined的错误，好比：

<script>
import Hello from './components/Hello'

export default {
  data () {
    return {
      list: ['a', 'b', 'c'],
      idx: 0,
      current: ''
    }
  },
  methods: {
    iter () {
      this.list.map(function (v, k) {
        if (k === this.idx) {
          this.current = v

          console.log(this.current)
        }
      })
    }
  },
  components: {
    Hello
  }
}
</script>

这是刚建立的工程，咱们定义了list，idx和current，在执行iter方法时，咱们就给current赋值以idx为下标的值，当咱们执行后会发现，浏览器报了一个错误

这么回事，咱们不是定义了idx了吗？

实际上是由于咱们在map里的this是指向当前map的迭代对象，而非咱们vue的实例，因此this里没有咱们须要的idx。

解决方式有两种，其一是经过保存this

let _this = this

其二是使用es6箭头函数

methods: {
    iter () {
      this.list.map((v, k) => {
        if (k === this.idx) {
          this.current = v

          console.log(this.current)
        }
      })
    }
  },

如今再看咱们的浏览器

已经能够达到咱们预期的效果了！

再来一发

<div @click="check"></div>

methods: {
    check () {
        alert('ok')
    }
}

你们会发现并不会alert，可是语法没错误呀，这是为何呢？

让我妈修改alert

methods: {
    check () {
        window.alert('ok')
    }
}

这下alert就能正常工做了，你们确定都明白是怎么一回事了！

没错 就是this的锅！

---

方法传值

咱们在input中的方法但愿获取input的value，怎么获取呢？

能够经过$event这个对象，经过将$event传入方法

<input type="text" value="value" @input="change($event)"/>

咱们能够成功的拿到咱们但愿的值

change (e) {
  console.log(e.target.value)
  this.value = e.target.value
}

---

迭代判断

好比咱们有一个列表，咱们但愿能显示咱们当前选中的那一个，如何实现呢？

基本思路是经过$index来判断是不是当前迭代对象，而后去增减class或者style来实现不一样的样式

<ul>

  <!-- 方法1 class-->
  <li v-for="item in list" :class="{'active': $index === activeId}">{{item}}</li>
  
  <!-- 方法2 style-->
  <li v-for="item in list" :style="{backgroundColor: $index === activeId ? 'red' : 'white'}">{{item}}</li>
</ul>

data () {
  return {
    list: ['a', 'b', 'c'],
    activeId: 0
  }
},

---

camelCase vs. kebab-case

HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用做特性时，须要转为 kebab-case（短横线隔开）(官网例子)

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

另外props的写法

简写

props: ['demo-first', 'demo-second']

带类型

props: {
    'demo-first': Number,
    'demo-second': Number
}

带多种检查

props: {
    'demo-first': {
        type: Number,
        default: 0
    }
    ...
}

因此， 当你获取不到props的值的时候，能够先仔细检查拼写是否正确。

---

传值与传字面量

在vue的组件中传递数据，若是是单纯传递字面量，如

<hello result="success"></hello>

那么在hello中获取的props result的值就是“success”，若是但愿进行值传递，须要在指令前加 ':' 冒号，这样，父层的success的值改变，hello的值也会跟着改变。

---

转场动画

在vue中有个很好用的指令，transition，经过它咱们能够实现自定义的router切换中的动画

方法就是在

<router-view transition="fade"></router-view>

加入自定义的class fade-transition , fade-leave , fade-enter便可。

---

数据驱动 vs dom

vue是基于数据驱动的，最好不要直接去修改dom（虽然官方给出了这样的方法）

---

v-cloak

若是出现{{}}的短暂出现的状况，能够经过添加v-cloak来处理。

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一块儿用时，这个指令能够隐藏未编译的 Mustache 标签直到实例准备完毕。

---

使用sass

首先安装依赖

npm i node-sass sass-loader -D

而后在vue的style里添加

<style lang="scss" scoped>

注意：是"scss"!而后重启webpack，就ok啦

vue片断

有时候咱们会看到这个警告

这是由于咱们的template中，出现了片断，那么这个片断究竟是什么gui呢？

咱们能够理解为是一段没有根的dom元素，官网上是这么描述的

下面几种状况会让实例变成一个片段实例：

模板包含多个顶级元素。
模板只包含普通文本。
模板只包含其它组件（其它组件多是一个片断实例）。
模板只包含一个元素指令，如 <partial> 或 vue-router 的 <router-view>。
模板根节点有一个流程控制指令，如 v-if 或 v-for。

vue建议咱们为片断添加一个根节点，这样方便传递props和过渡效果，也可让dom更好的溯源，因此，解决方法很简单，在template的内部套一层div便可，像这样

// 片断

<template>
  <h1>hello</h1>
  <h2>world</h2>
</template>

---

// 套div

<template>
  <div>
    <h1>hello</h1>
    <h2>world</h2>
  </div>      
</template>

引用图片

首先，若是使用的是img标签那么能够这样

data () {
    return {
        img: require('path/to/your/source')
    }
}

而后在template中

<img :src="img" />

若是使用的是背景图的方式，那么

能够这样

data () {
    return {
        img: require('path/to/your/source')
    }
}

<div :style="{backgroundImage: 'url(' + img + ')'}"></div>

或者直接在css中定义

background-image: url('path/to/your/source');

若是你的webpack配置了html-loader，那么久很方便了，只在img的src中写入相对路径

<img src="./images/logo.png" />

轻松又愉快

---

暂时想到这么多，若是有新的内容会及时的更新的。