Vue Template Syntax: Interpolation and Directives Explained
This article explains Vue.js template syntax, covering how interpolation with double curly braces inserts data, the role of directives like v-bind, v-model, and v-on, shorthand notations, event modifiers, and the use of dynamic arguments introduced in Vue 2.6.0, all illustrated with concrete code examples.
Overview
Vue.js template syntax is an HTML‑based extension that lets developers bind data from a Vue instance to DOM elements declaratively. The template is compiled into a virtual‑DOM render function, and together with Vue’s reactivity system it updates only the components that actually need to change, minimizing DOM operations.
Interpolation Syntax
Interpolation uses double curly braces {{ }} to insert data into HTML. The expression inside the braces is a JavaScript expression that can read any property defined in data. Examples:
{{number}}{{number + 1}}{{method(1)}}{{ok ? 'YES' : 'NO'}}{{message.split('').reverse().join('')}}Statements such as {{ var a = 1 }} or flow‑control constructs like {{ if (ok) { return message } }} are not valid expressions.
A complete example demonstrates these interpolations:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Template Syntax</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>Interpolation examples:</h2>
<h3>number = {{number}}</h3>
<h3>number + 1 = {{number + 1}}</h3>
<h3>method result = {{add(5)}}</h3>
<h3>ternary = {{number > 6 ? "哈哈" : "呵呵"}}</h3>
<h3>reverse = {{message.split('').reverse().join('')}}</h3>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
number: 10,
message: "hello world"
},
methods: {
add(i) { return this.number + i; }
}
})
</script>
</body>
</html>The browser renders the values as shown in the accompanying screenshot.
Directive Syntax
Directives are special attributes prefixed with v-. Their value is expected to be a single JavaScript expression (except for v-for). Key directives:
v-bind : one‑way binding of an HTML attribute to a data property. Example: <a v-bind:href="url">... v-model : two‑way binding between form elements and data. Example: <input type="text" v-model:value="name"> v-on : event listener. Example:
<button v-on:click="handleClick">Click me</button>Shorthand notations are available: :href for v-bind:href and @click for v-on:click.
Event Modifiers
Vue provides modifiers to alter event behavior: .prevent: prevent default action .stop: stop propagation .once: handler runs only once .capture: use capture phase .self: trigger only when the event target is the element itself .passive: hint that the handler will not call preventDefault Examples:
<a href="http://www.baidu.com" @click.prevent="say">Click me</a>
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">Click me</button>
</div>
<button @click.once="showInfo">Click once</button>Comprehensive Directive Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Template Syntax</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<a :href="address">Test v-bind</a>
<hr>
v-model example:
<input type="text" v-model="name"> {{name}}
<hr>
v-on example:
<button @click="say">Click me</button>
<hr>
Event modifiers:
<a href="https://www.baidu.com" @click.prevent="say">Click me</a>
<div @click="say" style="margin-top:8px;">
<button @click.stop="say">Click me</button>
</div>
<button @click.once="say" style="margin-top:8px;">Click once</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: { name: "", address: "https://www.baidu.com" },
methods: { say() { alert("你好呀"); } }
})
</script>
</body>
</html>Dynamic Arguments (Vue 2.6.0+)
From Vue 2.6.0 onward, a directive’s argument can be a JavaScript expression wrapped in brackets, e.g., v-bind:[attributeName]="url". The expression is evaluated to a string that becomes the final argument. If the evaluated value is null, the binding is removed; non‑string values trigger a warning.
Constraints:
Expressions must not contain spaces or quotes inside the attribute name.
Upper‑case characters in attribute names are lower‑cased by the browser, so they should be avoided.
Example of a dynamic bind:
<a v-bind:[attributeName]="url">...</a>Example of a dynamic event name:
<a v-on:[eventName]="doSomething">...</a>If eventName evaluates to "focus", the directive becomes v-on:focus.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Shepherd Advanced Notes
Dedicated to sharing advanced Java technical insights, daily work snippets, and the power of persistent effort.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.