vue中遇到的坑

时间 2019-11-11

标签 vue 遇到繁體版

原文原文链接

如何解决在vue中替换图片、一个使用base64，而咱们使用zepto以后，src找不到资源，由于已经打包了，难道强行写base64。css

1. 引入文件时语法很重要！html

import "FooterMenu" from '@components/Menu';

import FooterMenu from '@components/Menu';

即在页面组件中引入一个FooterMenu组件, 咱们引入时应该引入的一个变量做为标签，而不能再FooterMenu上添加引号！！在这里浪费了不少时间。vue

2. 在一个单页面组件中不须要style，但必需要script。jquery

即在.vue文件中，咱们能够没有style，可是必需要有script来利用 exports default 来导出模块，不然就会出错。ios

补充： vuex

    <transition name="fade">
      <div class="pay-model" v-show="ifpay">
        <div class="pay-style">
          <div  v-if="payArr[payArr.length - 3] == 1">
            <input type="radio"  name="settleChoose" checked = "checked"  data-value='4' id="wechat" value="微信支付" v-model="style">  
            <label for="wechat" >微信支付</label>
          </div>
          <div v-if="payArr[payArr.length - 2] == 1">
            <input type="radio" name="settleChoose"  id="alipay" data-value='2' value="支付宝支付" v-model='style'>  
            <label for="alipay"  >支付宝支付</label>
          </div>
          <div  v-if="payArr[payArr.length - 1] == 1">
            <input type="radio" name="settleChoose" id="tohome" data-value='1' value="货到付款" v-model='style'>  
            <label for="tohome">货到付款</label>
          </div>
        </div>
      </div>
    </transition>

在这里，若是style的值为初始值 ""，即为空，那么咱们及时使用这里的checked = "checked"也没法自动选中，解决方法：若是咱们但愿在打开模态框以后的微信支付是默认的，那么咱们就能够将 style 的初始值设置为 “微信支付”，这样就没有什么问题了。vue-cli

补充：express

      <div v-if="payArr[payArr.length - 2] == 1">
                <label class="pay-lable" >
                <input type="radio" v-bind:checked = 'curPayMethod == 2' name="choosePay" value="2">  
                支付宝支付</label>
              </div>
              <div  v-if="payArr[payArr.length - 3] == 1">
                <label class="pay-lable" >
                <input type="radio" v-bind:checked = 'curPayMethod == 4' name="choosePay" value="4">  
                微信支付</label>
              </div>
              <div  v-if="payArr[payArr.length - 1] == 1">
                <label class="pay-lable">
                <input type="radio" v-bind:checked = 'curPayMethod == 1' name="choosePay" value="1">  
                修改成货到付款</label>
              </div>

label的for对应于input的id，若是说不能正常使用，其实咱们也能够直接将input写进label里去，这样会更加方便，再也不须要使用 for 和 id 了。npm

3. 当咱们在路由中配置了不一样的router-link对应于不一样的组件的时候，会发现npm run dev以后什么都没有，好比个人路由以下：axios

export default new Router({
  routes: [
    {
      path: '/Mall',
      component: Mall
    },
    {
      path: '/personal-center',
      component: personalCenter
    }, 
    {
      path: '/order',
      component: AlipayHint
    },
    {
      path: '/commodity',
      component: Commodity
    }
  ]
});

运行以后，是空白页，这是由于路由中并无配置一进来是“/”的路由，因此什么都没有显示，这时就须要重定向了。以下所示：

routes: [
    {
      path: '/Mall',
      component: Mall
    },
    {
      path: '/personal-center',
      component: personalCenter
    }, 
    {
      path: '/order',
      component: AlipayHint
    },
    {
      path: '/commodity',
      component: Commodity
    },
    {
      path: "/",
      redirect: "/commodity"
    }
  ]

即咱们须要重定向的时path中的值，而不是component中的值。

4. 在v-for下的列表中，如何向方法传递参数？

（1）咱们能够在一个list中绑定 v-for="item,index in items"，这样，咱们就能够获取到相应的item和index（从0开始），另外，若是咱们但愿向list中的某个v-on:click = "handler" 传递参数，能够直接传递，好比： v-on:click="handler(index)"，这样就能够向methods下的handler传递参数了。

（2）咱们还能够传递$event直接给hanlder，而后经过e.currentTarget获取到这个元素。

5. 如何使用vuex、使用store中的数据、替换store中的数据？

　　vuex你们都不陌生，好比我在一个store的state中存储了items为一个空数组，而后在组件中循环数组中的每个元素并展现出来，而后再经过axios获取到数据以后更新store，这样数组中就有元素了。

　　最开始我使用的思路以下所示：

const state = {
  totalPrice:  0,
  items: [],
　//.... 其余的state
}

　　而后经过axois获取items，获取到以后更新：

  .then(function (response) {
    if (response.data.code == 130) {
      items = response.data.data;
      console.log(items);
      store.commit('update', items);
    }

　　其中的update已经在mutation中定义了，由于咱们知道vue中的state只能经过commit这一种方式来替换而不能经过其余方式，以下：

mutations: {
update (state, items) {
state.items = items;
}
}

　　最后，咱们须要把items挂载到组件下：

  data: function () {
      return {
        name: "CommodityKinds",
　　　　　items: this.$store.state.items
      }
    },

　　说明：由于我已经将store注册到根组件下了，因此咱们能够在组件中使用 this.$store.state来访问到state对象。

　　可是，这样是有问题的 --- 咱们会发现，进入有items数据的页面后，数据并无被渲染出来，而是等到咱们切换页面，再切换回来的时候才能渲染出来。

　　而问题就出如今了最后一步！

　　咱们应该将store中的数据放在computed下而不是放在data下！！！！

　　具体解决方法以下：

  import {mapState} from 'vuex'

　　而后：

    computed: mapState({
      items: state => state.items
    })

　　这样，当store中的数据改变时，就会直接改变了，更多例子能够看vuex官方文档，讲的很好。

总结： 通常而言，咱们须要将store下的state放在computed中，将组件自身的state，不须要像vuex这样动态的、传递的放在 data 下便可。

6. 在vue中，咱们可使用v-on:click.once对click处理函数只绑定一次，这样就相似于jquery中的one绑定了。

7. 在jquery中，若是咱们但愿第一个元素最开始添加一个active类名，咱们可使用class绑定，其中是一个对象，对象中的属性是类的名称，值是布尔值，若是为true，则显示，不然不显示。

<template>
  <div class="commodity-kind">
    <div class="kind" v-bind:class="{active: index == 0}" v-on:click="getContent(item.id, $event)" v-for="item,index in items">
      <span>{{item.name}}</span>
    </div>
  </div>
</template>

　　这样，一进去就是这样的状态了。

8. 当须要axios请求时，若是咱们在不一样的组件中都须要请求，而且都有相同的请求头，特别是最近的项目我须要使用vue-cli的express代理Tomcat服务器进行测试开发时，就要添加/api才能正常访问，可是在每个请求前添加这个是很是麻烦的，而且在 npm run build 时，又要把这些/api去掉，这是至关麻烦的，因此咱们能够单独创建一个js文件，我命名为 request.js 文件，内容以下：

import axios from 'axios'
axios.defaults.baseURL = "/api";
axios.defaults.headers.common['BBG-Key'] = "ab9ef20253-49d4-b229-3cc2383480a6";


export default axios

其中，/api是在开发过程须要代理服务器所必须的，因此这里设置为baseURL，那么在实际请求中，就会自动添加/api，而且在实际生产中，咱们只要注释掉它就能够了。

而BBG-Key是为了安全使用的，因此为了不每次在请求时都添加一个请求头，咱们在这里直接设置为 common（公共）的请求头。这样，在实际的每个请求中就不须要都添加这个请求头了。

最后导出这个 axios，在其余的模块中引用。

import axios from '../assets/js/request'
  axios.get('/bbg/shop/get_classify', {
    params: {
      sid:  13729792
    } 
  })
  .then(function (response) {
    if (response.data.code == 130) {
      items = response.data.data;
　//............

这样，就会较以前省去不少的工做量。 good！

9. vue中在css下写的，即通常使用的时做为背景图的，在assets下的图片通过打包以后使用的时base64的编码方式，因此，若是在js中操做css，使用路径的方式是行不通的，个人方式是使用base64，可是有更好的方法吗？以下所示：

 handleDefault (id,e) {
        $(".default").html("设为默认").css({
          'color': 'black',
          'background': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAC+SURBVFhH7Y5BCgIxDEXHs7h15wV0XWjajeD9D6IVP8wfJlAITovwH2QTEt5bxFGY2W3kQNun1vqaOcjw8R5mDHL2eMczBjlbSinP7tGBsLu1nLFeacsHH2E9DHa3livWKwrswG4FRmC3AiOwW4ER2K3ACOxWYAR2KzACuxUYgd0KjMBuBUZgtwIjsFuBEdj9n4FmVvgI62GwO6V0wXoLH80c5OzxjmcMcny8h5GDjC6nnPN95HycX7X4JcvyBq2MUQCYxq1GAAAAAElFTkSuQmCC) no-repeat',
          'background-size': '0.4rem'
        });

         $(e.currentTarget).html("默认地址").css({
          'color': '#51B1B0',
          'background': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAnCAYAAAB9qAq4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAG3SURBVFhH7Zc9S8NgFIXrFwiuiuDu4uoPcFFwEJsUhP6COjk7+hscO7h0a5Hc+6bOdnMRHMTByV1wEB0caxJPX0xzY9MkvSLmgQekOSfvoWlFaxUaHPV6C/vd7lqZHvj+Km6fj71OZ8U1PNTQYXrCsdlwjTmRbjRrz4bDeUxI55B5SypriRnpSCVN60wPmJKkacy6VNIWc5I45J1LBW0xJ4nLxFJB2+12ewmT4lQDM1oNTJXpBkeFv878xHX4KwMdY+5wTESDeVfKhaoPdAzf4wiLlBupOtAxdIvbj5iTct9VG+gQXePWFik3bqGBiE48qG7oClGLlJPMPbDJvIFohJQJDR6rQcQi5dLMPTD4sL8iaklkyPNwyTKemWSxzyDzC+IWe42I8ZIl1s1o8S8JeW+oWFyf+/jRInYzWHxgYPC431ETkTpZLWVgaN3wM6oxpOw0ljYwcuw/MjEzpeUO/PLD9elYeD2XsxhYqn93oMNMUkHbncFgEZPiNAy1pIK2mJOkFby1UkFbzJGRCrrSBabIBM9/WS7qiBk/0+hfbkrlWYvjsxP8Xfco3ah0iU5xZMV/o1b7BPkQ+pZZ2s/xAAAAAElFTkSuQmCC) no-repeat',
          'background-size': '0.4rem'
         });

10. class绑定的是一个对象，通常状况下，这个对象直接定义在html中是比较好处理的，以下：

   <!-- 这里使用class绑定来决定默认 -->
            <span class="no-default" v-bind:class="{default: item.id == defaultAddress.id}" v-on:click="handleDefault(item.id, $event)" >
              {{ (item.id == defaultAddress.id) ? "默认地址" : "设为默认" }}
            </span>

注意： class中的class名称不能用引号括起来。

11. 在menu中，每当点击一个选项时，替换其背景图片，如何作到实时的变化。

最开始，个人实现思路是：先经过import的方式引入，而后在 v-for 中引用data下的每个项目的src，而后当点击选项的时候，用switch函数来根据点击的index来进行替换图片，可是这样的替换存在一个问题：每当点击以后，第一次并没变化，而是再点击一次，才会发生改变。

缘由：在vue中，data下的值和DOM中不是实时更新的，因此通常实时更新就要使用store。即在store中import 图片资源，而后在改变的时候经过mutations进行改变。这样的变化就是实时的了。

问题：虽然使用 mutations 能够实时改变，但问题是，咱们彻底是没有必要的，由于这个改变只须要在一个组件中，使用store未免过小题大作了。

注意：这里使用的是vue的data，而且须要改变的时引入的文件（须要打包的），对于下面这样只须要修改颜色的不须要使用这样的方式，只须要使用 zepto 来改变css便可，这样必定是实时的。

12. 使用actions时，须要commit Mutations，可是actions 不支持多参数传递，也就是说第一个参数是Mutation，第二个参数是咱们须要传递的值，若是传入多个，那么第三个及之后将自动忽略，为了解决这个问题，咱们能够将多个值封装到一个对象，而后传递这个对象就能够了，这就相似于Payload啊啊啊。

       if (response.data.code == 626) {
              for (let i = 0; i < response.data.data.length; i++) {
                console.log(response.data.data[i], index);
                var obj = {
                  index: index,
                  item: response.data.data[i]
                };
                commit(UPDATE_ALL_CONTENT, obj);

              }
              index++;
              resolve();
            }

OK！这就是payload。哈哈哈哈理解就好。

13. 在vue中，咱们传入的事件必定是$event，可是获取时， e.currentTarget 和 e.target 获取的不同的，区别在于前者是当前的元素，即冒泡的最后一个绑定事件的元素，然后者是最原始的元素。

关键：后者能够实现事件代理。

14. 有时候啊，一个很小的错误都会致使全局的失败！好比，不知道为何就报下面这种错误！

而后内容就显示不出来，可是经过network能够获知数据都请求到了，因此遇到这种问题个人解决方法仍是寻找于此有关的代码，而后逐个注释代码，若是注释以后再也不出错，就说明问题出在了这里，经过寻找，问题在这：

<template>
  <div class="item"}>

即以前添加属性时， } 没有去掉。

虽然有问题了，可是解决问题的方法和思路正确就好。

15. 为何document.body.scrollTop = 0 不生效，而 document.querySelector("body").scrollTop = 0; 是能够的呢？

16. 下面的这个错误而很明显！就是在建立钩子函数created中出现了未定义的变量：

即 Error in created hook!

17. localStorage没法输出

为何只有localStorage能够输出，而其余的不能呢？就是访问不到属性！