发布于 2017-08-29 tech Moon

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.文档原话）所以就详细了解一下。

Github地址

Kabir博客

Hello Moon!

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='https://unpkg.com/moonjs'></script>
</head>
<body>
	<div id='app1'>
		<p>{{msg}}</p>
	</div>
	<script>
		const app1 = new Moon({
			el: '#app1',
			data: {
				msg: 'Hello Moon!'
			}
		});
		app1.set('msg','Change Message')
	</script>
</body>
</html>

程序解读：

创建Moon实例,初始化

const app1 = new Moon({
  el: '#app1',//Moon识别el并将自己挂载到元素 app1上
  data: {
    msg: 'Hello Moon!'
  }//data 存储我们所有的数据，并可以实时更新
});

1
2
3

<div id='app1'>
  <p>{{msg}}</>/*{{}}语法，插入data中对应属性，每次对msg属性的改变会立即更新到<p></p>元素*/
</div>

改变数据

通过Moon实例的方法 set更改数据

const app1 = new Moon({
  el: '#app1',//Moon识别el并将自己挂载到元素 app1上
  data: {
    msg: 'Hello Moon!'
  }//data 存储我们所有的数据，并可以实时更新
});

app1.set('msg','Change Message!');

同样可以在浏览器的控制台（console) 输入命令，app1.set('msg','Change Message!')

方法

通过调用方法methods重用代码，通过调用callMethod函数

方法名作为第一个参数，任何大小的数组作为第二个参数

当只有用callMethod函数调用方法，this才可以作为指向实例的引用

1
2
3

<div id='app2'>
	<p>{{msg}}</p>
</div>

const app2 = new Moon({
	el: '#app2',
	data: {
      msg: 'Hello Moon!'
	}
	methods: {
		changeMessage: function(n_msg){
          this.set('msg',n_msg)
		}
	}
});

app2.callMethod('changeMessge',['New Message!']);

同样可以在浏览器的控制台输入命令app2.callMethod('changeMessage',[''New Message!"])

除此之外，方法也可以在template内使用.意味着你可以得到一个方法的输出

1
2
3

<div id='app3'>
	<p>{{reverse(msg)}}</p>
</div>

const app3 = new Moon({
  el: ‘#app3’,
  data: {
    msg: 'Hello Moon!'
  },
  methods: {
    reverse: function(str){
      return str.split("").reverse().join("");
    }
  }
 
});

可以在控制台输入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
2
3

<div id='app4'>
	<p -mif='condition'>The Condition is True!</p>
</div>

const app4 = new Moon({
  el: '#app4',
  data: {
    condition: true
  }
});

m-show切换元素的display属性

尝试着在控制台输入app4.set('condition',false)

循环

m-for这条指令允许你通过数组进行迭代并展示他们，如果你改变数组的任何元素，DOM会被立即更新进行匹配

<div id='app5'>
	<ul>
		<li m-for='item in list'>{{item}}</li>
	</ul>
</div>

const app5 = new Moon({
  el: '#app5',
  data: {
    list: ['Item1','Item2','Item3']
  }
});

试着在控制台输入命令app5.set('list',['new item','another item'])

很好！我们现在可以条件性地渲染元素，列表，但是如果想从用户手中得到数据该怎么办?对于此类问题，我们用m-on注意，所有指令前均有m-

<div id='app6'>
	<p>{{count}}</p>
	<input type='button' f-on=‘increment' value='加1' />
</div>

const app6 = new Moon({
  el: "#app6",
  data: {
    count: 1
  },
  methods: {
    increment: function(){
      this.set('count',this.get('count')+1);
    }
  }
});

试一试点击 加一 立即增加count

下一步

以上是Moon API的关键特征，更多高级特征请看API docs或者其他指导

下一步是学习 How to compose with components

陆续写了几篇文章，但是我感觉总是有一点浅尝辄止，坚持写下去

Any question please contact 1-riverfish

上一篇: Moon框架入门教程2 下一篇: Electron开发入门2

Share&Joy

Ginger' Blog

Moon框架入门教程1

Hello Moon!

创建Moon实例,初始化

改变数据

方法

条件渲染

循环

下一步