Vuejs Course


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
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Template Syntax

Last accessed pages

  1. PHP Simple HTML DOM Parser (11532)
  2. JavaScript strip_tags and stripslashes (7259)
  3. Working with HTML attributes in PHP (12410)
  4. Convert XML to JSON in JavaScript (30790)
  5. Disable button and Enable it after specified time (15307)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (99)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (86)
  3. SHA256 Encrypt hash in JavaScript (70)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (45)