L3F.WIN

Github及Hexo的使用

0%

发表于 更新于 分类于

介绍

Vue.js 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

起步

创建一个html文件，并将以下代码引入即可，这是最简单的vue环境

1
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

简单的例子1~7

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
65
66
67
<!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中  通常我们也把它叫做边界 数据只在边界内部解析-->
<div id="app-1">{{msg}}</div>
<div id="app-2">
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<div id="app-3">
    <span v-if = "seen">现在你可以看到我</span>
</div>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<div id="app-5">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">翻转 message</button>
</div>
<script src="/common/js/vue.js"></script>
<script>
    var vm = new Vue({
        //el:提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标
        el: '#app-1',
        //Vue实例的数据对象，用于给View 提供数据
        data: {
            msg: "Hello Vue"
        }
    })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: "页面加载于" + new Date().toLocaleString()
        }
    })
    //vue使用判断
    var app3 = new Vue({
        el: '#app-3',
        data:{
            seen: true
        }
    })

    var app4 = new Vue({
        el: '#app-4',
        data:{
            todos: [
                {text: '学习 Javascript'},
                {text: '学习 Vue'},
                {text: '创建激动人心的代码'}
            ]
        }
    })

    var app5 = new Vue({
        el: "#app-5",
        data: {
            message: "Hello Vue.js",
        },
        methods:{
            reverseMessage: function(){
                this.message = this.message.split('').reverse().join("")
            }
        }
    })
</script>
阅读全文 »

发表于 分类于

SOURCEMAPS

Stylus支持基础的源地图 Sourcemap v3 spec

创建一个源地图

使用Stylus文件传递–sourcemap标志（或-m）。 这将创建一个style.css文件和一个style.css.map文件作为您的style.styl的兄弟文件，并将style.css底部的sourcemap链接放到您的sourcemap中。
stylus -m style.styl
您也可以在观看文件时运行此命令。 例如： stylus -w -m style.styl。 这会在每次保存时更新您的源映射。

Javascript API

使用选项对象或布尔值设置sourcemap设置：

1
2
3
4
5
6
7
8
9
10
var stylus = require('stylus');

var style = stylus(str)
  .set('filename', 'file.styl')
  .set('sourcemap', options);

style.render(function(err, css) {
  // generated sourcemap object
  console.log(style.sourcemap);
});

Options

comment 在生成的CSS中添加一个带sourceMappingURL的注释（默认值：true）
inline 使用base64格式的全部源文本内联源图（默认：“false”）
sourceRoot 生成的源映射的“sourceRoot”属性
basePath 源图和所有源相对的基本路径（默认值：.）

发表于 分类于

JavaScript API

require模块，用给定的Stylus代码字符串调用render()，以及（可选的）optional对象。
传递filename参数可以利用Stylus框架提供更好的错误报告。

1
2
3
4
5
6
var stylus = require('stylus');

stylus.render(str, { filename: 'nesting.css' }, function(err, css){
  if (err) throw err;
  console.log(css);
});

我们可以用更渐进的方式实现做一样的事：

1
2
3
4
5
6
7
var stylus = require('stylus');

stylus(str)
.set('filename', 'nesting.css')
.render(function(err, css){
  // logic
});
阅读全文 »

发表于 分类于

自检API(Introspection API)

Stylus支持自我检测的API, 这允许混写以及函数反应调用者的相关性。

混入(mixin)

mixin这个局部变量在函数体内自动赋值。如果调用的函数在根级别，则mixin包含字符串root, 如果其他情况，则是block, 如果调用函数有返回值，最终为false.
下面这个例子中，我们定义reset(), 根据其是混入了根部，还是混入块状域，还是混入返回值中，来修改其值，并作为foo属性的值呈现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
reset()
  if mixin == 'root'
    got
      root true
  else if mixin
    got 'a mixin'
  else
    'not a mixin'

reset()

body
  reset()
  foo reset()

=>
got {
  root: true;
}
body {
  foo: "not a mixin";
  got: "a mixin";
}

发表于 分类于

连接中间件(Connect Middleware)

有了连接中间件，无论Stylus片段什么时候改变，这些片段都能够自动编译。

stylus.middleware(options)

选项
返回给定options下的连接中间件。

1
2
3
4
5
6
7
8
9
`serve`     从 `dest` 提供stylus文件 [true]
`force`     总是重新编译
`src`       资源目录用来查找 .styl 文件
`dest`      `src`默认为undefined时，用来输出 .css 文件的目标目录
`compile`   自定义编译函数，接受参数`(str, path)`.
`compress`  是否输出的 .css 文件要被压缩
`firebug`   生成的CSS中发出调试信息，可被Firebug插件FireStylus使用
`linenos`   生成的CSS中发出注解，表明响应的stylus行
`sourcemap` 以sourcemaps v3格式生成源映射
阅读全文 »

发表于 分类于

错误报告(Error Reporting)

Stylus内置梦幻般的错误报告，针对语法、解析以及计算错误，完整的堆栈跟踪，行号和文件名。

解析错误

解析错误例子：

1
2
3
4
5
6
7
8
9
10
11
12
body
  form input
    == padding 5px
=>
ParseError: test.styl:3:16
  1| body
  2|    form input
  3|      == padding 5px
---------------------^
  4|

illegal unary "==", missing left-hand operand
阅读全文 »

发表于 分类于

可执行性(EXECUTABLE)

正因有stylus可执行性，Stylus才能将自身转换成CSS.

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
Usage: stylus [options] [command] [< in [> out]]
              [file|dir ...]

Commands:

  help [<type>:]<prop> Opens help info at MDC for <prop> in
                       your default browser. Optionally
                       searches other resources of <type>:
                       safari opera w3c ms caniuse quirksmode

Options:

  -i, --interactive       Start interactive REPL
  -u, --use <path>        Utilize the Stylus plugin at <path>
  -U, --inline            Utilize image inlining via data URI support
  -w, --watch             Watch file(s) for changes and re-compile
  -o, --out <dir>         Output to <dir> when passing files
  -C, --css <src> [dest]  Convert CSS input to Stylus
  -I, --include <path>    Add <path> to lookup paths
  -c, --compress          Compress CSS output
  -d, --compare           Display input along with output
  -f, --firebug           Emits debug infos in the generated CSS that
                          can be used by the FireStylus Firebug plugin
  -l, --line-numbers      Emits comments in the generated CSS
                          indicating the corresponding Stylus line
  -m, --sourcemap         Generates a sourcemap in sourcemaps v3 format
  --sourcemap-inline      Inlines sourcemap with full source text in base64 format
  --sourcemap-root <url>  "sourceRoot" property of the generated sourcemap
  --sourcemap-base <path> Base <path> from which sourcemap and all sources are relative
  -P, --prefix [prefix]   Prefix all css classes
  -p, --print             Print out the compiled CSS
  --import <file>         Import stylus <file>
  --include-css           Include regular CSS on @import
  -D, --deps              Display dependencies of the compiled file
  --disable-cache         Disable caching
  --hoist-atrules         Move @import and @charset to the top
  -r, --resolve-url       Resolve relative urls inside imports
  --resolve-url-nocheck   Like --resolve-url but without file existence check
  -V, --version           Display the version of Stylus
  -h, --help              Display help information
阅读全文 »

发表于 分类于

字符转码(Char Escaping)

Stylus可以字符转码。这可以让字符变成标识符，或是渲染成字面量。

例如：

1
2
3
4
5
6
body
  padding 1 \+ 2
=>
body {
  padding: 1 + 2;
}

注意Stylus中/当作为属性使用的时候需要用括号括起来：

1
2
3
4
5
6
7
8
body
  font 14px/1.4
  font (14px/1.4)
=>
body {
  font: 14px/1.4;
  font: 10px;
}

发表于 分类于

CSS样式解析(CSS Style Syntax)

Stylus完全支持常规的CSS样式解析，这意味着你无需寻求其它解析器，或指定特别的文件使用特别的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body a
  font 12px/1.4 "Lucida Grande", Arial, sans-serif
  background black
  color #ccc

form input
  padding 5px
  border 1px solid
  border-radius 5px
阅读全文 »