Vuejs Course


Binding inline styles

With v-bind:style we can dynamically set CSS style properties in html tags.
- Syntax:
<div v-bind:style='{propName:value, otherProp:value}'>content</div>

If you want to use CSS notation (with dash '-'), put the property name between quotes:
<div v-bind:style='{"prop-name":value, "other-prop":value}'>content</div>

- Example, increase and decrease the font-size with two buttons:
<div id='demo'>
 <button @click='fontSize++'>Increase font size</button>
 <button @click='fontSize--'>Decrease font size</button>
 <p v-bind:style='{color:color, fontSize:fontSize +"px"}'>Font size is: {{ fontSize }}</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ color:'#00d', fontSize:12 }
});
</script>

You can bind to a style the object with CSS properties defined directly in Vue data.
- Example:
<div id='demo'>
 <p v-bind:style='styleOb'>This world is cured when the perception is corrected.</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{
 styleOb:{color:'#00d', fontSize:'20px', fontWeight:700}
 }
});
</script>

Array of styles

We can add an array with multiple style objects to the v-bind:style directive

- Example:
<div id='demo'>
 <p v-bind:style='[baseStyles, overrideStyles]'>The thought precedes the perception.</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{
 baseStyles:{color:'#00d', fontSize:'20px', fontWeight:700},
 overrideStyles:{color:'#fe1234'}
 }
});
</script>

Binding CSS Classes Dynamically

With v-bind:class we can dynamically set CSS clases to html elements.
- Syntax:
<div v-bind:class='{class_name: addClass}'>content</div>
The class_name is added to class attribute when the addClass property is True.
v-bind:class can also coexist with the plain class attribute.

- Example, we build a menu with v-for. When an item in Menu is clicked, we set to be added a CSS class (here sel_li) to the current item. We use v-bind:class to set sel_li class to selected item:
<style>
.m_li {background:#ebebeb; cursor:pointer; display:inline; font-size:20px; margin:4px;}
.sel_li {background:#efef00; color:#00d; text-decoration:underline;}
</style>

<div id='demo'>
<ul>
 <li class='m_li' v-for='li in lists' @click='sel_li =li' v-bind:class='{ sel_li: sel_li ==li}'>
 {{li}}
 </li>
</ul>
</div>

<script>
const menu_li =['Home', 'About', 'Contact'];

var vm = new Vue({
 el: '#demo',
 data:{
 sel_li: menu_li[0],
 lists: menu_li
 }
});
</script>

You can have multiple classes toggled by having more fields in the object.
- Syntax:
<div class='a_clas' v-bind:class='{class_name:addClass, class_2:addCls2}'>content</div>

Multiple classes added into an Array

We can pass an array to v-bind:class to apply a list of classes from data object.
- HTML:
<div v-bind:class='[active_cls, error_cls]'>Content</div>
- In Vue JS:
data: {
 active_cls: 'active',
 error_cls: 'error_msg'
}
Which will render:
<div class='active error_msg'>Content</div>

CSS class in Vue Components

When you use the class attribute on a custom component, those classes will be added to the component's root element. Existing classes will not be overwritten.

- Example with a component:
<div id='demo'>
 <comp_test class='cls_comp'></comp_test>
</div>

<script>
Vue.component('comp_test', {
 template: "<div class='cls_a cls_b'><h3 class='cls_title'>Title</h3><div>Content</div></div>"
});

var vm = new Vue({el:'#demo'});
</script>
The rendered HTML will be:
<div class='cls_a cls_b cls_comp'><h3 class='cls_title'>Title</h3><div>Content</div></div>

- The same is with class bindings in component:
<div id='demo'>
 <comp_test v-bind:class='[add_cls]'></comp_test>
</div>

<script>
Vue.component('comp_test', {
 template: "<div class='cls_a cls_b'><h3 class='cls_title'>Title</h3><div>Content</div></div>"
});

var vm = new Vue({
 el:'#demo',
 data:{add_cls: 'cls_comp'}
});
</script>
The rendered HTML will be:
<div class='cls_a cls_b cls_comp'><h3 class='cls_title'>Title</h3><div>Content</div></div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<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
Class and Style with Vue.js

Last accessed pages

  1. Simple Admin Login PHP Script (8252)
  2. Get the value of multiple selected checkboxes with same name (6448)
  3. Disable button and Enable it after specified time (12197)
  4. Multiple Select Dropdown List with JavaScript (11450)
  5. Volume and Surface Area Calculator for 3D objects (10395)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (711)
  2. SHA256 Encrypt hash in JavaScript (565)
  3. PHP Unzipper - Extract Zip, Rar Archives (551)
  4. Read Excel file data in PHP - PhpExcelReader (540)
  5. Create simple Website with PHP (456)