Directives, Mixins, Plugins === --- ### 1. Directives #### Vue Directives là một đoạn lệnh nhỏ mà có thể chèn chúng vào các phần tử DOM. Tên của các đoạn lệnh đó được bắt đầu bằng tiền tố v- --- - Directives mặc định: - v-bind - v-if - v-else - v-model - v-on - v-for --- ### Cách khai báo directives - Directive toàn cục ```javascript= Vue.directive('focus', { // Khi phần tử liên quan được thêm vào DOM... inserted: function (el) { // Ta gán focus vào phần tử đó el.focus() } }) ``` - Directive cục bộ ```javascript= directives: { focus: { // định nghĩa cho directive inserted: function (el) { el.focus() } } } ``` --- ### Các hàm hook - bind: được gọi khi directives được gắn vào element. - inserted: được gọi khi element đã được chèn (insert) vào phần tử cha nhưng chưa được đưa vào DOM. - updated: được gọi khi các thành phần của component/element có directives đã được cập nhật, nhưng nhiều khả năng là sẽ xảy ra trước khi các component/element con của chúng. --- - componentUpdated: được gọi khi các thành phần của component/element có directives và con của chúng đã được cập nhật. - unbind: được gọi khi directives bị huỷ bỏ. --- ### Tham số các hàm hook - el: Phần tử được directive bind vào. Tham số này có thể được dùng để thay đổi DOM một cách trực tiếp. - vnode: Vnode được trình biên dịch của Vue tạo ra. - oldvNode: chỉ tồn tại trong các hook update và componentUpdated --- - bindind: Object chứa các thuộc tính - name: tên của directive - value: giá trị của directive - expression: Biểu thức của binding dưới dạng chuỗi - arg: Tham số được truyền vào directive - modifiers: Một object chứa các modifier --- ```javascript= <div id="hook-arguments-example" v-demo:foo.a.b="message"></div> ``` ```javascript= Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#hook-arguments-example', data: { message: 'Cà rốt' } }) ``` --- ### 2. Mixins #### Khi dự án VueJS ngày càng lớn, thì việc lặp lại code ở data, methods, watchers, ... trong các components xảy ra rất thường xuyên #### => Mixins sinh ra để giải quyết vấn đề tái sử dụng --- ### Mixins là gì? #### Mixin là 1 Obj có thể chứa toàn bộ các options của 1 component (data,methods,hooks…) ```javascript= var myMixin = { data: function () { return { message: 'hello', foo: 'abc' } }, created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } ``` --- ### Cách khai báo - Global ```javascript= Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) ``` --- - Local ```javascript= var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin new Vue({ mixins: [myMixin] }) ``` --- ### Option merging  --- ### 3.Plugin #### Các Plugin được dùng để bổ sung tính năng cho Vue ở cấp toàn cục. --- ### Viết plugin #### Chúng ta có thể phân loại plugin như sau - Thêm một số phương thức hoặc thuộc tính toàn cục, ví dụ như vue-custom-element - Thêm một hoặc nhiều directive/filter/transition vân vân, ví dụ như vue-touch --- - Thêm tùy chọn cho component thông qua mixin cấp toàn cục, ví dụ như vue-router - Thêm một số phương thức đối tượng bằng cách đính kèm vào Vue.prototype. - Một thư viện cung cấp API riêng và cùng lúc đó thêm một hoặc vài tính năng được liệt kê trên đây, ví dụ vue-router --- ### Sử dụng plugin #### Sử dụng một plugin bằng cách gọi phương thức toàn cục Vue.use() ```javascript= Vue.use(MyPlugin) ``` ---