Vuejs Course

Mixins are JS objects that can be used to distribute reusable code among components. When a component uses mixin, all options of mixin become a part of the component options.

- Example:
// define a mixin object
var mixin_1 = {
 //function automatically called when Vue instance is created
 created: function(){
 this.hello();
 },
 methods: {
 hello: function(){
 console.log('hello from mixin.')
 }
 }
}

// define a component that uses this mixin
var component = Vue.extend({
 mixins: [mixin_1]
})

var comp = new component() // hello from mixin.
When a mixin and a component contain overlapping options, they are merged. If they contain same function or data object with same key, data from main Vue instance takes priority and will replace mixin's function and data with same key.

- In the following example we have mixin and Vue instance with data object that have same "msg" key.
// define a mixin object
var mixin_2 = {
 //function automatically called when Vue instance is created
 data: function(){
 return {msg: 'Hello from Mixin', str:'String from mixin'};
 }
}

// vue instance
var vm = new Vue({
 mixins: [mixin_2],
 data: {msg:'Msg replaced from component.', txt:'I`m a good person'},
 created: function(){
 console.log(this.$data);
 }
})

// {"msg": "Msg replaced from component.", "txt": "I`m a good person", "str": "String from mixin"}
- In the following example we have a method (here called "same_met") with same name in mixin and Vue instance.
// define a mixin object
var mixin_3 = {
 methods: {
 met_mixin: function(){
 console.log('Just wish and vision frequently its effect')
 },
 same_met: function(){
 console.log('The past not exists')
 }
 }
}

// define a component that uses this mixin
var vm = new Vue({
 mixins: [mixin_3],
 methods: {
 same_met: function(){
 console.log('I am my life')
 },
 met_inst: function(){
 console.log('Miracle is possible')
 }
 }
})

vm.met_inst(); // Miracle is possible
vm.met_mixin(); // Just wish and vision frequently its effect
vm.same_met(); // I am my life
Hook functions with the same name are merged into an array so that all of them will be called. Mixin hooks will be called before the component's hooks.
var mixin_4 ={
 created: function(){
 console.log('mixin - The wish is the request')
 }
}

new Vue({
 mixins: [mixin_4],
 created: function () {
 console.log('component - The vision is to receive')
 }
})

// mixin - The wish is the request
// component - The vision is to receive

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Mixins

Last accessed pages

  1. Get and Modify content of an Iframe (32367)
  2. $_GET, $_POST and $_REQUEST Variables (33884)
  3. Ajax-PHP Chat Script (49508)
  4. JavaScript Course - Free lessons (31647)
  5. Volume and Surface Area Calculator for 3D objects (11276)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (310)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)