47
Template Syntax
Vue uses an HTML-based template syntax which binds the instance's(component's) data to the DOM.
According to the Oxford dictionary interpolation is the insertion of something of a different nature into something else. So, I would assume that we are inserting something into the HTML using Vue.
Vue uses the "Mustache" syntax (double curly braces) to bind and interpolate data in the HTML. We are using the word binding here because it is bound with the value you assigned in the data property of the component.
<span>Message: {{ msg }} </span>
Message: hiconst RenderHtmlApp = {
data() {
return {
msg: 'hi'
}
}
}Once again, 'msg' in the example above would be 'interpolated' into the HTML with whatever value you gave it in the data section(property) of the corresponding Vue component.
You can also interpolate raw HTML instead of just text like the example above. But, you have to use the v-html directive!
<p>Using v-html directive: <span v-html="msg"></span>
</p>
Using v-html directive: Hello.const RenderHtmlApp = {
data() {
return {
msg: '<span>Hello.</span>'
}
}
}You can use the following JS expressions to output data in the HTML as well using Vue.
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }} // ternary expression
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>But, you can only use one expression at a time. So, the following won't work.
//this is a statement, not an expression:
{{ var a = 1 }}
//What is an expression? something that produces a value
//What is a statement? something that generates some behavior. var a = 1 is a statement. The 1 is an expression because it is a value.
//flow control wont work either, use ternary expressions
{{ if (ok) { return message } }}A ternary expression is when you use "?" and ":" for if statements which you can see in the example above.
According to the Oxford dictionary, a directive is an official authoritative instruction. So, I'm gonna assume that Vue uses directives to command or instruct the HTML to do something.
Vue uses the prefix v- as attributes in HTML to use directives. If you see v- in some HTML then you can assume that Vue is instructing that HTML tag to do something.
A directive's job is to reactively apply effects to the DOM when the value of its expression changes. Reactively here means that it is updated automatically.
v-bind:href="url" // shortcut for v-bind: is :
:href="url"
v-on:click="doSomething" // shortcut for v-on: is @
@click="doSomething"47