1、常用的引用组件方式

例子链接

1
2
3

<div>
  <ButtonCounter />
</div>

1
2
3
4
5
6
7

import ButtonCounter from "./ButtonCounter.vue"

export default {
  components: {
    ButtonCounter
  }
}

2、考虑如下场景

例子链接

1
2
3
4

<div>
  <button @click="CreateButtomCounter">点击加载组件</button>
  <div id="root"></div>
</div>

一、控制指令:

1、@for 循环

@for $var from <start> through <end>

@for $var from <start> to <end>

当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值

1
2
3
4
5
6

@for $i from 1 through 3 {
  .item-#{$i} {
    transform: rotate(($i * 30) * 1deg);
    animation: load 1.2s linear (($i - 1) / 10) * 1s infinite;
  }
}

1、通用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Function.prototype.before = function( beforefn ) {
  const _self = this;
  return () => {
    beforefn.apply( this, arguments )
    return _self.apply( this, arguments )
  }
}

Function.prototype.after = function( afterfn ) {
  const _self = this;
  return () => {
    const ret = _self.apply( this, arguments )
    afterfn.apply( this, arguments )
    return ret
  }
}

1、现代web开发

记录一下这个blog添加demo的过程

一、创建一个新的github仓库。

1、创建库，起名demos

1、sync修饰符（v2.3.0+ 新增）

父组件代码

1
2
3
4
5

<div>
  <child :value.sync="doc"></child>
  <div>father： <input type="text" v-model="doc" /></div>
  <div>result： <span v-html="doc"></span></div>
</div>

测试用例，代码自动化监测，codereview的第一步。是个不应被忽视的环节。

使用git bash工具

本地目录

1

$ e: 00aa/blog

本地预览

1
2

$ hexo g 
$ hexo s

部署到github

1
2

$ hexo clean
$ hexo d

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"