当前位置:首页 > 前端技术 > vue中遇到的坑

vue中遇到的坑

2022年08月05日 08:24:50前端技术4

 如何解决在vue中替换图片、一个使用base64,而我们使用zepto之后,src找不到资源,因为已经打包了,难道强行写base64。

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

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

即在页面组件中引入一个FooterMenu组件, 我们引入时应该引入的一个变量作为标签,而不能再FooterMenu上添加引号!!  在这里浪费了很多时间。

 

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

即在.vue文件中,我们可以没有style,但是必须要有script来利用 exports default 来导出模块,否则就会出错。

 

补充: 

    <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 的初始值设置为 “微信支付”, 这样就没有什么问题了。

 

 

补充:

      <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 了。

 

 

 

 

 

3. 当我们在路由中配置了不同的router-link对应于不同的组件的时候,会发现npm run dev之后什么都没有,比如我的路由如下:

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>

 

vue中遇到的坑 _ JavaClub全栈架构师技术笔记

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

 

 

 

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. 有时候啊, 一个很小的错误都会导致全局的失败! 比如,不知道为什么就报下面这种错误! 

vue中遇到的坑 _ JavaClub全栈架构师技术笔记

 

 

然后内容就显示不出来,但是通过network可以获知数据都请求到了,所以遇到这种问题我的解决方法还是寻找于此有关的代码,然后逐个注释代码,如果注释之后不再出错,就说明问题出在了这里,通过寻找,问题在这:

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

 

即之前添加属性时, } 没有去掉。  

 

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

 

 

 

 

15. 为什么document.body.scrollTop = 0 不生效,而 document.querySelector("body").scrollTop = 0; 是可以的呢?

 

 

 

 

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

vue中遇到的坑 _ JavaClub全栈架构师技术笔记

Error in created hook!

 

 

17. localStorage无法输出

vue中遇到的坑 _ JavaClub全栈架构师技术笔记

为什么只有localStorage可以输出,而其他的不能呢? 就是访问不到属性!

作者:Wayne-Zhu
来源链接:https://www.cnblogs.com/zhuzhenwei918/p/6875290.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17596.html

标签: vue
分享给朋友:

“vue中遇到的坑” 的相关文章

【Vue】详解Vue组件系统

【Vue】详解Vue组件系统

本文提纲:1.Vue渲染的两大基础方式 2.组件的局部注册和全局注册 3. Vue中的props数据流 4.Vue的自定义事件 5. Slot的使用   Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根...

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

【vue】Vue中添加$alert的messageBox消息弹出框,进行换行、空格等html渲染

出现情况: 在Vue中 $alert的messageBox 无法直接通过正则表达式进行来进行换行和缩进解决方式: dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false this.$alert(...

Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从...

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤 首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

Vue中自定义标签及其使用

Vue中自定义标签及其使用

Vue中自定义标签及其使用 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入...

vue.js快速搭建图书管理平台

vue.js快速搭建图书管理平台

上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用。   前  言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

Vue.js——60分钟browserify项目模板快速入门

Vue.js——60分钟browserify项目模板快速入门

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题。 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。