From 418a045d8270d35c16a28bf7c46440a7463976b8 Mon Sep 17 00:00:00 2001 From: ntepluhina Date: Sun, 15 Mar 2020 16:24:17 +0200 Subject: [PATCH 1/8] Added first three codepens --- src/guide/introduction.md | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index eb55c3cf67..24e85cd787 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -44,9 +44,14 @@ const App = { Vue.createApp(App).mount('#app') ``` - +We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Change the `message` property in the code snippet below to a different value and the rendered example will update accordingly: -We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Change the `message` property in the code snippet below to a different value and the rendered example will update accordingly: ![TODO:placeholder sandbox link](https://codesandbox.io/s/xenodochial-meninsky-rxlt4) +

+ See the Pen + Intro-1 by Vue (@Vue) + on CodePen. +

+ In addition to text interpolation, we can also bind element attributes like this: @@ -71,7 +76,13 @@ const App2 = { Vue.createApp(App2).mount('#app-2') ``` - +

+ See the Pen + Intro-2 by Vue (@Vue) + on CodePen. +

+ + Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." ## Conditionals and Loops @@ -96,11 +107,16 @@ const App3 = { Vue.createApp(App3).mount('#app-3') ``` - - This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](TODO) when elements are inserted/updated/removed by Vue. -You can change `seen` from `true` to `false` in the sandbox below to check the effect: TODO:https://codesandbox.io/s/basic-conditional-rendering-eptpp +You can change `seen` from `true` to `false` in the sandbox below to check the effect + +

+ See the Pen + Intro-3 by Vue (@Vue) + on CodePen. +

+ There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array: From 4e76b25ff37566ce31cbc90bdaa97ee9d1c9f93e Mon Sep 17 00:00:00 2001 From: ntepluhina Date: Sun, 15 Mar 2020 16:47:51 +0200 Subject: [PATCH 2/8] feat: replaced custom components with codepens --- src/guide/introduction.md | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 24e85cd787..bfe91c5ca3 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -76,7 +76,7 @@ const App2 = { Vue.createApp(App2).mount('#app-2') ``` -

+

See the Pen Intro-2 by Vue (@Vue) on CodePen. @@ -146,7 +146,12 @@ const App4 = { Vue.createApp(App4).mount('#app-4') ``` - +

+ See the Pen + Intro-4 by Vue (@Vue) + on CodePen. +

+ ## Handling User Input @@ -179,7 +184,12 @@ const App5 = { Vue.createApp(App5).mount('#app-5') ``` - +

+ See the Pen + Intro-5 by Vue (@Vue) + on CodePen. +

+ Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic. @@ -204,7 +214,12 @@ const App6 = { Vue.createApp(App6).mount('#app-6') ``` - +

+ See the Pen + Intro-6 by Vue (@Vue) + on CodePen. +

+ ## Composing with Components @@ -288,11 +303,16 @@ app.component('todo-item', { app.mount('#app-7') ``` - +

+ See the Pen + Intro-Components-1 by Vue (@Vue) + on CodePen. +

+ This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app. -In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](TODO:components.md), but here's an (imaginary) example of what an app's template might look like with components: +In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](component-basics.md), but here's an (imaginary) example of what an app's template might look like with components: ```html
From 1e4104fdf0329c100c895a8f15e9d7232ba760c8 Mon Sep 17 00:00:00 2001 From: ntepluhina Date: Tue, 17 Mar 2020 20:41:12 +0200 Subject: [PATCH 3/8] fix: updated codepens with descriptive names --- src/guide/introduction.md | 72 +++++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index bfe91c5ca3..c0f1bb9743 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -12,13 +12,13 @@ If you are an experienced frontend developer and want to know how Vue compares t ## Getting Started -Installation +[Installation](installation.md) ::: tip The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required. ::: -The easiest way to try out Vue.js is using the [Hello World example](TODO). Feel free to open it in another tab and follow along as we go through some basic examples. +The easiest way to try out Vue.js is using the [Hello World example](https://codepen.io/team/Vue/pen/KKpRVpx). Feel free to open it in another tab and follow along as we go through some basic examples. The [Installation](installation.md) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools. @@ -27,13 +27,13 @@ The [Installation](installation.md) page provides more options of installing Vue At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax: ```html -
+
{{ message }}
``` ```js -const App = { +const HelloVueApp = { data() { return { message: 'Hello Vue!' @@ -41,7 +41,7 @@ const App = { } } -Vue.createApp(App).mount('#app') +Vue.createApp(HelloVueApp).mount('#hello-vue') ``` We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Change the `message` property in the code snippet below to a different value and the rendered example will update accordingly: @@ -56,7 +56,7 @@ We have already created our very first Vue app! This looks pretty similar to ren In addition to text interpolation, we can also bind element attributes like this: ```html -
+
Hover your mouse over me for a few seconds to see my dynamically bound title! @@ -65,7 +65,7 @@ In addition to text interpolation, we can also bind element attributes like this ``` ```js -const App2 = { +const AttributeBindingApp = { data() { return { message: 'You loaded this page on ' + new Date().toLocaleString() @@ -73,12 +73,12 @@ const App2 = { } } -Vue.createApp(App2).mount('#app-2') +Vue.createApp(AttributeBindingApp).mount('#bind-attribute') ``` -

+

See the Pen - Intro-2 by Vue (@Vue) + Attribute dynamic binding by Vue (@Vue) on CodePen.

@@ -90,13 +90,13 @@ Here we are encountering something new. The `v-bind` attribute you are seeing is It's easy to toggle the presence of an element, too: ```html -
+
Now you see me
``` ```js -const App3 = { +const ConditionalRenderingApp = { data() { return { seen: true @@ -104,16 +104,16 @@ const App3 = { } } -Vue.createApp(App3).mount('#app-3') +Vue.createApp(ConditionalRenderingApp).mount('#conditional-rendering') ``` This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](TODO) when elements are inserted/updated/removed by Vue. You can change `seen` from `true` to `false` in the sandbox below to check the effect -

+

See the Pen - Intro-3 by Vue (@Vue) + Conditional rendering by Vue (@Vue) on CodePen.

@@ -121,7 +121,7 @@ You can change `seen` from `true` to `false` in the sandbox below to check the e There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array: ```html -
+
  1. {{ todo.text }} @@ -131,7 +131,7 @@ There are quite a few other directives, each with its own special functionality. ``` ```js -const App4 = { +const ListRenderingApp = { data() { return { todos: [ @@ -143,12 +143,12 @@ const App4 = { } } -Vue.createApp(App4).mount('#app-4') +Vue.createApp(ListRenderingApp).mount('#list-rendering') ``` -

    +

    See the Pen - Intro-4 by Vue (@Vue) + List rendering by Vue (@Vue) on CodePen.

    @@ -158,14 +158,14 @@ Vue.createApp(App4).mount('#app-4') To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances: ```html -
    +

    {{ message }}

    ``` ```js -const App5 = { +const EventHandlingApp = { data() { return { message: 'Hello Vue.js!' @@ -181,12 +181,12 @@ const App5 = { } } -Vue.createApp(App5).mount('#app-5') +Vue.createApp(EventHandlingApp).mount('#event-handling') ``` -

    +

    See the Pen - Intro-5 by Vue (@Vue) + Event handling by Vue (@Vue) on CodePen.

    @@ -196,14 +196,14 @@ Note that in this method we update the state of our app without touching the DOM Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze: ```html -
    +

    {{ message }}

    ``` ```js -const App6 = { +const TwoWayBindingApp = { data() { return { message: 'Hello Vue!' @@ -211,12 +211,12 @@ const App6 = { } } -Vue.createApp(App6).mount('#app-6') +Vue.createApp(TwoWayBindingApp).mount('#two-way-binding') ``` -

    +

    See the Pen - Intro-6 by Vue (@Vue) + Two-way binding by Vue (@Vue) on CodePen.

    @@ -251,7 +251,7 @@ Now you can compose it in another component's template:
``` -But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](TODO:components.html#Props): +But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](component-basics.html#passing-data-to-child-components-with-props): ```js app.component('todo-item', { @@ -263,7 +263,7 @@ app.component('todo-item', { Now we can pass the todo into each repeated component using `v-bind`: ```html -
+