Vue Data里面下划线命名无效并报错

使用下划线命名

data () {
  _checked: false
}

产生报错

[Vue warn]: Property or method “_check” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

原因

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

具体参考:官方文档中的解释

解决方法

按规矩办事

data () {
  isChecked: false
}

使用sublime中的正则处理数据格式

具体的正则匹配规则请看正则表达式30分钟入门教程

源数据

一条key:value的数据

'check': '<svg viewBox="0 0 44 44"><path fill-rule="evenodd" d="M34.538 8L38 11.518 17.808 32 8 22.033l3.462-3.518 6.346 6.45z"/></svg>'

目标数据

转换为一个html数据

<symbol id="check" viewBox="0 0 44 44"><path fill-rule="evenodd" d="M34.538 8L38 11.518 17.808 32 8 22.033l3.462-3.518 6.346 6.45z"/></symbol>

思路

1. 把svg替换为symbol,并且去除''

find: svg
where: <currentFile>
replace: symbol

执行结果

'check': '<symbol viewBox="0 0 44 44"><path fill-rule="evenodd" d="M34.538 8L38 11.518 17.808 32 8 22.033l3.462-3.518 6.346 6.45z"/></symbol>'

2. 把外面的check移动到symbol里面去,并填充在viewBox前面

find: '(.*)':[空格]'<symbol[空格]
where: <currentFile>
replace: <symbol id="$1"[空格]

[空格]为实际空格

执行结果

<symbol id="check"viewBox="0 0 44 44"><path fill-rule="evenodd" d="M34.538 8L38 11.518 17.808 32 8 22.033l3.462-3.518 6.346 6.45z"/></symbol>'

3. 清理

发现多了一个',去除掉

find: symbol>'
where: <currentFile>
replace: symbol>

执行结果

<symbol id="check" viewBox="0 0 44 44"><path fill-rule="evenodd" d="M34.538 8L38 11.518 17.808 32 8 22.033l3.462-3.518 6.346 6.45z"/></symbol>

多条数据

方法和单条一样,需要多处理一下换行\n

未尽事宜

能够一次操作完成替换

通过nodejs创建目录与文件

1. 先引入文件操作类

var fs = require('fs')

2. 定义要创建的文件夹

const components = ['Accordion', 'ActionSheet', 'ActivityIndicator', 'Badge', 'Button', 'Calendar', 'Card', 'Carousel', 'Checkbox', 'DatePicker', 'DatePickerView', 'Drawer', 'Flex', 'Grid', 'Icon', 'ImagePicker', 'InputItem', 'List', 'ListView', 'LocaleProvider', 'Menu', 'Modal', 'NavBar', 'NoticeBar', 'Pagination', 'Picker', 'PickerView', 'Popover', 'Progress', 'PullToRefresh', 'Radio', 'Range', 'Result', 'SearchBar', 'SegmentedControl', 'Slider', 'Stepper', 'Steps', 'SwipeAction', 'Switch', 'TabBar', 'Tabs', 'Tag', 'TextareaItem', 'Toast', 'WhiteSpace', 'WingBlank']

3. 创建文件夹

components.forEach(function(e){
  fs.mkdir(e,0777,function(err){
    if(err){
      console.log(err)
    } else {
      console.log(e + 'is created')
    }
  })
})

4. 创建文件夹下的README文件

components.forEach(function(e){
  fs.appendFile(e+'/README.md','',function(err){
    if(err){
      console.log(err)
    } else {
      console.log(e + '\'s README.md is created')
    }
  })
})

5. 创建文件夹下的index文件

components.forEach(function(e){
  fs.appendFile(e+'/index.js','',function(err){
    if(err){
      console.log(err)
    } else {
      console.log(e + '\'s index.js is created')
    }
  })
})

6. 创建文件夹下的Vue文件

components.forEach(function(e) {
  fs.appendFile(e + '/' + e + '.vue', '', function(err) {
    if (err) {
      console.log(err)
    } else {
      console.log(e + '\'s ' + e + '.vue is created')
    }
  })
})

全部代码

var fs = require('fs')

const components = ['Accordion', 'ActionSheet', 'ActivityIndicator', 'Badge', 'Button', 'Calendar', 'Card', 'Carousel', 'Checkbox', 'DatePicker', 'DatePickerView', 'Drawer', 'Flex', 'Grid', 'Icon', 'ImagePicker', 'InputItem', 'List', 'ListView', 'LocaleProvider', 'Menu', 'Modal', 'NavBar', 'NoticeBar', 'Pagination', 'Picker', 'PickerView', 'Popover', 'Progress', 'PullToRefresh', 'Radio', 'Range', 'Result', 'SearchBar', 'SegmentedControl', 'Slider', 'Stepper', 'Steps', 'SwipeAction', 'Switch', 'TabBar', 'Tabs', 'Tag', 'TextareaItem', 'Toast', 'WhiteSpace', 'WingBlank']

components.forEach(function(e){
  fs.mkdir(e,0777,function(err){
    if(err){
      console.log(err)
    } else {
      console.log(e + 'is created')
    }
  })
})

components.forEach(function(e){
  fs.appendFile(e+'/README.md','',function(err){
    if(err){
      console.log(err)
    } else {
      console.log(e + '\'s README.md is created')
    }
  })
})

components.forEach(function(e){
  fs.appendFile(e+'/index.js','',function(err){
    if(err){
      console.log(err)
    } else {
      console.log(e + '\'s index.js is created')
    }
  })
})

components.forEach(function(e) {
  fs.appendFile(e + '/' + e + '.vue', '', function(err) {
    if (err) {
      console.log(err)
    } else {
      console.log(e + '\'s ' + e + '.vue is created')
    }
  })
})

未尽事宜

  1. 可以通过循环一次性创建
  2. 首先遍历目录,如果发现已经创建的文件夹、文件则不再创建,只创建其他未被创建的
  3. 文件的内容可以事先写入
  4. 通过交互式方法完成输入

mac 下使用ssh访问非22端口的gitlab

生成ssh key

ssh-keygen -t rsa -C "your.email@example.com" -b 4096

如果使用的不是默认key的话,需要添加一下

ssh-add ~/.ssh/other_id.rsa

测试ssh连接

ssh -T git@example.com

如果ok的话,会显示

Welcome to Gitlab

如果提示端口不正确的话,可以添加-p参数

ssh -T -p 443 git@example.com

SourceTree使用问题

如果默认不是22端口,可以写一个config文件放在~/.ssh/里,内容如下

Host gitlab.com
Port 443
RSAAuthentication yes
IdentityFile ~/.ssh/config/private-key-filename