BIlly Feng的博客

所以我们可以直接全局搜索，这时可以看到这个文件里有PropValidator，我们继续往里面找，可以推断出我们用的是PropOptions 这个泛型类型，一看它里面便恍然大悟了！原来这些参数都是可选的，所以我们prop直接用一个空对象也是可以的。我自己查了官网，以及百度都没有找到这种写法。学过typescript的都知道，这个是泛型类型，但是PropValidator里面是什么的？

真正的双向绑定可能会产生维护问题，因为该变化的来源在父组件和子组件中都不明显。所以我们建议在子组件里以update:myPropName的模式发出事件，父组件可以以:myPropName.sync=‘xxxx’ 绑定在子组件里。最近在封装一个弹窗组件时，用了比较复杂的逻辑去做显示和隐藏的逻辑，在查看同事的代码之后，才知道还有更简单的方法，自己已经忘了一些API.喜欢思考的小伙伴的，可能发现v-model不也是双向绑定吗，是不是里面也是.sync 和 update: 的一种实现？

正常来说不刷新页面，也能更改浏览器url地址的方法有很多，我们在网上搜的话可以看到有pushState、replaceState、popstate等方法，那还有没有其他方法呢？以上意思是，总体的意思就是假如浏览器url后面带有#, 使用window.location.href, 是无法跳转的，这个刚好是vue的单页面应用的一个。最近做一个vue商城项目的时候，用户点击支付时，用户可复制当前链接（加上登录态），粘贴到第三方浏览器之后，完成整个支付闭环。

今天用iview的form组件写一个项目，一个问题卡了比较久，如下图：就是我这边在主体的输入框里输入了值，但还是报“请输入主体”验证信息，排查了有点长时间，才发现data里的忘记定义了这个参数，如下：原因：跟vue的响应式属性有关，对于未在data定义里的属性都不是响应式属性，除非你用$set去解决官方文档有说明：...

目前项目所有表格全部都要设成可许拖拽调整宽度的，文档如下：需要每一列设置width固定宽度才能生效，这样就产生一个问题，如下：屏幕一长，最后一列就出现额外的空白，这时我们会说可以把最后一列width设成自适应，即“auto”不就解决了？但是这样又遇到另外个问题：如下 就是屏幕一缩小，表格样式就会发生错乱（不知道是不是iview的bug），所以当iview表格中设置resizable为true时，最后一列要设成固定宽度，但这面临一个问题，就是屏幕变得再大的时候，最后一列还是留有空白，所以这还是无法解

今天需要实现这样一个需求：在表格往下拖动的时候，需要固定表头整体思路：自己用iview写的，当时自己想得是这个表头用绝对定位，根据页面滚动的距离从而计算出定位数值，但是这样有个问题，就是当数据多的时候，很快去滚动页面的话，这个表头会出现抖动的状态，应该计算定位px数值的时候耗了点时间，当时自己参照别人网站的时候，发现别人用的是position: sticky，自己当时也百度去搜了position: sticky的用法，发现有点乱，所以自己用google搜了下MDN文档，从而看到一个比较系统的说法：上面

今天去接了一个企业微信通知的接口，如文档示例：如下图，如果在开发环境请求的话会跨域，这时我们可以用proxy进行解决，我们可以发现原先项目已经存在了一个/api接口域名的配置，这时我们还是可以继续配置下企业微信通知接口的，另外这个接口是带https，所以我们是要加上secure:true所以我们实际请求的接口可以这样import axios form "axios"axios.post("/webhook/send?key=693axxx6-7aoc-4bc4-97a0-0ec2sifa5aaa

vue-clip3默认的NODE_ENV只有两种，一个是“production“，一个是”development“，如果要配置多个的话，需要另外配置，和vue-clip2有点区别。所以比如说在项目配置多一个环境的时候，比如加多一个.env.test，里面是这样写的NODE_ENV = 'production'VUE_APP_URL='xxxxx'VUE_APP_MODE = 'test'这里的NODE_ENV不能写成test，否则打包的时候会报错，这和vue-clip2是有点区别的。...

给Modal添加属性loading后，点击确定按钮对话框不会自动消失，并显示 loading 状态，需要手动关闭对话框，常用于表单提交。那么如何去掉这个加载样式呢，而且又能保证弹窗是需要手动关闭的，这是我想到可以用setTImeout进行实现，那么在确定的回调函数里面可以这样写，setTimeout(() => {this.loading = true;}, 0);this.loading = false;...

export default { name: "Home", data() { const _this = this; return { setObj:{ a: { } } }; }, methods: { testSet(){ //watch监测不到 // this.setObj.a.age = 6666 //watch可以监测到 thi

最近在看别人项目的时候看到有v-bind=“{row,index}”,一开始没看明白，后来发现官方文档是有的所以上面的完整写法是

之所以说想巩固下watch，因为有些概念你看似已经明白了(如上)，但在实际开发中，你又会忘记了，我们都知道watch是监测数据的变动，但有时陷入一种这样的困惑，比如当我们监听“route.path”的时候，开始route.path” 的时候，开始route.path”的时候，开始route.path默认为undefined，刷新一个“http://localhost:9999/#/user_management”这样的页面时候，为什么不会走watch里面的方法呢，原因很简单，因为你没有加immediate.

父组件代码 <template> <div> //子组件 <item1 :test="test[0]"></item1> </div> </template> <script> export default { data(){ return { test: ['test']

父组件代码 <template> <div> <item1 :test="{test:1}"></item1> //<item1 :test="[1]"></item1> //<item1 :test="'str'"></item1> </div> </template>

data里面是这样定义arr:[],obj:{}在methods中的某个事件会改变数组/对象中的元素clickBtn () {　　this.arr[0] = false 或this.arr = [false]}//或者clickBtn () {　　this.obj = {　　 test:12312　　}　　或　　this.obj.test =12312}但在computed中监听不到这个数组中元素的变化isAble() { //数组　　if (this.arr

自己之前在if判断的时候，要不就只有|| 或者&&，比较少写过&&和||同时写的情况，其实我们还可以这样写，如下：//比如在vue里面的v-for的里面的时候v-if="!item.canReceiveAward &&(item.receiveStatus === 1 || item.receiveStatus === -1 )"今天写个博客稍稍记录下...

又隔段时间没写博客了，今天写下博客。之前在项目遇到要实现这样一个需求，如下图所示：就是根据不同的状态呈现不同的颜色，一开始拿到这个需求的时候有点迷惑，后来自己查了下文档，发现可以这样做，废话不多说，直接上代码（相关逻辑代码可以忽略）：//template里面 <ul class="flex calendar_day font-ml flex"> <li v-for="(item, index) in calendarInfo.calendars" :k

最近在vue项目里尝试在函数参数里写三元表达式，发现是可以的，列下所写代码，仅作为参考。 <div class="countdown flex flex-align-center" v-if="sourceType==='killproducts'"> <div class="reset_countdownheight valign-center"> <span>本期抢兑秒杀倒计时：</span>

React如其官方介绍：React - A JavaScript library for building userinterfaces, React是一个为数据提供渲染为HTML视图的开源JavaScript库。从这个定义来看，可以发现React是一个View层，它的作用是提供了一套数据机制。用了virtual dom，属于facebook公司的vue的官方文档是说vue的核心库也只是关注视图（View）层。所以，实际上来说，和angular有完整的解决方案不同，狭义的vue.js和react.j

最近在项目中，遇到一个属性的打包的问题，在本地看没有问题，在线上是有问题的。在网上看到有3个解决方案，参考链接是https://blog.youkuaiyun.com/weixin_41544124/article/details/92646582以上说的3个解决方案中，只有第二种的解决方法才有效果，那就是在行内样式-写 <span class="item_topic" style="-webkit-box-orient: vertical;">{{item.goodsName}}</span&

最近在vue项目中用cube-ui里的better-scroll时候，出现两次点击的问题，在网上查了下，说是可以是用“防止短时间内请求提交”解决，具体代码如下：var DEBOUNCE_TIME = 400new Vue({ data: function () { return { tId: null } }, methods: { getList: function () { window.clearTimeout(this.tId)

最近在项目实现一个问卷调研的功能，发现正常情况下，多选框是可以单击取消选中状态的，单选框就不行，单选框选中了就不能再取消，刚开始自己不知道怎么解决，然后自己百度了下，果然还是有大神解决了。1、问题就是将input radio单选框改造成单击可以取消其选中状态2、单纯的对input radio进行js控制行不通，因为radio是通过v-repeat出来的，有很多个，如果每一个都去获取元素的话，执行效率太低，failed3、给radio添加click事件，判断checked属性，如果为true则取消ch

自己之前也查看vue-bus插件里的源码封装，其实基于vue的实例，实现全局可以调用on，on，on，once，$ off，$emit，其实自己也可以手动封装，但是感觉这个插件也不大，所以为了效率直接下载进项目里面。下面介绍它的几个主要用法：全局定义的事件是不会跟随组件的生命周期函数进行状态改变的。切换路由时，如果不手动清除事件的话，它会注册多次。 created() { //手动清...

Vue.extend({}) 简述：使用vue.extend返回一个子类构造函数，也就是预设部分选项的vue实例构造器。（说那么多还是创建一个组件的意思，个人觉的有点类似于原生的createElement()的意思）可以结合以下两种方式实现一个组件一.可以使用vue.component进行实例化// 注册组件，传入一个扩展过的构造器Vue.component('my-component',...

其实extends,mixins,extend,mixin简单来说，就是用来抽离出组件间公用的部分，从而使整个代码达到封装的目的。一. mixinsmixins 选项接收一个数组，这个数组可以包含着对象，这个对象里可以包含着各种选项，比如created,mouted…使用的是和 Vue.extend() 一样的选项合并逻辑。var mixin = { created: function ...

借鉴 https://blog.youkuaiyun.com/grapelove01/article/details/80717938官方解释一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。汇总别人的v-if适合运营条件不大可能改变；v-show适合频繁切换。（...