Skip to content

Commit 61cccec

Browse files
mattmaribojocmattmaribojoc
committed
initial commit
1 parent 86e284c commit 61cccec

12 files changed

+3229
-0
lines changed

Diff for: ‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

Diff for: ‎package-lock.json

+2,737
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "hello-world",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build"
7+
},
8+
"dependencies": {
9+
"vue": "^3.0.4"
10+
},
11+
"devDependencies": {
12+
"@vue/compiler-sfc": "^3.0.4",
13+
"vite": "^1.0.0-rc.13"
14+
}
15+
}

Diff for: ‎public/favicon.ico

4.19 KB
Binary file not shown.

Diff for: ‎src/App.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<img alt="Vue logo" src="./assets/logo.png" />
3+
<HelloWorld msg="Hello Vue 3.0 + Vite" />
4+
</template>
5+
6+
<script>
7+
import HelloWorld from './components/HelloWorld.vue'
8+
9+
export default {
10+
name: 'App',
11+
components: {
12+
HelloWorld
13+
}
14+
}
15+
</script>

Diff for: ‎src/ViteTutorial.txt

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
CODE 1
2+
3+
npm init vite-app <project-name>
4+
cd <project-name>
5+
npm install
6+
npm run dev
7+
8+
CODE 2
9+
10+
<template>
11+
<h1>{{ msg }}</h1>
12+
<h2> ** EDITED CONTENT ** </h2>
13+
<button @click="count++">count is: {{ count }}</button>
14+
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
15+
</template>
16+
17+
18+
CODE 3
19+
20+
<template>
21+
<!-- INSERT TEMPLATE CODE -->
22+
</template>
23+
24+
<script lang="ts">
25+
/* You can now use Typescript! */
26+
</script>

Diff for: ‎src/Vue3LifecycleHooks.txt

+312
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
Code 1
2+
3+
<script>
4+
export default {
5+
mounted() {
6+
console.log('mounted!')
7+
},
8+
updated() {
9+
console.log('updated!')
10+
}
11+
}
12+
</script>
13+
14+
Code 2
15+
16+
import { onMounted } from 'vue'
17+
18+
Code 3
19+
20+
import { onMounted } from 'vue'
21+
22+
export default {
23+
setup () {
24+
onMounted(() => {
25+
console.log('mounted in the composition api!')
26+
})
27+
}
28+
}
29+
30+
Code 4
31+
32+
export default {
33+
data() {
34+
return {
35+
val: 'hello'
36+
}
37+
},
38+
beforeCreate() {
39+
console.log('Value of val is: ' + this.val)
40+
}
41+
}
42+
43+
Code 5
44+
45+
export default {
46+
data() {
47+
return {
48+
val: 'hello'
49+
}
50+
},
51+
created() {
52+
console.log('Value of val is: ' + this.val)
53+
}
54+
}
55+
56+
Code 6
57+
58+
import { ref } from 'vue'
59+
60+
export default {
61+
setup() {
62+
63+
const val = ref('hello')
64+
65+
console.log('Value of val is: ' + val.value)
66+
67+
return {
68+
val
69+
}
70+
}
71+
}
72+
73+
Code 7
74+
75+
export default {
76+
beforeMount() {
77+
console.log(this.$el)
78+
}
79+
}
80+
81+
Code 8
82+
83+
84+
<template>
85+
<div ref='root'>
86+
Hello World
87+
</div>
88+
</template>
89+
90+
Code 9
91+
92+
mport { ref, onBeforeMount } from 'vue'
93+
94+
export default {
95+
setup() {
96+
97+
const root = ref(null)
98+
99+
onBeforeMount(() => {
100+
console.log(root.value)
101+
})
102+
103+
return {
104+
root
105+
}
106+
},
107+
beforeMount() {
108+
console.log(this.$el)
109+
}
110+
}
111+
112+
Code 10
113+
114+
import { ref, onMounted } from 'vue'
115+
116+
export default {
117+
setup() { /* Composition API */
118+
119+
const root = ref(null)
120+
121+
onMounted(() => {
122+
console.log(root.value)
123+
})
124+
125+
return {
126+
root
127+
}
128+
},
129+
mounted() { /* Options API */
130+
console.log(this.$el)
131+
}
132+
}
133+
134+
Code 11
135+
136+
<template>
137+
<div>
138+
<p>{{val}} | edited {{ count }} times</p>
139+
<button @click='val = Math.random(0, 100)'>Click to Change</button>
140+
</div>
141+
</template>
142+
143+
Code 12
144+
145+
export default {
146+
data() {
147+
return {
148+
val: 0
149+
}
150+
},
151+
beforeUpdate() {
152+
console.log("beforeUpdate() val: " + this.val)
153+
},
154+
updated() {
155+
console.log("updated() val: " + this.val
156+
}
157+
}
158+
159+
Code 13
160+
161+
import { ref, onBeforeUpdate, onUpdated } from 'vue'
162+
163+
export default {
164+
setup () {
165+
const count = ref(0)
166+
const val = ref(0)
167+
168+
onBeforeUpdate(() => {
169+
count.value++;
170+
console.log("beforeUpdate");
171+
})
172+
173+
onUpdated(() => {
174+
console.log("updated() val: " + val.value)
175+
})
176+
177+
return {
178+
count, val
179+
}
180+
}
181+
}
182+
183+
Code 14
184+
185+
export default {
186+
mounted() {
187+
console.log('mount')
188+
window.addEventListener('resize', this.someMethod);
189+
},
190+
beforeUnmount() {
191+
console.log('unmount')
192+
window.removeEventListener('resize', this.someMethod);
193+
},
194+
methods: {
195+
someMethod() {
196+
// do smth
197+
}
198+
}
199+
}
200+
201+
Code 15
202+
203+
import { onMounted, onBeforeUnmount } from 'vue'
204+
205+
export default {
206+
setup () {
207+
208+
const someMethod = () => {
209+
// do smth
210+
}
211+
212+
onMounted(() => {
213+
console.log('mount')
214+
window.addEventListener('resize', someMethod);
215+
})
216+
217+
onBeforeUnmount(() => {
218+
console.log('unmount')
219+
window.removeEventListener('resize', someMethod);
220+
})
221+
222+
}
223+
}
224+
225+
Code 16
226+
227+
import { onUnmounted } from 'vue'
228+
229+
export default {
230+
setup () { /* Composition API */
231+
232+
onUnmounted(() => {
233+
console.log('unmounted')
234+
})
235+
236+
},
237+
unmounted() { /* Options API */
238+
console.log('unmounted')
239+
}
240+
}
241+
242+
Code 17
243+
244+
<template>
245+
<div>
246+
<span @click='tabName = "Tab1"'>Tab 1 </span>
247+
<span @click='tabName = "Tab2"'>Tab 2</span>
248+
<keep-alive>
249+
<component :is='tabName' class='tab-area'/>
250+
</keep-alive>
251+
</div>
252+
</template>
253+
<script>
254+
import Tab1 from './Tab1.vue'
255+
import Tab2 from './Tab2.vue'
256+
import { ref } from 'vue'
257+
258+
export default {
259+
components: {
260+
Tab1,
261+
Tab2
262+
},
263+
setup () { /* Composition API */
264+
265+
const tabName = ref('Tab1')
266+
267+
return {
268+
tabName
269+
}
270+
271+
}
272+
}
273+
</script>
274+
275+
Code 18
276+
277+
<template>
278+
<div>
279+
<h2>Tab 1</h2>
280+
<input type='text' placeholder='this content will persist!'/>
281+
</div>
282+
</template>
283+
284+
<script>
285+
import { onActivated } from 'vue'
286+
export default {
287+
setup() {
288+
onActivated(() => {
289+
console.log('Tab 1 Activated')
290+
})
291+
}
292+
}
293+
</script>
294+
295+
Code 19
296+
297+
<script>
298+
import { onActivated, onDeactivated } from 'vue'
299+
export default {
300+
setup() {
301+
onActivated(() => {
302+
console.log('Tab 1 Activated')
303+
})
304+
305+
onDeactivated(() => {
306+
console.log('Tab 1 Deactivated')
307+
})
308+
}
309+
}
310+
</script>
311+
312+
Code 20

Diff for: ‎src/assets/logo.png

6.69 KB
Loading

0 commit comments

Comments
 (0)