douyasi 发布的文章

Vue 实现父子组件双向绑定最正确的做法

最近在学习 vue ,遇到了父子组件数据绑定的问题。Vue 官方文档有这样一段话:

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

但这并不是说父页面就不能跟子组件双向通讯,不过就是麻烦了一点。在 Google 了诸多之后,尝试了网络上一些破碎零星的代码(什么计算属性,侦听器等)之后,终于找到了最佳的做法:prop.sync

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prop 双向绑定的实现</title>
    <script src="dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>父组件数据</h1>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>{{ name }} <input type="text" v-model="name" /></td>
            <td>{{ age }} <input type="number" v-model.number="age" /></td>
        </tr>
    </table>
    <!--
      v-bind:my-name
      v-on:update:my-name="my-name = $event"
    参考文档
      https://cn.vuejs.org/v2/guide/components-custom-events.html
    -->
    <user-table
      v-bind:my-name.sync="name"
      v-bind:my-age="age"
      v-on:change-age="age = $event"
    ></user-table>
</div>
<template id="userTable">
    <div>
        <h2>子组件数据</h2>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>{{ myName }} <input type="text" :value="myName" @input="updateName" /></td>
                <td>{{ myAge }} <input type="number" :value="myAge" @input="updateAge" /></td>
            </tr>
        </table>
    </div>
</template>
<style>
table, td, th {
    border-collapse: collapse;
    border-spacing: 0
}
table {
    margin: 20px;
}
td, th {
    border: 1px solid #bcbcbc;
    padding: 5px 10px
}
th {
    background: #42b983;
    font-weight: 400;
    color: #fff;
    cursor: pointer
}
</style>
<script>
var UserTable = {
  props: {
    myName: String,
    myAge: Number
  },
  template: '#userTable',
  watch: {
    myName: function (val) {
      console.log('child-component watch fater-component name:' + val)
    },
    myAge: function (val) {
      console.log('child-component watch father-component age:' + val)
    }
  },
  methods: {
    updateName (evt) {
      console.log(evt)
      console.log('_name value:' + this.myName)
      console.log('evt.target.value:' + evt.target.value)
      this.$emit('update:myName', evt.target.value)
      console.log('child-component myName:' + this.myName)
    },
    updateAge (evt) {
      console.log(evt)
      console.log('_name value:' + this.myAge)
      console.log('evt.target.value:' + evt.target.value)
      // 自定义 change-age 事件
      this.$emit('change-age', Number(evt.target.value))
      console.log('child-component myAge:' + this.myAge)
    }
  }
}
new Vue({
  el: '#app',
  data: {
    name: '张三',
    age: 20
  },
  components: {
    'user-table': UserTable
  },
  mounted() {
    const vm = this
    setInterval(() => { console.log('name', this.name, 'age', this.age); }, 3000);
  }
})
</script>
</body>
</html>

使用 Event-Emit 方式实现的示例(请随意在输入框中输入数据,观察数据文本变化):

https://raoyc.com/learning_vue/example/cp_2.html

- 阅读剩余部分 -

解决响应首行输出一行空白问题

最近在开发过程中,发现页面 响应在首行都会输出一行空白,这个问题初步搜索说是 UTF-8 BOM 问题。人工一个一个文件排查是很耗时的,一“翻”谷歌之后,发现了一款检测神奇 phptags tag tidier

解决办法如下(似乎直接下载 phptags-1.2.phar 使用不行):

# 直接下载 phptags 源码
wget http://include-once.org/p/phptags/phptags
# 追加可写权限
chmod +x phptags
# /php/project/folder 项目文件夹目录
php phptags --whitespace /php/project/folder

官网提供了更多的使用示例:

usage examples
phptags --whitespace *.php cleans up spaces or UTF-8 BOM issues before opening and after close tags
phptags --warn directory/ searches through a directory and just warns about whitespace issues
phptags --close --long --tokenizer *.php adds close tags, converts open tags into long form <?php and uses the more reliable --tokenizer mode (instead of --regex)
phptags --unclosed --shortall dir/ ../*.tpl includes/ converts all tags into short forms, and strips close tags of a document (it's advised to rather have whitespace issues fixed than keep using the newcomer workaround)

使用gogs搭建自己的私有代码仓库

以前钟爱的 http://coding.com 在收费的道路上越走越远,下定决心自己搭建一个私有代码仓库服务。
有之前安装 gitlab 各种依赖配置不便之处,此次决定使用 gogs 搭建自己的私有代码仓库

安装参考官方文档即可成功,比搭建 gitlab 要简单多了。

https://gogs.io/ (官方网站访问不稳定,多试试)

为了安全起见,搭建好的私有仓库服务地址暂时不放出。

开始关注虚拟币

来自 https://www.zhihu.com/question/21478404/

  • 怎样选择使用比特币钱包? 日常使用的额度通常小于10个币,可以存放在电脑或手机App中。通常存放1个币以下是比较保险的,丢了不太心疼嘛
  • 持有几十、几百个币的,可以选择http://BlockChain.Info等在线钱包。其也可以当做日常钱包使用。
  • 持有上千甚至数万的,应该分开存储,并隔离存放。使用离线电脑生产密钥,打印出来托管至银行等高安全场所存储,并销毁现有密钥。同时还需要多份隔离存储,甚至对密钥进行加密。

密钥即一切,如不慎弄丢钱包,便永远失去这笔比特币。所以钱包需要小心妥善保管,不在自己的PC或者手机App中存储大量比特币,丢失的风险太高,病毒木马、硬件损坏、手机丢失等均造成无法挽救的损失。俗话讲鸡蛋不要搁在一个篮子里,多种方式存储也是降低风险的有效方式。目前丢失的比特币或有数百万BTC之巨。

常见钱包

  • Bitcoin-Qt – 官方客户端,基于C++/Qt,全平台,完全数据。
  • Electrum – 著名轻钱包
  • Armory – 基于Python,含有诸多特性的轻钱包
  • BlockChain.info – 非常著名在线钱包

可能是最好的第三方宝付 SDK !

最近公司项目需要接入宝付支付,结合官方文档我写了个宝付 sdk 第三方包,可以 composer 引入,有需要的同学可以试一试,可以很方便快捷地接入宝付。

目前本 sdk 支持以下交易子类:

  • 01 直接绑卡类交易
  • 02 解除绑定关系类交易
  • 03 查询绑定关系类交易
  • 11 预绑卡类交易
  • 12 确认绑卡类交易
  • 15 预支付交易(发送短信)
  • 16 支付确认交易
  • 31 交易状态查询类交易
    以上 8 个接口都支持传入以下可选项:
    // 'additional_info' => '测试',  // 附加字段,可以不传或留空
    // 'req_reserved' => '保留字段',  // 请求方保留域,可以不传或留空

传送门:https://github.com/douyasi/baofoo