Skip to content

Commit bccc075

Browse files
Thebatman7Thebatman7
committed
Basics of Veu
1 parent 0575da5 commit bccc075

12 files changed

+242
-5
lines changed

‎Veu/attribute-and-class-binding-script.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
let app = new Vue({
2+
// bind it to the #root div in the DOM
3+
el: "#root",
4+
// provide data for bindings
5+
data: {
6+
title: 'Brought to you by JavaScript',
7+
className: 'red', //There needs to be a style called red in the css file for this to work
8+
isLoading: true
9+
},
10+
methods: {
11+
toggleLoading() {
12+
this.isLoading = !this.isLoading;
13+
}
14+
}
15+
});

‎Veu/attribute-and-class-binding-styles.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.red {
2+
color: #AA1E32;
3+
}
4+
.blue {
5+
color: #1AA3E9;
6+
}
7+

‎Veu/attribute-and-class-binding.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<!--https://brittanychiang.com/#about http://www.ericwadkins.com/ http://www.meganlandau.com/-->
3+
<html lang='en'>
4+
<head>
5+
<link rel='stylesheet' href='attribute-and-class-binding-styles.css' />
6+
</head>
7+
8+
<body>
9+
<!--To bind an attribute, use the v-bind directive
10+
This tells Vue that the title of the button (which is shown when you hover over it)
11+
should be bound to the title property.-->
12+
<div id="root">
13+
<!-- You can also bind a class of an HTML element to a Vue property.
14+
This will bind the property className to the class of the h1 element.
15+
Notice we use : istead of v-bind: -->
16+
<h1 :class="className">Hello World</h1>
17+
18+
<button v-bind:title="title">Hover over me</button>
19+
20+
21+
<!-- This tells Vue to bind the class of the button to the CSS .blue class, but only if the isLoading property is true. -->
22+
<button :class="{ 'blue': isLoading}">Click Me</button>
23+
24+
<!--Adding an event listener: We are telling the Vue that if the button is clicked it should call the
25+
toggleLoading emthod.-->
26+
<button :class="{ 'blue': isLoading}" @click="toggleLoading">Click Me</button>
27+
28+
29+
</div>
30+
31+
32+
<!--We load the Vue JavaScript library.-->
33+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
34+
<script src="attribute-and-class-binding-script.js"></script>
35+
</body>
36+
</html>

‎Veu/computed-properties-script.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
let app = new Vue({
2+
// bind it to the #root div in the DOM
3+
el: "#root",
4+
// provide data for bindings
5+
data: {
6+
message: 'I really like bread',
7+
tasks : [{
8+
description: "Create some loaves of bread",
9+
completed: true
10+
},
11+
{
12+
description: "Create some fish",
13+
completed: true
14+
},
15+
{
16+
description: "Create more loaves of bread",
17+
completed: false,
18+
},
19+
{
20+
description: "Create more fish",
21+
completed: false
22+
},
23+
{
24+
description: "Create more loaves of bread",
25+
completed: false
26+
},
27+
{
28+
description: "Tell Peter to clean up the mess",
29+
completed: false
30+
}
31+
]
32+
},
33+
/*
34+
A computed property is a function that returns a value to use for the property.
35+
Vue will automatically track dependencies. So in this case, every time message changes, Vue will recompute screaming.
36+
*/
37+
computed: {
38+
/*
39+
We could manually add a second property for screaming, but keeping it in sync with message would be a pain.
40+
We will add a computed property:
41+
*/
42+
screaming() {
43+
return this.message.toUpperCase();
44+
},
45+
incompleteTasks() {
46+
return this.tasks.filter(task => !task.completed);
47+
}
48+
}
49+
50+
51+
/*
52+
Computed properties automatically update when the data they depend on changes.
53+
Computed properties are cached if the data doesn't change. Vue only updates the portion of the DOM that changes.
54+
*/
55+
});

‎Veu/computed-properties.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<!--https://brittanychiang.com/#about http://www.ericwadkins.com/ http://www.meganlandau.com/-->
3+
<html lang='en'>
4+
<head>
5+
<link rel='stylesheet' href='attribute-and-class-binding-styles.css' />
6+
</head>
7+
8+
<body>
9+
10+
<div id="root">
11+
<h1>Tasks</h1>
12+
<ul>
13+
<li v-for="task in tasks" v-text="task.description"></li>
14+
</ul>
15+
16+
<p> {{ message }}</p>
17+
<p>I said, {{ screaming }}</p>
18+
</div>
19+
20+
21+
<!--We load the Vue JavaScript library.-->
22+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
23+
<script src="computed-properties-script.js"></script>
24+
</body>
25+
</html>

‎Veu/data-binding-index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<!--https://brittanychiang.com/#about http://www.ericwadkins.com/ http://www.meganlandau.com/-->
3+
<html lang='en'>
4+
<head>
5+
6+
</head>
7+
8+
<body>
9+
10+
11+
12+
<!--Your HTML needs a root element. Vue will control the DOM inside this element.-->
13+
<div id="root">
14+
<!--This creates two interactions with Vue. The first uses the v-model directive, to create a data binding,
15+
telling Vue that the message property is bound to the input element. The second uses mustache template syntax
16+
to print out the contents of the message property.-->
17+
<!-- data binding using the v-model directive -->
18+
<input type="text" v-model="message">
19+
<!-- template using mustache syntax -->
20+
<p>The value of the input is: {{ message }}.</p>
21+
</div>
22+
23+
24+
25+
<!--We load the Vue JavaScript library.-->
26+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
27+
<script src="data-binding-script.js"></script>
28+
</body>
29+
</html>

‎Veu/data-binding-script.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
//This tells Vue that it can change the DOM inside of the #root div. It also creates a data object that it can use in data bindings.
2+
let app = new Vue ({
3+
//bind it to the #root
4+
el: "#root",
5+
// provide data for bindings
6+
data: {
7+
message: "Hello there!",
8+
}
9+
10+
});

‎Veu/renderList-script.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
let app = new Vue({
2+
// bind it to the #root div in the DOM
3+
el: "#root",
4+
// provide data for bindings
5+
data: {
6+
names: ['Emma', 'Brandon', 'Lucy', 'Jorge'],
7+
newName: ''
8+
},
9+
// custom methods
10+
methods: {
11+
//addNames will add the value of the newValue property to the list of names
12+
addName() {
13+
if(this.newName === '') // This doesn't account for spaces and this doesn't work when enter is pressed
14+
return;
15+
this.names.push(this.newName);
16+
this.newNAme = "";
17+
}
18+
}
19+
20+
/*
21+
We add the newName property to the data object. We add the addName method in a methods object. It can use this.newName to reference the property for the new name and this.names to reference the property for the names.
22+
You should now be able to add names to the list.
23+
You can bind any JavaScript event this way.
24+
Notice:
25+
You can also use this syntax in index.html to bind the method: <button @click="addName">Add Name</button>
26+
Notice the use of @ instead of v-on.
27+
*/
28+
});

‎Veu/renderList.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<!--https://brittanychiang.com/#about http://www.ericwadkins.com/ http://www.meganlandau.com/-->
3+
<html lang='en'>
4+
<head>
5+
6+
</head>
7+
8+
<body>
9+
10+
11+
12+
<div id="root">
13+
<ul>
14+
<!-- Loop through each name in names and render it. This will create a set of li elements -->
15+
<li v-for="name in names">{{name}}</li>
16+
<!-- This is the same, but we are using the v-text directive instead of mustache syntax
17+
<li v-for="name in names" v-text="name"></li>-->
18+
</ul>
19+
<!--The v-model directive binds the input field to the newName property on the data object.
20+
The v-on directive tells Vue that it should call an event handler called addName when the button is clicked.-->
21+
<!--Let the user enter a new name and bind it to the newName property -->
22+
<input type="text" v-model="newName">
23+
<!-- Create an event handler for the click event -->
24+
<button v-on:click="addName">Add Name</button>
25+
</div>
26+
27+
28+
29+
<!--We load the Vue JavaScript library.-->
30+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
31+
<script src="renderList-script.js"></script>
32+
</body>
33+
</html>

‎web-design-principles/cp2-script.js

-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ document.getElementById('getButton').addEventListener('click', function(event) {
1313
.then(response => response.json())
1414
.then(json => {
1515
console.log('Success:', json);
16-
1716
if(arraysAreIdentical(previousMemes, json)) {
1817
let message = "<div class=\"item\"> <p>Sorry memes are precious we have recieved the same set of memes. Try again.</p> </div>";
1918
document.getElementById("memes").innerHTML= message;

‎web-design-principles/index3.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ <h2 class="project-h2">CS 260: Lab 3</h2>
148148
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
149149
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
150150

151-
<script text="type/javascript" src="/cp2-script.js">
151+
<script text="type/javascript" src="cp2-script.js">
152152
</script>
153153
</body>
154154
</html>

‎web-design-principles/pages/projects.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<meta charset='UTF-8'/>
1818
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
1919
<title>Rembrand Pardo</title>
20-
<link rel='stylesheet' href='/css/styles.css'/>
21-
<link rel='stylesheet' href='/css/projects-styles.css'/>
20+
<link rel='stylesheet' href='/web-design-principles/css/styles.css'/>
21+
<link rel='stylesheet' href='/web-design-principles/css/projects-styles.css'/>
2222
</head>
2323

2424
<body>
@@ -28,7 +28,7 @@
2828

2929
<header>
3030
<nav class="navbar navbar-expand-lg navbar-light bg-light">
31-
<a class="navbar-brand" href="../index.html"><img class='logo' src="/images/brand1.png"></a>
31+
<a class="navbar-brand" href="../index.html"><img class='logo' src="/web-design-principles/images/brand1.png"></a>
3232

3333
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
3434
<span class="navbar-toggler-icon"></span>

0 commit comments

Comments
 (0)