-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
191 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,94 +1,3 @@ | ||
<script setup lang="ts"> | ||
import {ref, computed} from 'vue'; | ||
import Header from '@/components/Header.vue'; | ||
const message = ref('Hello 6.1040 Fall 2023!'); | ||
const reversedMsg = computed(() => { | ||
return message.value.split('').reverse().join(''); | ||
}); | ||
const colors = ref([ | ||
{value: 0}, | ||
{value: 0}, | ||
{value: 0} | ||
]); | ||
const rgb = ref('rgb(0, 0, 0)'); | ||
function setColor() { | ||
const colorVal = colors.value.map(c => c.value); // [0, 0, 0] | ||
rgb.value = `rgb(${colorVal.join(', ')})`; | ||
} | ||
const cartoons = ref([ | ||
{ | ||
title: "ThunderCats", | ||
desc: "ThunderCats is an American media franchise, featuring a fictional group of cat-like humanoid aliens.", | ||
votes: {yay: 7, nay: 3} | ||
}, | ||
{ | ||
title: "Captain Planet", | ||
desc: "Our world is in peril. Gaia, the spirit of the Earth, can no longer stand the terrible destruction plaguing our planet. She sends five magic rings to five special young people.", | ||
votes: {yay: 8, nay: 2} | ||
}, | ||
{ | ||
title: "Top Cat", | ||
desc: "The title character is the leader of a gang of Manhattan alley cats who constantly hatch get-rich-quick schemes through scams, but most of them usually backfire.", | ||
votes: {yay: 1, nay: 9} | ||
}, | ||
{ | ||
title: "Dexter's Labratory", | ||
desc: "The series follows Dexter, an enthusiastic boy-genius with a hidden science laboratory in his room full of inventions, which he keeps secret from his clueless parents.", | ||
votes: {yay: 6, nay: 4} | ||
} | ||
]); | ||
</script> | ||
|
||
<template> | ||
<Header /> | ||
|
||
<h1> | ||
{{ message }} | ||
</h1> | ||
|
||
<p> | ||
{{ reversedMsg }} | ||
</p> | ||
|
||
<h2>Two-way Data Bind</h2> | ||
|
||
<ol> | ||
<li>Changing a reactive variable (e.g., in JavaScript/TypeScript) automatically re-render the DOM</li> | ||
<li>Manipulating a DOM element (e.g., a textbox/slider/etc.) automatically update a reactive variable</li> | ||
</ol> | ||
|
||
<p> | ||
1: <input type="text" | ||
v-bind:value="message" /> | ||
</p> | ||
|
||
<p> | ||
2: <input type="text" | ||
v-on:input="event => message = event.target.value" /> | ||
</p> | ||
|
||
<p> | ||
1 & 2: <input type="text" v-model="message" /> | ||
</p> | ||
|
||
<div v-bind:style="{background: rgb}"> | ||
<p v-for="c in colors"> | ||
<input type="range" min="0" max="255" step="1" | ||
v-model="c.value"> {{ c.value }} | ||
</p> | ||
|
||
<button v-on:click="setColor">Set Color</button> | ||
</div> | ||
|
||
<template> | ||
<router-view></router-view> | ||
</template> | ||
|
||
<style> | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
<script setup lang="ts"> | ||
import {ref, computed} from 'vue'; | ||
import Header from '@/components/Header.vue'; | ||
import Cartoon from '@/components/Cartoon.vue'; | ||
const message = ref('Hello 6.1040 Fall 2023!'); | ||
const reversedMsg = computed(() => { | ||
return message.value.split('').reverse().join(''); | ||
}); | ||
const colors = ref([ | ||
{value: 0}, | ||
{value: 0}, | ||
{value: 0} | ||
]); | ||
const rgb = ref('rgb(0, 0, 0)'); | ||
function setColor() { | ||
const colorVal = colors.value.map(c => c.value); // [0, 0, 0] | ||
rgb.value = `rgb(${colorVal.join(', ')})`; | ||
} | ||
const cartoons = ref([ | ||
{ | ||
title: "ThunderCats", | ||
desc: "ThunderCats is an American media franchise, featuring a fictional group of cat-like humanoid aliens.", | ||
votes: {yay: 7, nay: 3} | ||
}, | ||
{ | ||
title: "Captain Planet", | ||
desc: "Our world is in peril. Gaia, the spirit of the Earth, can no longer stand the terrible destruction plaguing our planet. She sends five magic rings to five special young people.", | ||
votes: {yay: 8, nay: 2} | ||
}, | ||
{ | ||
title: "Top Cat", | ||
desc: "The title character is the leader of a gang of Manhattan alley cats who constantly hatch get-rich-quick schemes through scams, but most of them usually backfire.", | ||
votes: {yay: 1, nay: 9} | ||
}, | ||
{ | ||
title: "Dexter's Labratory", | ||
desc: "The series follows Dexter, an enthusiastic boy-genius with a hidden science laboratory in his room full of inventions, which he keeps secret from his clueless parents.", | ||
votes: {yay: 6, nay: 4} | ||
} | ||
]); | ||
</script> | ||
|
||
<template> | ||
<Header> | ||
<template v-slot:subtitle> | ||
{{message}} | ||
</template> | ||
|
||
<template v-slot:slogan> | ||
{{reversedMsg}} | ||
</template> | ||
</Header> | ||
|
||
<Cartoon v-for="toon in cartoons" | ||
v-bind="toon" /> | ||
|
||
<h1> | ||
{{ message }} | ||
</h1> | ||
|
||
<p> | ||
{{ reversedMsg }} | ||
</p> | ||
|
||
<h2>Two-way Data Bind</h2> | ||
|
||
<ol> | ||
<li>Changing a reactive variable (e.g., in JavaScript/TypeScript) automatically re-render the DOM</li> | ||
<li>Manipulating a DOM element (e.g., a textbox/slider/etc.) automatically update a reactive variable</li> | ||
</ol> | ||
|
||
<p> | ||
1: <input type="text" | ||
v-bind:value="message" /> | ||
</p> | ||
|
||
<p> | ||
2: <input type="text" | ||
v-on:input="event => message = event.target.value" /> | ||
</p> | ||
|
||
<p> | ||
1 & 2: <input type="text" v-model="message" /> | ||
</p> | ||
|
||
<div v-bind:style="{background: rgb}"> | ||
<p v-for="c in colors"> | ||
<input type="range" min="0" max="255" step="1" | ||
v-model="c.value"> {{ c.value }} | ||
</p> | ||
|
||
<button v-on:click="setColor">Set Color</button> | ||
</div> | ||
|
||
</template> | ||
|
||
<style> | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import {ref, computed} from 'vue'; | ||
import { defineStore } from 'pinia'; | ||
|
||
export const useAuthStore = defineStore('auth', () => { | ||
const email = ref(''); | ||
|
||
const authenticated = ref(false); | ||
|
||
function toggleAuth() { | ||
authenticated.value = email.value !== '' && !authenticated.value; | ||
} | ||
|
||
return {email, authenticated, toggleAuth} | ||
}); |