Template Syntax

Using JavaScript Expressions in Vue Template

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the Vue instance's data. The templates are compiled into Virtual DOM render functions.
The most basic form of template is text interpolation using the "Mustache" syntax (double curly braces):

<div>Message: {{ msg }}</div>

The mustache tag will be replaced with the value of the msg property from the data object. It will also be updated whenever the value of the "msg" property changes.

- Example, when click on a button it sets a value o a data Vue property (here "str"), changing the text displayed into a Div:

<div id='app'>
<div>{{ str }}</div>
<button @click='str = "Love the Life"'>Click</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {str: 'Be Yourself.'}
})
</script>

HTML tags in template

The double mustaches interprets the data as plain text. To output real HTML, you will need to use the v-html directive.
Example:

<div id='app'>
<p>Using mustaches: {{ str_html }}</p>
<p>Using v-html directive: <span v-html="str_html"></span></p>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {str_html: '<b style="color:#00f">Be Yourself.</b>'}
})
</script>

Mustaches cannot be used inside HTML attributes.

Using JavaScript Expressions in Vue Template

Vue.js supports JavaScript expressions inside all data bindings (one single expression):

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

- Example, shows the number of clicks on a button:

<div id='app'>
<div>Number of licks: {{ nr}}</div>
<button @click='nr +=1'>Click</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {nr: 0}
})
</script>

Another example, display in reverse order the characters added into an input text field:

<div id='app'>
 <p>{{ msg.split('').reverse().join('') }}</p>
 Add some text in this input:<br>
 <input v-model='msg'>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {msg: 'Hello Vue!'}
})
</script>

<<-The Vue Instance -- Vue Directives->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Last accessed pages

CSS cursor property - Custom Cursors ⁽⁶⁰⁹¹⁾
Disable button and Enable it after specified time ^(17531)
PHP Unzipper - Extract Zip, Rar Archives ^(32244)
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(141748)
Add, Change, and Remove Attributes with jQuery ^(46356)

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽⁴⁷²⁾
CSS cursor property - Custom Cursors ⁽⁷⁹⁾
The Mastery of Love ⁽⁶⁹⁾
PHP-MySQL free course, online tutorials PHP MySQL code ⁽⁶²⁾
CSS3 2D transforms ⁽⁴⁶⁾