Hexo
0%

Posted on Edited on

示例HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>

<head>
  <title>Vue.js</title>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <ol>
      <!-- Create an instance of the todo-item component -->
      <todo-item></todo-item>
    </ol>
    
  </div>

  <script>
    Vue.component('todo-item', {
      template: '<li>This is a todo</li>'
    })
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
    })
  </script>
</body>

</html>
Read more »

Posted on Edited on

示例HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>

<head>
  <title>Vue.js</title>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{message}  
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      created() {
        this.message = '你好'
      }
    })
  </script>
</body>

</html>

接下来我们就要分析在created钩子中改变this.message是如何影响视图变化的

Read more »

Posted on Edited on

多年以后，当我历经风雨的洗礼，岁月的沉淀，我知道我想重新遇见那个它，那个在无数个日夜让我魂牵梦萦的Vue.js。它的出现，让世界与众不同。

示例HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>

<head>
  <title>Vue.js</title>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      created() {
        this.message = '你好'
      }
    })
  </script>
</body>

</html>
Read more »

Posted on Edited on

示例HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>

<head>
  <title>Vue.js</title>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.js"></script>
  <script src="../../../vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- use router-link component for navigation. -->
      <!-- specify the link by passing the `to` prop. -->
      <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
  </div>

  <script>
    // 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
    // and then call `Vue.use(VueRouter)`.

    // 1. Define route components.
    // These can be imported from other files
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    // 2. Define some routes
    // Each route should map to a component. The "component" can
    // either be an actual component constructor created via
    // `Vue.extend()`, or just a component options object.
    // We'll talk about nested routes later.
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    // 3. Create the router instance and pass the `routes` option
    // You can pass in additional options here, but let's
    // keep it simple for now.
    const router = new VueRouter({
      routes // short for `routes: routes`
    })

    // 4. Create and mount the root instance.
    // Make sure to inject the router with the router option to make the
    // whole app router-aware.
    const app = new Vue({
      router
    }).$mount('#app')

// Now the app has started!

  </script>
</body>

</html>
Read more »

Posted on Edited on

pitch是俯仰角，上为正。
roll是翻滚角，顺时针为正。
heading（yaw）是偏航角，由北方向旋转，向东为正。
pitch, roll, heading(yaw)

Posted on Edited on

数组的Mutator方法

  • copyWithin
  • fill
  • pop
  • push
  • reverse
  • shift
  • sort
  • splice
  • unshift

uncurry

1
2
3
4
5
6
Function.prototype.uncurrying = function(){
  var self = this;
  return function(){
    return Function.prototype.call.apply( self, arguments );
  }
};

Posted on Edited on

对象方法的区别

Object.keys返回自身的可枚举的属性数组, 而Object.getOwnPropertyNames返回自身的包括不可枚举的属性数组,但不包括symbol的属性。

1
2
3
4
5
6
7
var a = {};
Object.defineProperties(a, {
    one: {enumerable: true, value: 1},
    two: {enumerable: false, value: 2},
});
Object.keys(a); // ["one"]
Object.getOwnPropertyNames(a); // ["one", "two"]

for in和for of区别

for in遍历自身可枚举的所有属性, for of遍历iterable对象。

Posted on Edited on

多帐号配置

  1. 生成一个公司用的SSH-Key
    $ ssh-keygen -t rsa -C 'xxxxx@company.com' -f ~/.ssh/gitee_id_rsa
  2. 生成一个github用的SSH-Key
    $ ssh-keygen -t rsa -C 'xxxxx@qq.com' -f ~/.ssh/github_id_rsa
  3. 在 ~/.ssh 目录下新建一个config文件，添加如下内容（其中Host和HostName填写git服务器的域名，IdentityFile指定私钥的路径）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # gitee
    Host gitee.com
    HostName gitee.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/gitee_id_rsa
    # github
    Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/github_id_rsa
  4. 用ssh命令分别测试
    1
    2
    $ ssh -T git@gitee.com
    $ ssh -T git@github.com

配置add and commit别名

1
git config --global alias.ac '!git add -A && git commit -m'

windows下:

1
git config --global alias.add-commit "!git add -A && git commit"

Posted on Edited on

最近在wsl中开发前端项目，发现在本地联调环节存在网段不同的问题，不能直接进行通信，解决方案如下：

1
netsh interface portproxy add v4tov4 listenport=4000 listenaddress=0.0.0.0 connectport=3000 connectaddress=192.168.3.108

需要在powershell的管理员模式下添加端口转发，监听windows主机的某端口，然后转发到局域网内的对应端口。因为通过在wsl中使用cat /etc/resolve.conf可以查看到windows主机的IP，通过访问windows主机的相应端口（这里是4000），就可以实现转发到本地局域网的其他主机了。

Posted on Edited on

最近在写表格页面，梳理一下关于 ant design 表格组件的几个属性，以防失忆。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a-table :columns="columns" :data-source="data">
  <a slot="name" slot-scope="text">{{ text }}</a>
  <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
  <span slot="tags" slot-scope="tags">
    <a-tag
      v-for="tag in tags"
      :key="tag"
      :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
    >
      {{ tag.toUpperCase() }}
    </a-tag>
  </span>
  <span slot="action" slot-scope="text, record">
    <a>Invite 一 {{ record.name }}</a>
    <a-divider type="vertical" />
    <a>Delete</a>
    <a-divider type="vertical" />
    <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
  </span>
</a-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    // 定义一个title slot的别名为customeTitle，
    // 在模板中写customTitle这个slot的内容就可以重新定义该列表头的内容
    // 在这里customTitle在原title前面添加了一个icon
    slots: { title: 'customTitle' },
    // customRender代表重写每一个行的该列的内容区，
    // 利用名为name的slot <a slot="name" slot-scope="text">{{ text }}</a>
    // 就可以重新将内容区定义为超链接的形式。
    // slot-scope="text, record, index" ,在模板中可以使用这三个值。
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' },
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];