前言目前在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下Vue.js如何开发全局组件。源码Talk is cheap. Show me the code.组件模板// /src/components/MessageBox/index.vue<template> <p class="message-box" v-show="isShowMessageBox"> <p class="mask" @click="cancel"></p> <p class="mess...
首先说下，本人为在校大三狗一只，缺少实战开发经验，然后用语什么的也不标准，就按我自己的想法写的，有什么不对的地方欢迎指导指导哈 然后直接开始吧 在需要翻译的地方做上标记，这里用的是添加名为"text-dom"的class的方法。比如：<div class="text-dom">原文：</div> 定义储存数据的datadata() {return {before: {q: "", //输入的原文to: "" //选择目标语言}, //保存初始数据appid: "2019*********2613", //百度翻译开放平台的...
最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意：“@CrossOrigin“注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型在试一下.(此注解也可以...
在父组件中调用子组件的方法： 1.给子组件定义一个ref属性。eg:ref="childItem" 2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数，并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。 父组件： <template><child-item ref=child /><button @click=useChildFun></button></template><script>```methods() {useChildFun:function(){this.$refs.c...
开始的时候我以为，用vue去调取json要多么的麻烦，完咯就先去的百度，找了几个，看上面又要配置这配置那的，看的我都头大，像一些思维逻辑清晰的肯定不会出现这种情况。 下面我说下我这的情况，大家依情况代入 当然vue你刚开始创建的话，你是要去配置下东西，下面我说的是你的项目能够跑起来的情况，完咯再去想办法去引用json，当然我这里用的也是axios的获取方法，如果不是这种方法的可以带过了 首先你要知道那你的json应该放在哪...
引言 如果说vue是前端工程化使用较多的骨架，那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携，无需再过多的考虑DOM的操作。而vue的渐进式开发（逐步引用组件，按需引入），也让许多新手前端开发人员逐步绕过对jQuery的学习。jQuery需要记忆的内容颇多，这也让jQuery变得不那么受新入行开发者喜欢。 在前端工程化的需求没有普及的时候，许多公司使用的是后端渲染技术，为了能够实现友好的前端交互效果，需...
组件 <template><div><input id="upload_file" type="file" style="display: none;" accept=image/* name="file" @change="fileChange($event)"/><div class="image-item space" @click="showActionSheet()"><div class="image-up"></div></div><div class="upload_warp"><div class="upload_warp_img"><div class="upload_warp_img_div" v-for="(item,index) in imgList"><div class="upload_warp_img_div_top"><img src="http://...
一般我们都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue实例），但是在实际开发中，我们往往会引入外部的js文件使用this，这个this就会指向window，并不是我们期待的vue实例，那么就需要重新引入vue文件（import Vue from vue）,这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例，然后在需要使用的js中引入。 步骤一：main.js导出vue实例 var vue = new Vue({el: #app,router,components: { App...
步骤一：申请百度地图密钥； JavaScript API v1.4以及以前的版本无序申请秘钥（ak），自v1.5版本开始需要先申请秘钥（ak），才可以使用，如需获取更高的配额，需要申请 认证企业用户。百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二：在index.html中添加百度地图JavaScript API接口； <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> // v1.4版本以及以前版本 <sc...
起因 微信分享网址时无法分享图片，这个问题需要用jssdk去解决。其实开始的时候时可以看到图片的，但后来微信禁止了。所以只能使用jssdk去解决。 普通网页开发很简单，但是使用vue或其他前端框架开发spa单页面webapp的时候就会有问题了。只要url发生变化就会报签名错误。其实微信官方上已经写了说明。 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url...
Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在开发和设计一个组件的时候有可能就会绕一个大圈子，所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解。举个例子，通知组件notification基本是现代web开发标配，在很多...
VUE引入第三方js包及调用方法 1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2、网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用，较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script>3、mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mounted 中 4、第三方js包如果有...
在项目中遇到关于action与dispatch使用的一些细节问题，经过搜索得到了一些答案。特意在此提出，如有错误还请指出，十分感谢～ 问题1：如果action是异步的，那么怎么知道它什么时候完成？在vuex的官网给出了答案：注：如果需要通过组合多个action来完成某些逻辑，用async/await会更简单一点 问题2： 如果action是同步的，就不需要等待它完成了吗？ 其实这个问题相当于在w：dispatch(some action)是一个同步函数还是异步函数。 如果...
组件传参通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default {props: [options],data(){return {}} }但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: [message] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽slot的使用就像它的名字一样, 在组件内定...
在开发中发现其中一个页面moutned调用了两次，而其他页面正常，表示很懵逼，然后查找原因，终于找到了，其实归根到底是要知道mounted的调用机制问题；情况：在这个页面中出现了mounted 加载了两次的情况； 方法：排除法 首先把 this.$store.commit() 方法注释掉，发现就好了，只加载一次 初步判断是commit 方法导致的 二 验证判断是否正确，不使用commit 方法，该用直接改变变量状态的方法，发现又加载了两次； 再次判断，不是由...