CodeOrc.com - Learn by example
X
Make an RPG
Vue Implementations

Vue Basics

Vue has a powerful templating system. Anything you put between the {{}} is replaced by whatever is in the data object.

<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } });
DO IT

In the Console, You can dynamically change the contents in the template, like so:

app.message = "new Hello";

Now, let's display something conditionally.

<div id="app-2"> <span v-if="seen"> Hello there. </span> </div>
var app2 = new Vue({ el: "#app-2", data: { seen: true } });
DO IT
Try changing the message.
Change seen to true or false and hit the run button.
Open the chrome debugger console and execute: app2.seen = false;

Gotchas

A common mistake in vue is to place the vue tags outside of the #app-2 tags. This does NOT work:

<span v-if="seen"> Hello there. </span> <div id="app-2"> </div>

This DOES work. Notice how the vue tags are inside of the app-2 tags.

<div id="app-2"> <span v-if="seen"> Hello there. </span> </div>

In the next lesson, we will learn about Example of How to use v-if

Get the Latest Tutorial Updates
<< >>
X