1. Directives
-- Directives tạo ra các options của template dạng: "v-custom", mục đích để custom style element theo ý mình
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en"> <body> <div id="app"> <component-a></component-a> </div> <script> let componentA_object = { //Directives khai báo dạng local directives: { local_custom: { bind(el, binding, vnode) { if (binding.arg == "square") { el.style.width = binding.value, el.style.height = binding.value, el.style.backgroundColor = 'violet' } } } }, template: `<div> <div v-local_custom:square="'100px'">This is use directive</div> <div v-global_custom:background.color.size="{bgColor: 'green', color: '#fff', size: '25px'}"> This is use directive </div> </div>` }; //Directives khai báo dạng Global Vue.directive("global_custom", { bind(el, binding, vnode) { if (binding.arg == "background") { el.style.backgroundColor = binding.value.bgColor; } if (binding.modifiers["color"]) { el.style.color = binding.value.color; } if (binding.modifiers["size"]) { el.style.fontSize = binding.value.size; } } }); let app = new Vue({ el: "#app", components: { componentA: componentA_object } }); </script> </body> </html> |
2. Filters
-- Filters sử dụng để thay đổi cách hiển thị của dữ liệu (mà không thay đổi giá trị dữ liệu)
-- Khi khai báo nhiều filter, filter khai báo trước sẽ được sử dụng trước
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <body> <div id="app"> <component-a></component-a> </div> <script> let componentA_object = { data: function(){ return { text: 'Hello everyone, VueJS !' } }, //Filter khai báo dạng local filters: { local_lowerCase: function(str){ return str.toLowerCase(); } }, //filter nào khai báo trước sẽ được hoạt động trước template: `<div> <p>{{text | global_upperCase }}</p> <p>{{text | global_upperCase | local_lowerCase }}</p> </div>` }; //Filter khai báo dạng Global Vue.filter('global_upperCase', function(str){ return str.toUpperCase(); }) let app = new Vue({ el: "#app", components: { componentA: componentA_object } }); </script> </body> </html> |
3. Mixins
--- Mixin có thể chứa toàn bộ các options của 1 component
--- Khi component inject các Mixin vào --> nó sẽ tự động merge các options vào component đó.
--- Trường hợp trùng key thì component giành chiến thắng tức nó sẽ ghi đè lại giá trị ở Mixin.
--- Đặc biệt vs hook functions thì thứ tự run sẽ là Mixin-> Component.
--- Mọi component dùng chung mixins cũng ko liên quan gì đến nhau, ghi gọi thuộc tính đó về thì mỗi thuộc tính đó chỉ thuộc component đó
* Trường hợp dùng Mixins dùng local:
--- Xem ví dụ ở Lifecycle
* Trường hợp dùng Mixins dùng global:
-- Mọi component và "cả Vue nữa" cũng đều sử dụng Mixin
|
1 2 3 4 5 6 7 8 9 10 |
// inject a handler for `myOption` custom option Vue.mixin({ created: function(){ console.log("Global mixins"); } }) new Vue({ }); // => "Global mixins" |
