Chắc phải giắc 2 cây súng, bên tả vue js bên hữu angular js, tùy tình huống mà rút ra xử.
Vue js được cái là nó xử cái dụ modal hơi bị lẹ hơn.
Nó thế này 
Trẻ trâu thường hơi nghịch ngợm, xin miễn cười!!!
hơi bị ẹc tí là có cái style bên trên !!!
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
</style>
<script type="x/template" id="modal-template">
<div v-if="show">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<!--<div class="modal-dialog modal-lg">-->
<!--<div class="modal-dialog modal-md">-->
<!--<div class="modal-dialog modal-sm">-->
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" @click="close()">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title">Nhap hoc sinh</h3>
</div>
<div class="modal-body">
Ten : <input v-model="ten" /><br />
Dia chi : <input v-model="diachi" /><br />
</div>
<div class="modal-footer">
<button v-on:click="on_add()" type="button" class="btn btn-primary">
Add
</button>
<button v-on:click="on_cancel()" type="button" class="btn btn-primary">
Cancel
</button>
<!--
<button v-on:click="on_yes()" type="button" class="btn btn-primary">
Yes
</button>
<button v-on:click="on_no()" type="button" class="btn btn-primary">
No
</button>
<button type="button" class="btn btn-default" @click="close()">
Close
</button>
-->
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</script>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div>{{ message }}</div>
<hr />
<button v-on:click=" showModal = true " >Add</button>
<ol>
<li v-for="x in hss">{{x}}</li>
</ol>
<!--<modal :show="showModal" @close="showModal = false" v-on:them_vao="them_vao" ></modal>-->
<modal :show="showModal" @close="showModal = false" v-on:add_emit="add"></modal>
</div>
<div class="col-lg-2">
midle
</div>
<div class="col-lg-4">
Right
</div>
</div>
</div>
</div>
<script>
Vue.component('modal', {
template: '#modal-template',
props: ['show'],
data: function () {
return {
msg: 'hello world',
ten: '',
diachi:'',
};
},
methods: {
on_yes: function () { alert('you want to send : ' + this.msg); this.close(); },
on_no: function () { alert('You save no'); this.close(); },
close: function () {
this.$emit('close');
this.ten = 'thuc 101';//this clear on open
this.diachi = 'htp';//this clear on open
},
on_add: function () {
var hs = {
ten: this.ten,
diachi: this.diachi
}
this.$emit('add_emit',hs);
this.close();
},
on_cancel: function () {
this.close();//alert('cancel');
},
},
mounted: function () {
this.ten = 'thuc 101';//this clear on open
this.diachi = 'htp';//this clear on open
}
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
hss: [
{ten:'thuc 101',diachi:'htp'},
{ ten: 'thuc 102', diachi: 'htp2' },
{ ten: 'thuc 103', diachi: 'htp3' },
],
showModal: false
},
methods: {
add: function (hs) {
//alert(JSON.stringify(hs))
//"ten":"thuc 101", "diachi":"htp"
this.hss.push(hs);
}
}
})
</script>
, bạn cứ đào sâu cả 2 cái thì sẽ biết lý do vì sao Vue lại được yêu thích thôi
[/spoiler]
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?