Moon框架入门教程1
Github上最近比较火的前端框架,轻量,快速,碰巧小编最近在学习Javascript,React.js没有怎么接触,而其作者Kabir在官方文档中声称Moon.js集百家之长而体积小,拥有快速的渲染时间(Moon aims to combine all of the good features of these libraries into a single, lightweight package, while providing improved performance.文档原话)所以就详细了解一下。
Hello Moon!
1 |
|
程序解读:
创建Moon实例,初始化
1 | const app1 = new Moon({ |
1 | <div id='app1'> |
改变数据
通过Moon实例的方法
set
更改数据
1 | const app1 = new Moon({ |
同样可以在浏览器的控制台(console) 输入命令,app1.set('msg','Change Message!')
方法
通过调用方法methods
重用代码,通过调用callMethod函数
方法名作为第一个参数,任何大小的数组作为第二个参数
当只有用callMethod函数调用方法,this
才可以作为指向实例的引用
1 | <div id='app2'> |
1 | const app2 = new Moon({ |
同样可以在浏览器的控制台输入命令app2.callMethod('changeMessage',[''New Message!"])
除此之外,方法也可以在template
内使用.意味着你可以得到一个方法的输出
1 | <div id='app3'> |
1 | const app3 = new Moon({ |
可以在控制台输入app3.set(‘msg’,’racecaR’)
条件渲染
(Conditional Rendering不知道这样翻译对不对)
开始我们的第一条指令,指令是指向元素中添加特定行为的方法(ways非methods)
m-if
小编觉得可以理解为属性attribute
This lets us put in any data, including templates into the directive as an attribute. If it is truthy, it will be rendered, if it is falsy, it won’t be rendered (the element won’t exist).
1 | <div id='app4'> |
1 | const app4 = new Moon({ |
m-show
切换元素的display
属性
尝试着在控制台输入app4.set('condition',false)
循环
m-for
这条指令允许你通过数组进行迭代并展示他们,如果你改变数组的任何元素,DOM会被立即更新进行匹配
1 | <div id='app5'> |
1 | const app5 = new Moon({ |
试着在控制台输入命令app5.set('list',['new item','another item'])
很好!我们现在可以条件性地渲染元素,列表,但是如果想从用户手中得到数据该怎么办?对于此类问题,我们用
m-on
注意,所有指令前均有m-
1 | <div id='app6'> |
1 | const app6 = new Moon({ |
试一试点击 加一
立即增加count
下一步
以上是Moon API的关键特征,更多高级特征请看API docs或者其他指导
下一步是学习 How to compose with components
陆续写了几篇文章,但是我感觉总是有一点浅尝辄止,坚持写下去
Any question please contact 1-riverfish