Vue和JS运用中遇到的问题

js踩坑

event.stopPropagation()的用法

event.stopPropagation()是用来阻止事件冒泡的，比如父级定义了一个点击事件，子级
不想继承该事件，需要给子级添加点击事件，事件中写上此行代码。注意是在子级中写而不是
在父级中写。

Vue中遇到的问题

利用query向跳转页面传递值的问题

问题

通过this.$router.push({path: '/detail',query:{data: '123'}}这种形式在向一个界面传递值的过程中，发现query里面传递的值如果是键值对,在跳转到的界面不会有任何问题，能正常获取到传递的数据，但如果以
this.$router.push({path: '/detail,query:{data: {a:1}})这种形式来传递数据时，即键值对中的值又是一个对象时，在跳转到的界面第一次加载不会有问题，当刷新该界面时会将其作为一个字符串来处理，不是我们想要得到的数据。

解决办法

如果真想传递一个对象可以利用JSON.Stringify()和JSON.parse()来对传递和接受的数据进行处理
传递时
this.$router.push({path: '/detail',query:{data:JSON.Stringify({a:1}) } })来进行传递。
接收时JSON.parse(this.$route.query.data)来获取到传递的对象数据。

注：如果不拍麻烦，在传递时，也可以把对象拆开一个一个传，不太现实

对computed和watch属性的理解

computed计算属性

Vue中可以在computed中定义一些属性，这些属性被称为计算属性,计算属性的本质就是一个方法，只不过在使用计算属性时，是把他们的名称当做属性来使用，并不会把属性当做方法来调用。在computed内部，必须return出一个新的数据。在使用coputed计算属性的时候有三个特点。

特点

1.计算属性在引用时，一定不要加 () 去调用，直接把它当做普通属性去使用；
2.只要计算属性这个 function 内部，所用到的任何 data 中的数据发生变化，就会立即重新计算这个属性的值；
3.计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所依赖的任何数据，都没有发生变化，则不会重新对计算属性求值；
4.计算属性中的属性名，不要与data中的属性名相同，否则会报错。

watch监听属性的变化

watch用来响应数据的变化，使用这个属性，可以监听data中指定数据的变化，然后触发watch中对应的function处理函数。

网上一个老生常谈的例子

1.分别利用computed和watch来监听数据的变化

<template>
  <div class="home-container">
    <!-- 利用computed计算属性实现 -->
    <p style="background-color: green;color: #fff;">computed属性</p>
    <input type="text" v-model="lastName">
    <input type="text" v-model="firstName"><br>
    <p>{{changeName}}</p>
    <hr>
    <!--利用watch监听实现  -->
    <p style="background-color: green;color: #fff;">watch属性</p>
    <input type="text" v-model="a">
    <input type="text" v-model="b"><br>
    <p>{{c}}</p>
  </div>
</template>
<script>
/**
 * 本例子用来演示computed和watch属性的区别
 */
export default {
  name: 'Home',
  data(){
    return {
      firstName: '铭宇',
      lastName: '张',
      a: 1,
      b: 2,
      c: 3
    }
  },
  computed: {
    changeName: function(){
      return this.lastName + this.firstName
    }
  },
  watch: {
    a: function(newValue,oldValue){
      this.c = newValue + '' + this.b;
    },
    b: function(newValue,oldValue){
      this.c = this.a + '' + newValue
    }
  }
}
</script>

我们可以看到同样是两个属性相加，展示相关结果，利用computed只需要一个计算属性就可以实现，而利用watch需要设置两个监听函数才可以实现。因此如果是几个数据的组合结果，用computed来监听更为有效。

Element-ui使用中遇到的问题

使用form表单时遇到的问题。

当使用form表单时，有时候会有这样的需求，比如将搜索框中的内容清空，又或者在添加数据时，弹出dialog对话框，当点击取消时，让dialog对话框中的数据清空，避免对话框点开后，上次录入的数据依然填写在表单中。element-ui中提供了一个方法resetFields方法，如下所示

这个方法在使用时需要注意几点，不然达不到预期效果。上代码

<el-form :model="addServiceData" ref="addServiceForm">
    <el-form-item label="手机号" prop="mobile">
       <el-input v-model="data.mobile" placeholder="请输入手机号码"></el-input>
     </el-form-item>
</el-form>

el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使。
并且addServiceData应该是个对象，定义在data里面，类似这样

data(){
    return {
        addServiceData: {
            mobile: ''
        }
    }
}

Elment-ui中表单校验部分遇到的问题

element-ui中的表单校验部分，一定要注意rules里面的名称和form表单绑定的数据名称一致。
如：

<el-form ref="addForm" :model="addFormData" :rules="rules" label-width="120px" size="small">
	<el-form-item label="岗位名称:" prop="adddirectionName">
	  <el-input v-model="addFormData.adddirectionName"></el-input>
	</el-form-item>
</el-form>

rules中的验证规则

rules:{ /*校验规则*/
	adddirectionName:[{required: true, message: '请输入应聘岗位', trigger: 'blur'}],
    alterdirectionName:[{required: true, message: '请输入应聘岗位', trigger: 'blur'}]
},

v-model中绑定的表单数据

addFormData: {
	adddirectionName: ""
},
alterFormData: {
	alterdirectionName: ""
},

注意这里面的数据名称和rules中的规则名称一定要保持一致，否则在进行表单校验时，哪怕表单中填入数据，校验也无法通过。