前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、 $emit / $on 、vuex、 $parent / $child...
vue如何配置接口域名1.vue本身为运行脚手架项目自家搭载了一个nodejs后台环境，本地可通过proxyTable来处理跨域问题，但是上线（或生产环境）之后改域名真是一件麻烦的事情，所以进行一些配置。2.修改下面的两个文件，启动的时候自动判断环境来切换域名1.在开发环境下配置如下：config/index.js 2.其他配置3.主要内容为 4.其他配置
Vue数据响应原理官方的解释很清晰：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏...
最近在做一个公众号的商城项目，主要用的VUE+MUI，其实今天这个点对于有过项目经验的前端工作者来说是最基础的，但也是必须要掌握的，今天小编主要是记录下传参和跳转的一些总结（仅供参考）。 首先我们先上代码吧！ <router-link :to="{path:/editaddress,query:{ id:item.id }}"> <div class="top_left_center"><img src="/static/images/details/location.png" alt="" class="location_img"><span style="color:#f40;font-size:...
前言 除了使用 Vuex 方法外，vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 父子组件通信props 和 $emit 父子组件通信子组件有时需要与父组件进行沟通，沟通的方式就是子组件 emit 事件，父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props 假设这里有一个父组件并引入了一个子组件 my-comp： <my-comp v-for="msg in msgs" :key="msg.id" :msg="...
前言 对于那些开始学习Vue的人来说，对于方法、计算属性和观察者之间的区别有点混淆。尽管通常可以使用它们中的每一个来完成或多或少相同的事情，但了解每个人在哪里胜过其他人还是很重要的。在这个快速提示中，我们将了解Vue应用程序的这三个重要方面及其用例。我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点。Methods在一个方法中，或多或少是您所期望的——一个对象属性的函数。您可以使用方法对发生在DOM中...
每回遇到微信分享都是一个坑，目前的商城项目使用Vue开发，采用history的路由模式，配置微信分享又遇到了很多问题，最后终于解决了，现将解决的过程分享一下。 技术要点 Vue，history 常见问题及说明debug模式下报false 这个没得说，就是调用wx.config方法的参数错误造成的，请确认以下事项： 是否成功绑定了域名（域名校验文件要能被访问到）使用最新的js-sdk文件，因为微信会改部分apiconfig方法的参数是否传正确了（拼写错误、大...
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅 RFC。引vue官方文档之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~ 插槽我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽) 插槽分类...
简介先来看最终成果：操作逻辑为： 点击 ... 弹出 context-menu;点击非 context-menu 区域，隐藏 context-menu；点击 context-menu 中的任何一个选项，隐藏 context-menu；思考 项目是基于 vux 做的，本想着偷懒直接在 vux 库翻组件用，但看了一圈下来，居然这么通用的组件在 vuex 中没有！接着又去翻开源的解决方案，看了几个库还算 ok，但此时前端小哥来了，说实现这个菜单不需要用到这么重的东西，直接写就行了。 当时我的脑海中...
本文实例总结了vue组件之间通信方式。分享给大家供大家参考，具体如下： 对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的各种方式的总结，总共有8种方式。 1. props和$emit 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。 Vue.component(child,{data(){return {mymessage:this.message}},template:`<div><input type="text" v-model="mymessage" @inp...
这个是我的第一个vue项目，历时了两个多星期完成吧，通过这个项目了解了vue框架的基本语法以及生命周期等特性，并且了解了vue-loader、vue-cli、vue-router、vuex的基本使用方法，以及使用到axios，swiper，mint-ui，Volecity库，收获颇深，因此想在此简单地叙述一下重构有赞商城的基本思路以及当中的一些重要操作，另外当作对自己项目的回顾以及相关vue知识的总结。 以下是本次项目的代码链接和预览链接：代码链接：https://githu...
首先 下载 npm install vue-class-component vue-property-decorator --save-dev一梭子直接干； 其次，咱来说说它们的区别与联系： vue-property-decorator社区出品；vue-class-component官方出品 vue-class-component提供了Vue、Component等； vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch； 开发时正常引入vue-property-decorator就行 引入后写v...
当我们在做项目时，我们需要做当前页面的刷新来达到数据更新的目的，在此我们大概总结了几种常用的页面刷新的方法。 1.window.location.reload(),是原生JS提供的方法，this.$router.go(0):是vue路由里面的一种方法，这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入。 2.通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来：...
下面就是小编带给大家的Vue中怎么使用canvas方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像appendChild那样插入canvas对象。2、项目架构是vue-cli的单页应用，如果在index.html入口主文件里面引入<script src=html2canvas.js></script>；3、这样每个组件都会加载此js，造成资源浪费。所以通过import方式，在需要的...
1、路由通信传值 路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。 例子：创建并在路由注册一个组件Head <template><div id="head"><button @click="handleChange">clickMe</button> //给按钮绑定点击事件</div></template><script> export default {name: Head,data () {return {}},mounted(){},updated(){},methods:{handleChange(){this.$router.push({ path:"/about" , query:{ text:"我是阿格斯之盾" } }...