Angular thì viết thế này còn vue thì viết sao?

Bạn tìm từ khóa single view component vue là ra, các kiến thức liên quan gồm có vue component, vue data binding, vue event handler. Bạn cứ vào trang chủ của vue là ra, vì code cụ thể cho bạn thì dài lắm

Mình cũng tham khảo rồi : Cực kỳ dài dòng!!!
Vậy là xem như : tiết mục validation : angular : vue = 1 : 0 rùi ; e rằng đến 2 : 0 luôn

http://vee-validate.logaretm.com/examples.html
React, Vue , Angular thì mọi thứ thằng nào làm đc là thằng kia làm đc thôi, toàn từ js mà ra cả, nên ko phải so sánh làm gì.

À thì ra bạn muốn so sánh hả, không rõ bạn tìm hiểu cả 2 được lâu chưa nhưng kiểu cưỡi ngựa xem hoa của bạn thì nên tránh vì không đi đến đâu cả, lí do thì @Dao_An đã đưa ra ở trên rồi

Vấn đề không phải làm được hay ko làm được mà là sự tiện dụng cho chúng ta, xem như phần này nó phải add thêm một module nữa rồi. So sánh cũng là một cách học lib đấy bạn à ? Theo bạn thì tỉ số nó là bao nhiêu? Bạn viết thử cho mình đoạn code để mình so sánh với!!! Phải đo lường lượng code và độ phức tạp.

Nếu thiếu gì thì tự viết thêm phần đó.
Còn biết framework thiếu hay không chỉ có đọc hết docs

angular date thế này

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',['$scope','$http', function($scope,$http) {
        $scope.msg = "hello world";
        $scope.hs = {
            ten: "thuc 101",
            ngay_sinh: new Date()
        }
    }]);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            $scope.msg :{{msg}}<br>
            ngay_sinh : {{hs.ngay_sinh | date : "dd/MM/yyyy" }}
        </div>
        <div class="col-lg-4">
            midle
        </div>
        <div class="col-lg-4">
            Right
        </div>
    </div>
</div>

Tôi sẽ không viết code ở đây vì nếu bạn học cả 2 framework thì có thể tự đọc đc code example trên kia và tự viết. Còn nếu mới học lươt qua thì chắc tôi viết bạn cũng sẽ chẳng hiểu gì.
Angular tích hợp nhiều thứ vào 1, thì trang web đơn giản cũng phải load luôn module validate thì sẽ nặng hơn mà ko đc gì. Do vậy kết hợp module theo kiểu React, Vue được ưa chuộng hơn nhiều, bằng chứng là số * trên github @@

Còn vue js thì date thế này

<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4">
                {{ngay | thdate}}
            </div>
            <div class="col-lg-4">
                midle
            </div>
            <div class="col-lg-4">
                Right
            </div>
        </div>
    </div>

</div>
<script>

    Vue.filter('thdate', function (value) {//code tui viết cùi bắp
        if (!value) return '';
        var ngay_ = value.getDate();
        var ngay = (ngay_ < 10) ? '0' + ngay_ : ngay_;
        var thang_ = value.getMonth() + 1;
        var thang = (thang_ < 10) ? '0' + thang_ : thang_;
        var nam = value.getFullYear();
        var kq = ngay + '/' + thang +"/"+ nam;
        return kq;
    })
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                msg: 'hello world',
                ngay:new Date()
            }
        }
    })

</script>

Mình đứng trên quan điểm là chọn món võ khí nào?

Bạn học cái gì thì học thôi ko ai cản, viết vue như kia là mình biết bạn học chưa có tới rồi , 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

Viết thử đi bạn ! Chúng ta thử so sánh xem, dĩ nhiên phần filter date thì có một cách nữa là add thằng moment js vào. Hix có sự hiện diện của đệ tam nhân

Nó như sau

<script src="https://daynhauhoc.com/js/moment.min.js"></script>
<div id="app">
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            <a href="https://momentjs.com/" target="_blank">moment doc</a>
            <br />
            {{msg}}
            <br />
            {{ngay | formatDate}}

        </div>
        <div class="col-lg-4">
            midle
        </div>
        <div class="col-lg-4">
            Right
        </div>
    </div>
</div>

</div>
<script>

Vue.filter('formatDate', function (value) {
    if (value) {
        return moment(String(value)).format('DD/MM/YYYY hh:mm')
    }
})
var app = new Vue({
    el: '#app',
    data: function () {
        return {
            msg: 'hello world',
            ngay: new Date(),
        }
    }
})

</script>

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">&times;</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>

Úi giời so làm gì, thích thằng nào xài thằng đó. Không phải ngẫu nhiên Vue nó có chỗ đứng trong thị trường JS Framework vừa đông vừa nguy hiểm như bây giờ đâu

Lục lại bài hot năm xưa, cũng đi so sánh các kiểu rồi để làm gì?

https://daynhauhoc.com/t/java-dai-le-the/53539

[spoiler]Làm công cho người ta mà bảo đừng làm thằng V, A ngon hơn coi chừng ăn chửi sml [/spoiler]

Còn viết theo lối “lẩu thập cẩm” thì có nên không các bạn? Mình thì học JavaScript rất ABC nên có một bữa vọc Meteor và không biết rằng nó hỗ trợ nhiều trường phái, mà mình lại không bookmark lại bài đã học nên hôm sau vào đọc bài trường phái khác, và kết quả là một thứ lẩu thập cẩm giữa Blaze, React, Angular,… gì đó chẳng hiểu luôn.

Sau rốt, thấy mệt quá, giờ quan điểm của mình học lập trình là học ngôn ngữ gốc (cũng có thể phái sinh nhưng giờ đã trở thành gốc theo kiểu PHP so với C/C++), chẳng dại vọc vào mấy cái phái sinh tùm lum tá lả bắt nguồn từ JavaScript như hiện nay dẫn đến… bại não.

Giờ cứ mỗi ngày đọc một đoạn trong cẩm nang ECMAScript 2015 cho yên tâm, dù bên ngoài có bão to cấp 12.

javascript lúc xưa thì đúng vậy, bạn gọi là lẩu thập cẩm thì mình gọi là lối viết giang hồ bởi vì đọc code họ mà mình chả hiểu được gì, nhưng bi gì thì khác rồi mấy cái angular, vue nè có lớp có lang cả, quan trọng là phải chấp nhận một số luật chơi. đối với mình cũng thích code ngắn mà phải dễ hiểu, có dài tí không sao

Bạn viết style riêng thì chỉ có mình bạn hiểu, hay gọi là bóp cổ đồng đội. JavaScript cũng có chuẩn coding style riêng.
Nếu thích viết theo chuẩn thì cài ESLint cho nó nhắc lệnh.

Có cái vụ này à, mình chưa biết đấy, cám ơn ESLint, để tìm hiểu thử:grinning:

sao bạn thích hơn thua tỉ số thế nhỉ, việc tích hợp kiểu module như Vue và React cá nhân mình lại rất thích, vì mình có thể tự do tích hợp thứ mà mình cần, thoải mái thử nghiệm các module khác nhau thay vì bó chặt vào 1 thứ. Việc tích hợp theo module cũng tránh được tình trạng “dùng dao mổ trâu đi đi giết gà”