Template syntax | Vue Instance and Template Syntax Tutorial

Vue Instance and Template Syntax: Template Syntax

Vue.js uses an HTML-based template syntax that allows you to declaratively bind data to the DOM. This makes it easy to manage and update your application's user interface. Here's a breakdown of the key template syntax features:

1. Text Interpolation: `{{ message }}`

The most basic form of data binding. You can embed Vue expressions directly into your HTML using double curly braces. Vue will replace these with the evaluated value of the expression.

<p>The message is: {{ message }}</p>

If message in your Vue instance is "Hello Vue!", the rendered HTML will be:

<p>The message is: Hello Vue!</p>

You can also use more complex JavaScript expressions within the interpolation:

<p>The number plus one is: {{ number + 1 }}</p>

2. Directives: `v-` prefixes

Directives are special HTML attributes with the prefix v-. They instruct Vue to do something with the DOM.

v-bind (or :): Dynamically binds an HTML attribute to a Vue instance property. The shorthand : is often used.
```
<img v-bind:src="imageSrc" alt="My Image">  
<img :src="imageSrc" alt="My Image">       
```
If imageSrc is "https://example.com/image.jpg", the src attribute of the img tag will be set to that URL.
v-model: Creates a two-way data binding between an input element and a Vue instance property. Changes in the input update the property, and changes in the property update the input.
```
<input type="text" v-model="message">
<p>You typed: {{ message }}</p>
```
v-if: Conditionally renders an element based on the truthiness of an expression.
```
<p v-if="isVisible">Now you see me!</p>
```
The <p> element will only be rendered if isVisible is true.
v-else: Used in conjunction with v-if to provide an alternative block of content.
```
<p v-if="isVisible">Now you see me!</p>
<p v-else>Now you don't!</p>
```
v-show: Also conditionally renders an element, but instead of removing it from the DOM, it toggles the display CSS property. Useful for frequent toggling.
```
<p v-show="isVisible">This will be hidden or shown.</p>
```
v-for: Repeatedly renders a block of HTML for each item in an array or object.
```
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
```
The :key attribute is crucial for Vue's efficient rendering. It should be a unique identifier for each item in the list.
v-on (or @): Attaches an event listener to the element. The shorthand @ is often used.
```
<button v-on:click="handleClick">Click me</button>  
<button @click="handleClick">Click me</button>       
```
When the button is clicked, the handleClick method in your Vue instance will be called.

3. Attribute Binding (Shorthand)

As mentioned above, v-bind can be shortened to :. This is a common and recommended practice.

<a :href="url">Link to {{ url }}</a>

4. JavaScript Expressions in Templates

You can use a wide range of JavaScript expressions within your templates:

Arithmetic Operators: +, -, *, /, %
Logical Operators: &&, ||, !
Ternary Operator: condition ? valueIfTrue : valueIfFalse
Method Calls: myMethod()
Property Access: object.property or object['property']
Filters: (covered in a separate topic, but can be used to format data)

<p>Result: {{ a + b * c }}</p>
<p>Is active: {{ isActive && isAdmin }}</p>
<p>Status: {{ status === 'success' ? 'Completed' : 'Pending' }}</p>

5. Template Limitations

While powerful, Vue templates have some limitations:

No full JavaScript statements: You can't use if statements, loops, or other full JavaScript statements directly in the template. Use directives like v-if and v-for instead.
Limited to single expressions: Each interpolation ({{ ... }}) and directive value can only contain a single expression.
No access to this: You don't have access to the this keyword within the template. Instead, rely on data properties and methods defined in your Vue instance.

These template syntax features provide a flexible and efficient way to build dynamic and interactive user interfaces with Vue.js. Understanding these concepts is fundamental to working with Vue effectively.