diff --git a/client/src/pages/guide/english/vue/declarative-rendering/index.md b/client/src/pages/guide/english/vue/declarative-rendering/index.md new file mode 100644 index 0000000000..3c11f7494e --- /dev/null +++ b/client/src/pages/guide/english/vue/declarative-rendering/index.md @@ -0,0 +1,90 @@ +--- +title: Declarative Rendering +--- + +## Instalation + +Before we get started, there are a couple of ways to use Vue.js, namely via CDN and via +installation. For a first experience, it's easier to use the CDN. + +For development, use this: +```html + + +``` + +When jumping to production, this: +```html + + +``` + +As mentioned before, you can also install the `vue-cli`, but this is not +recomended for beginners. + +## Declarative Rendering + +Vue.js is a great tool for creating dynamic pages, and a first way to get in +touch with that is what's called Declarative Rendering. + +The use of term "declarative" intends to straighten this concept to +declarative languages, such as SQL: you order something, it's not implied +any implementation. Vue.js allows you to declare what data you want to be +rendered, as simply as that: + +```html +
+ {{ message }} +
+``` + +```javascript +let app = new Vue({ + el: '#app', + data: { + message: 'Hello, world!' + } +}); +``` + +With those snipets, you're telling Vue to dynamically render whatever is stored +inside `message` variable. And the fun: whenever `message` is changed, +Vue.js manages to reload that specific part of the DOM and you see the +change. + +If you want to try this reactivity out, open the console and change de value +of `app.message` to, say, `"Hello from console"`. Did you notice the change in +the page? + +The `{{ ... }}` is the syntax for that behavior: outputting the value +of a variable or of an expression. For instance, this is also a valid use and +will result in `hello`: + +```html +
+ {{ 1 < 2 ? "hello" : "goodbye" }} +
+``` + +There're cases which what we want is to set an attribute using our Vue app's +variable. You might think that the same syntax applies, but Vue has something +specific for that, what we call "binding". + +```html +
+ This link +
+``` + +```javascript +let app = new Vue({ + el: '#app', + data: { + dynamicLink: 'medium.freecodecamp.org' + } +} +``` + +The syntax `v-bind` is what Vue.js calls a "directive". It's a way to set a new +attribute to the tag that will be handled by Vue -- there are more +directives, they all begin with `v-`.