快速了解
在页面中用script标签引入drunk.js后可以通过以下例子快速了解基本的数据绑定的用法。
Hello World
<div>Hello {{message}}!</div>
// 创建一个组件实例,并挂载到body
var view = new drunk.Component({
message: 'world'
});
view.$mount(document.body);
数据双向绑定
在标签上使用drunk-model属性进行双向绑定
<!--在输入框修改数据后，会更新p标签的内容-->
<body>
<p>Hello {{message}}!</p>
<input type="text" drunk-model="message" />
</body>
var view = new drunk.Component({
message: 'world'
});
view.$mount(document.body);
渲染列表
<body>
<ul>
<li drunk-repeat="todo in todoList">
{{todo.content}}
</li>
</ul>
</body>
var app = new drunk.Component({
todoList: [
{
content: "看书"
},
{
content: "洗澡"
},
{
content: "睡觉"
}
]
});
app.$mount(document.body);
注册事件
<body>
<application>
<p>This is the message: {{message}}!</p>
<input type="text" drunk-model="message" />
<button drunk-on="click: message = ''">清空输入框</button>
<button drunk-on="click: clear()">清空输入框</button>
</application>
</body>
// es5
var MyApp = drunk.Component.define({
init: function () {
this.message = 'default message';
},
clear: function () {
this.message = '';
}
});
// es6
class MyApp extends drunk.Component {
init() {
this.message = 'default message';
}
clear() {
this.message = '';
}
}
var app = new MyApp();
app.$mount(document.querySelector('application'));
完整的例子
<application>
<input d-model="content" d-on="click: addTodo()">
<ul>
<li d-repeat="todo,index in todoList">
<span>{{ todo.content }}</span>
<button d-on="click: removeTodo(index)">移除</button>
</li>
</ul>
</application>
// 设置指令的前缀
drunk.config.prefix = 'd-';
// 声明一个组件
class MyTodoApp extends drunk.Component {
init() {
this.todoList = [];
this.content = '';
}
addTodo() {
if (!this.content || /\S/.test(this.content)) {
return;
}
this.todoList.push(this.content);
this.content = '';
}
removeTodo(index) {
// this.todoList.$removeAt(index);
this.todoList.splice(index, 1);
}
}
var app = new MyTodoApp();
app.$mount(document.querySelector('application'));