| commit | author | age | ||
| 5978c3 | 1 | const app = Vue.createApp({ |
| CM | 2 | data() { |
| 3 | return { | |
| 4 | currentUserInput: '', | |
| 5 | message: 'Vue is great!', | |
| 6 | }; | |
| 7 | }, | |
| 8 | methods: { | |
| 9 | saveInput(event) { | |
| 10 | this.currentUserInput = event.target.value; | |
| 11 | }, | |
| 12 | setText() { | |
| 13 | // this.message = this.currentUserInput; | |
| 14 | this.message = this.$refs.userText.value; | |
| 15 | // console.dir(this.$refs.userText); | |
| 16 | }, | |
| 17 | }, | |
| 18 | beforeCreate() { | |
| 19 | console.log('beforeCreate()'); | |
| 20 | }, | |
| 21 | created() { | |
| 22 | console.log('created()'); | |
| 23 | }, | |
| 24 | beforeMount() { | |
| 25 | console.log('beforeMount()'); | |
| 26 | }, | |
| 27 | mounted() { | |
| 28 | console.log('mounted()'); | |
| 29 | }, | |
| 30 | beforeUpdate() { | |
| 31 | console.log('beforeUpdate()'); | |
| 32 | }, | |
| 33 | updated() { | |
| 34 | console.log('updated()'); | |
| 35 | }, | |
| 36 | beforeUnmount() { | |
| 37 | console.log('beforeUnmount()'); | |
| 38 | }, | |
| 39 | unmounted() { | |
| 40 | console.log('unmounted()'); | |
| 41 | }, | |
| 42 | }); | |
| 43 | ||
| 44 | app.mount('#app'); | |
| 45 | ||
| 46 | setTimeout(function () { | |
| 47 | app.unmount(); | |
| 48 | }, 3000); | |
| 49 | ||
| 50 | const app2 = Vue.createApp({ | |
| 51 | template: ` | |
| 52 | <p>{{ favoriteMeal }}</p> | |
| 53 | `, | |
| 54 | data() { | |
| 55 | return { | |
| 56 | favoriteMeal: 'Pizza', | |
| 57 | }; | |
| 58 | }, | |
| 59 | }); | |
| 60 | ||
| 61 | app2.mount('#app2'); | |
| 62 | ||
| 63 | // .... | |
| 64 | ||
| 65 | const data = { | |
| 66 | message: 'Hello!', | |
| 67 | longMessage: 'Hello! World!', | |
| 68 | }; | |
| 69 | ||
| 70 | const handler = { | |
| 71 | set(target, key, value) { | |
| 72 | if (key === 'message') { | |
| 73 | target.longMessage = value + ' World!'; | |
| 74 | } | |
| 75 | target.message = value; | |
| 76 | }, | |
| 77 | }; | |
| 78 | ||
| 79 | const proxy = new Proxy(data, handler); | |
| 80 | ||
| 81 | proxy.message = 'Hello!!!!'; | |
| 82 | ||
| 83 | // console.log(proxy.longMessage); | |
