This is a js framework!
Usage
<script src="aue.js"></script>or
<script src="//cdn.jsdelivr.net/gh/xc912/[email protected]/js/aue.js"></script>Create an instance of Aue:
var am = new Aue({
// options
})Data:
var am = new Aue({
data: {
msg: 'Hello Aue.js'
}
});Methods:
var am = new Aue({
methods: {
fn: function(self) {
console.log(self.value);
}
}
});Binding data:
<span>Message: {{ msg }}</span>
<input a-value="Message: {{ msg }}" />
<input type="checkbox" a-checked="isChecked" />
<input type="button" a-value="switch isChecked" a-click="switchChecked" />
<script>
var app = new Aue({
el: "#app",
data: {
msg: 'Welcome to Aue.js!',
isChecked: true
},
methods: {
switchChecked: function(self) {
aue.isChecked = !aue.isChecked;
}
}
});
</script>Binding data (once):
<span a-once>Message: {{ msg }}</span>Click event:
<button a-click="fn"></button>Update data:
<div id="app">
<input type="button" a-click="fn" a-value="Message: {{ msg }}" />
<div/>
<script>
var app = new Aue({
el: "#app",
data: {
msg: 'Welcome to Aue.js!'
},
methods: {
fn: function(self) {
aue.msg = 'Hello Aue.js';
}
}
});
</script>Update data synchronously:
<div id="app">
<input a-model="value" />
<input a-model="value" />
<input type="radio" a-model="value" />
<input type="checkbox" a-model="value" />
<p>{{ value }}</p>
<div/>
<script>
var app = new Aue({
el: "#app",
data: {
value: 'Welcome to Aue.js!'
}
});
</script>Conditional rendering:
<style>
.red {
background-color: red;
width: 80px;
height: 80px;
margin: 0 auto;
}
</style>
<div id="app">
<div a-show="isShow" class="red"></div>
<input type="button" a-value="switch isShow" a-click="switchShow" />
<div/>
<script>
var app = new Aue({
el: "#app",
data: {
isShow: true
},
methods: {
switchShow: function() {
aue.isShow = !aue.isShow;
}
}
});
</script>Dynamic class:
<style>
.red {
background-color: red;
width: 80px;
height: 80px;
margin: 0 auto;
}
.big {
width: 200px;
height: 200px;
}
</style>
<div id="app">
<div a-class="{ red: 'isActive', big: 'isBig'}"></div>
<input type="button" a-value="switch isActive" a-click="switchActive" />
<input type="button" a-value="switch isBig" a-click="switchBig" />
<div/>
<script>
var app = new Aue({
el: "#app",
data: {
isActive: true,
isBig: false
},
methods: {
switchActive: function() {
aue.isActive = !aue.isActive;
},
switchBig: function() {
aue.isBig = !aue.isBig;
}
}
});
</script>List rendering
<div id="app">
<ol>
<li a-for="item in list">{{ item }}</li>
</ol>
<div />
<script>
var app = new Aue({
el: "#app",
data: {
list: ['Red', 'Green', 'Blue', 'Pink', 'Yellow'],
}
});
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent