I. Component
1. Template:
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
//1. Get dữ liệu, có thể dùng funtion đơn giản {{demo_var}} {{demo_var == 1 ? currentScore : 0 }} //2. Set attribute v-bind:id v-bind:class :class="{class1: true, class2: false}" v-bind:style="{backgroundColor: color_red, width: '100px'}" v-bind:style="[customStyles, {width: '100px'}]" //3. Two way biding, v-model.lazy: đợi viết xong input mới đổ dữ liệu v-model = "demo_var" v-model.lazy = "demo_var" //4.1. Conditions v-if="true" v-else-if="demo_var=== 'B'" v-else //4.2. Detach với v-show -> có thay đổi atribute v-show="true" v-hide="true" //5. Render list <li v-for="n in 10">{{n}}</li> //hiện từ 1 đến 10 <li v-for="item in demo_array">{{item}}</li> <li v-for="(item, index) in demo_array" :key="item">{{index}} : {{item}}</li> <li v-for="(value, key) in demo_object">{{key}} : {{value}}</li> <li v-for="(value, key, index) in demo_object">{{index}} - {{key}} : {{value}}</li> //6.1. Set event: event có thể là 1 biến, 1 function hoặc 1 event @click = "demo_var= !demo_var" v-on:click = "demo_funtion" <input v-on:input="$emit('handleChangeFinalScore', $event)" type="text"> //6.2. Event modifiers: sử dụng đơn giản cho event.preventDefault(), event.stopPropagation() <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent="onSubmit"></form> //6.3. Key event modifiers: sử dụng keycode <input v-on:keyup.enter="submit"> <input v-on:keyup.13="submit"> <input v-on:keyup.alt.67="clear"> //Alt + C //6.4. Event native: với những element được append sau khi DOM khởi tạo, event thông thường sẽ không nhận được //Vì vậy, cần dùng "event.native" <item-component v-for="(item,index) in items" :key="index" @click.native="itemAction(index)"></item-component> //7. Ref -> Sử dụng bằng cách: this.$refs.demoRef --> đã query được element <div ref="demoRef"></div //8.1. Slot trong component, ví dụ component <appCard> <slot></slot> //slot mặc định -> các slot không có name được ném vào đây <slot name="demo">Demo Text</slot> //slot với giá trị có sẵn <slot v-for="n in 10" :name="'slot' + n"></slot> //slot có name //8.2. Slot ở parent <appCard> <p>Thẻ này không có name, được ném vào slot mặc định</p> <p name="demo">Thẻ này có name, được ném vào slot có name là 'demo'</p> <p v-for="n in 10" :slot="'slot'+n">Number: {{ n }}</p> </appCard> //9. <template> : dùng được v-if,v-for, nhưng không dùng được v-show (vì có tạo attribute style) <template v-if="true"> <p>Hello world</p> </template> //10.1. <component>: 2 cách viết giống nhau, do trình tự biên dịch của Vue đổi chữ viết hoa thành viết thường và thêm dấu gạch ngang <demoComponent></demoComponent> <demo-component></demo-component> //10.2. Kiểm tra component -> nếu var_name == "demoComponent" thì hiển thị Component có tên "demoComponent" //Tuy nhiên nếu khi thay đổi var_name == "demoComponent2" thì Component có tên "demoComponent" sẽ bị destroy <component :is="var_name"></component> //10.2. Để tránh tình trạng destroy thì thêm thẻ <keep-alive> <keep-alive> <component :is="var_name"></component> </keep-alive> |
****. Những lưu ý về v-model
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//1. v-model trong input ==> bản chất là sự kết hợp của ":value" và "@input" //2 câu lệnh ở dưới tương đương nhau <input type="text" v-model="demo_var" /> <input type="text" :value = "demo_var" @input = "demo_var = $event.target.value" /> //2. v-model có hàm get và set, có thể thay đổi hàm đó bằng computed //Lưu ý: Hàm set sẽ chạy trước hàm get <input type="text" v-model="computed_customValue" /> <script> computed: { computed_customValue: { set(value) { //Khi gõ: "a" thì giá trị "customValue" là "ax", mọi nơi {{customValue }} đều show ra "ax" this.customValue = value + "x"; } get() { //Khi gõ: "a" => sẽ hiển thị "axy", Lý do //Khi gõ: "a" => customValue = "ax" do được chạy "set()" ở hàm set phía trên //"ax"==> tiếp tục show ra "axy" do được chạy hàm "get()" return this.customValue+ "y"; }, } }, </script> |
2. Script
|
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 54 |
let component_object = { el: '#app', //lấy data từ component cha props: { child_receive: { type: String, required: false, default: "Nothing !!!" }, }, data: { arrDemo: ['Samsung', 'Oppo', 'Vsmart', 'Xiaomi'], objDemo: { title: 'Project VueJS Demo', address: 'New York', }, string_demo: "Hello world !!!", }, //Luôn run lại khi render lại teamplate methods: { say: function (text) { return 'Hello ' + text; }, senData: function () { this.$emit('handleNewGame', this.dataText); }, }, //Sử dụng như methods, nhưng chỉ các biến trong computed thay đổi thì computed mới chạy lại //Sử dụng như 1 property, không dùng () computed: { say_computed: function (text) { return 'Hello ' + text; }, }, //Theo dõi sự thay đổi của 1 biến watch: { arrDemo: function (value) { return 'Ahihi' + value; }, }, //Dùng khi muốn thay đổi hiển thị trước khi ra view, nhưng không làm thay đổi giá trị thực sự //Sử dụng đơn giản tại template như sau: {{ message | filters}} filters: { formatVND: function (numbers) { return numbers.toFixed(3).replace(/\d(?=(\d{3})+\.)/g, '$&,'); }, }, }; |
II. Webpack
-- Thay đổi đường dẫn gốc
|
1 2 3 |
import XYZ from '../../src/components/Couter.vue' //Thay bằng import XYZ from '@src/components/Couter.vue' |
-- Vào ./webpack.config.js
|
1 |
