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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Template Syntax

Last accessed pages

  1. Disable button and Enable it after specified time (9264)
  2. JQZoom Image Magnifier (11045)
  3. Other Free Courses (2074)
  4. Get and Modify content of an Iframe (21767)
  5. CSS Course - Free lessons (12459)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (150)
  2. Register and show online users and visitors (95)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (88)
  4. Read Excel file data in PHP - PhpExcelReader (88)
  5. JavaScript Course - Free lessons (73)