From f45aeb3be9b7f03ab66997bee23b8fc54877a215 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sun, 12 Dec 2021 18:13:43 +0100 Subject: [PATCH 1/9] feat: added lesson 1 description --- src/tutorial/src/step-1/description.md | 33 ++++++++++++++++---------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/tutorial/src/step-1/description.md b/src/tutorial/src/step-1/description.md index d2ed2c9a59..2fe4e85a5b 100644 --- a/src/tutorial/src/step-1/description.md +++ b/src/tutorial/src/step-1/description.md @@ -2,24 +2,33 @@ For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes. -Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`. +How to make it dynamic? We need to create our first _reactive_ property `colorsNumber` -For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes. - -Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`. +
-For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes. +```js +data() { + return { + colorsNumber: 3 + } +} +``` -Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`. +
-For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes. +
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`. +```js +import { ref } from 'vue' +const colorsNumber = ref(3) +``` -For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes. +
-Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`. +Now, we can use it in our template instead of a static number: -For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes. +```html +

Number of colors: {{ colorsNumber }}

+``` -Let's add some dynamic data. Within component `data` return statement, add a property `colorsNumber`. +Try to change the `colorsNumber` and check how it immediately updates the rendered HTML. From dd7a82580e6d1d6073df2cfc25323822f2a12ba9 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sun, 12 Dec 2021 18:43:53 +0100 Subject: [PATCH 2/9] feat: added lesson 2 description --- src/tutorial/src/step-1/description.md | 6 ++- src/tutorial/src/step-2/App/composition.js | 6 ++- src/tutorial/src/step-2/App/options.js | 4 +- src/tutorial/src/step-2/App/style.css | 28 ++++++++++++++ src/tutorial/src/step-2/App/template.html | 7 +++- src/tutorial/src/step-2/description.md | 43 +++++++++++++++++++++- 6 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 src/tutorial/src/step-2/App/style.css diff --git a/src/tutorial/src/step-1/description.md b/src/tutorial/src/step-1/description.md index 2fe4e85a5b..c753f979f6 100644 --- a/src/tutorial/src/step-1/description.md +++ b/src/tutorial/src/step-1/description.md @@ -1,4 +1,8 @@ -# Adding Data +# Adding Reactive Properties + +:::tip WIP +The tutorial is currently work in progress. Check back later! +::: For now, our component renders some static data. Try to change a number 3 in the code to something different to see how the rendered result changes. diff --git a/src/tutorial/src/step-2/App/composition.js b/src/tutorial/src/step-2/App/composition.js index 2b5a52c75e..fa61e67fc2 100644 --- a/src/tutorial/src/step-2/App/composition.js +++ b/src/tutorial/src/step-2/App/composition.js @@ -2,5 +2,9 @@ import { ref } from 'vue' export default { name: 'App', - setup() {} + setup() { + const colorsNumber = ref(3) + + return { colorsNumber } + } } diff --git a/src/tutorial/src/step-2/App/options.js b/src/tutorial/src/step-2/App/options.js index aa6e952b89..d9b4727a56 100644 --- a/src/tutorial/src/step-2/App/options.js +++ b/src/tutorial/src/step-2/App/options.js @@ -1,6 +1,8 @@ export default { name: 'App', data() { - return {} + return { + colorsNumber: 3 + } } } diff --git a/src/tutorial/src/step-2/App/style.css b/src/tutorial/src/step-2/App/style.css new file mode 100644 index 0000000000..1098ac353b --- /dev/null +++ b/src/tutorial/src/step-2/App/style.css @@ -0,0 +1,28 @@ +* { + margin: 0; + padding: 0; +} + +#app { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; +} + +label { + font-size: 18px; +} + +input { + font-size: 18px; + padding-left: 5px; + width: 35px; +} + +.panel { + color: white; + background-color: teal; + transition: background 0.5s; +} diff --git a/src/tutorial/src/step-2/App/template.html b/src/tutorial/src/step-2/App/template.html index 8fa2da1d10..0ed513091c 100644 --- a/src/tutorial/src/step-2/App/template.html +++ b/src/tutorial/src/step-2/App/template.html @@ -1 +1,6 @@ -

Step 2!

+
+
+

Guess the Color

+

Number of colors: {{ colorsNumber }}

+
+
diff --git a/src/tutorial/src/step-2/description.md b/src/tutorial/src/step-2/description.md index 06d6fa89dd..6a902f6bde 100644 --- a/src/tutorial/src/step-2/description.md +++ b/src/tutorial/src/step-2/description.md @@ -1 +1,42 @@ -# Two-way Binding +# Handling User Input + +Let's make our example more interactive! What if we could allow user to change `colorsNumber` from the UI? To implement this, we need to start with adding an `` field to our component template + +```html{4} +
+

Guess the Color

+

Number of colors: 3

+ +
+``` + +Now, we have to provide some initial value to our input, and we want to display `colorsNumber` there. Let's use a dynamic binding to provide a value: + +```html + +``` + +However, when we change the number in the input field, we don't see any changes on `Number of colors` in the template 🤔. It happens because we only have _one-way binding_ now, displaying reactive property in the input field but not _changing_ it on user input. Let's listen to the `input` DOM event on the `` field and update `colorsNumber` on it: + +```html + +``` + +Now we created a _two-way binding_: we update `input` field on reactive property change and vice versa. Vue.js has a `v-model` directive to make two-way binding less verbose. Let's replace out `:value` and `@input` with it: + +```html + +``` + +Now, we can choose how many colors we'll have in our guessing game! As a last touch, let's add a label to our input field and set up minimum and maximum for it: + +```html + +``` From fd3778529000b0a22464387860d916ad0b7955d1 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Mon, 13 Dec 2021 20:11:33 +0100 Subject: [PATCH 3/9] feat: started lesson 3 --- src/tutorial/src/step-2/description.md | 4 +- src/tutorial/src/step-3/App/composition.js | 10 +++ src/tutorial/src/step-3/App/options.js | 8 +++ src/tutorial/src/step-3/App/style.css | 28 ++++++++ src/tutorial/src/step-3/App/template.html | 10 +++ src/tutorial/src/step-3/description.md | 74 ++++++++++++++++++++++ 6 files changed, 132 insertions(+), 2 deletions(-) create mode 100644 src/tutorial/src/step-3/App/composition.js create mode 100644 src/tutorial/src/step-3/App/options.js create mode 100644 src/tutorial/src/step-3/App/style.css create mode 100644 src/tutorial/src/step-3/App/template.html create mode 100644 src/tutorial/src/step-3/description.md diff --git a/src/tutorial/src/step-2/description.md b/src/tutorial/src/step-2/description.md index 6a902f6bde..d54154c228 100644 --- a/src/tutorial/src/step-2/description.md +++ b/src/tutorial/src/step-2/description.md @@ -35,8 +35,8 @@ Now we created a _two-way binding_: we update `input` field on reactive property Now, we can choose how many colors we'll have in our guessing game! As a last touch, let's add a label to our input field and set up minimum and maximum for it: ```html - ``` + +Now, whenever user enter a number in the input field and presses Enter, we can see that game is started. + +The last thing we want to implement in this lesson is hiding the input field when the game is already started and showing a button `Change colors number`. Clicking on the button will set the game to "not-started" and show the input again. First, let's add the button to our template: + +```html{1-3} + +
+ +
+``` + +Now, let's display the `