0.0.1-alpha.8 • Published 5 years ago

@rustle/grass v0.0.1-alpha.8

Weekly downloads
1
License
ISC
Repository
github
Last release
5 years ago

一个简单的 mvvm 库

NPM version

如何使用

全局API

组件实例

模板指令

grass-loader 一起使用

grass-loader 会预编译模板,所以你可以像 vue 一样使用单文件组件,不同的是,这个单文件组件并不包含 css

<template>
  <div styleName="xx">{{ tao }}</div>'
</template>

<script>
  import { CSSModules } from 'grass'
  import style from './style.css'

  @CSSModules(style)
  class P extends Grass.Component {
    // #temp
    constructor () {
      super()
      this.state = {
        tao: 'chentao',
      }
    }
  }
</script>

对于无状态组件,可以选择只有一个 <template></template> 标签,无状态模板有两个配置项可供选择

  • name 属性是这个无状态组件的组件名
  • styleSrc 属性为这个无状态组件的需要的 css,如果设置了此属性,会自动开启 css module(需要 css-loader 配合)
  <template name="noState" styleSrc="./style.css">
    <div styleName="xx">{{ tao }}</div>'
  </template>

报错信息显示的组件名称,是根据组件的声明名字进行关联的,所以注重的地方是组件创建时的 name。欢迎大家提 bug 啊,一起学习。前端小分队 qq 群:624921236