Explore topic-wise InterviewSolutions in .

VAR CONFIG = { HEADERS: {'Content-Type': 'application/json','Cache-Control' : 'no-cache'}};

axios.get ('/post',config)

.then (function (response) { })

.CATCH (function (ERROR) { });

var config = { headers: {'Content-Type': 'application/json','Cache-Control' : 'no-cache'}};

axios.get ('/post',config)

.then (function (response) { })

.catch (function (error) { });

To append vue js VALUE in html please CHECK below syntax

 {{posts_new.link}}

To append vue js value in html please check below syntax

 {{posts_new.link}}

I have called the same FUNCTION from Vue JS updated EVENT

updated() 

{ 

this.testingmodel(); 

},

But you have to avoid the errors by using try catch on calling function

methods:{

testingmodel:function(){

try { 

$('#firstlogintour').modal('open');

}

catch(err)

{ 

console.log(err); 

}

}

}

Vue Updated Scenario:

This function will CALL up to when the function or METHOD loads without failure or any Error.

I have called the same function from Vue Js updated event

updated() 

{ 

this.testingmodel(); 

},

But you have to avoid the errors by using try catch on calling function

methods:{

testingmodel:function(){

try { 

$('#firstlogintour').modal('open');

}

catch(err)

{ 

console.log(err); 

}

}

}

Vue Updated Scenario:

This function will call up to when the function or method loads without failure or any Error.

axios.get(URL)

.then(FUNCTION (RESPONSE) {

console.log(response.data.length);

})

.CATCH(function (ERROR) { 

});

axios.get(url)

.then(function (response) {

console.log(response.data.length);

})

.catch(function (error) { 

});

basic vue js component layout

<template>

<div class="HOME class"> 

<a>{{site NAME}}</a>

</div>

</template> 

<SCRIPT> 

export default { 

data: function() 

{ 

return { 

sitename:'www.wisdomjobs.com'

}

},

created: function () {

console.log('Component created.')

},

methods: {

displayname:function(URL){ 

console.log(this.sitename)

} 

},

mounted() {

console.log('Component mounted.')

}

}

</script>

<style> 

.a{

color: #111;

} 

</style>

basic vue js component layout

<template>

<div class="home class"> 

<a>{{site name}}</a>

</div>

</template> 

<script> 

export default { 

data: function() 

{ 

return { 

sitename:'www.wisdomjobs.com'

}

},

created: function () {

console.log('Component created.')

},

methods: {

displayname:function(url){ 

console.log(this.sitename)

} 

},

mounted() {

console.log('Component mounted.')

}

}

</script>

<style> 

.a{

color: #111;

} 

</style>

To import components in vue js

import HOME from './home.vue'

 export default { 

PROPS: [ 'base_url'], 

components: {

home 

},

data: function() 

{ 

return { 

sitename:this.site_url

}

},

CREATED: function () {

console.log('Component created.')

},

methods: {

DISPLAYNAME:function(url){ 

console.log(this.sitename)

} 

},

mounted() {

console.log('Component mounted.')

}

}

To import components in vue js

import home from './home.vue'

 export default { 

props: [ 'base_url'], 

components: {

home 

},

data: function() 

{ 

return { 

sitename:this.site_url

}

},

created: function () {

console.log('Component created.')

},

methods: {

displayname:function(url){ 

console.log(this.sitename)

} 

},

mounted() {

console.log('Component mounted.')

}

}

vue js PROPS is used To pass laravel variable value to vue js variable

blade.php:

 &LT;?php 

$site_url = URL('');

?&GT; 

<Home site_url="{{$site_url}}"></home> 

home.vue:

export default { 

props: [ 'site_url'], 

data: function() 

{ 

return { 

sitename:this.site_url

}

},

CREATED: function () {

console.log('Component created.')

},

methods: {

displayname:function(url){ 

console.log(this.sitename)

} 

},

MOUNTED() {

console.log('Component mounted.')

}

}

vue js PROPS is used To pass laravel variable value to vue js variable

blade.php:

 <?php 

$site_url = url('');

?> 

<Home site_url="{{$site_url}}"></home> 

home.vue:

export default { 

props: [ 'site_url'], 

data: function() 

{ 

return { 

sitename:this.site_url

}

},

created: function () {

console.log('Component created.')

},

methods: {

displayname:function(url){ 

console.log(this.sitename)

} 

},

mounted() {

console.log('Component mounted.')

}

}

&LT;DIV CLASS="class1" v-bind: class="{'class2': (!variable)}"></div>

<div class="class1" v-bind: class="{'class2': (!variable)}"></div>

var INFINITE Scroll = require('vue-infinite-scroll');

Vue. USE(infinite Scroll)

Here we used vue-infinite-scroll as PLUGIN and it installed from NPM.

var infinite Scroll = require('vue-infinite-scroll');

Vue. Use(infinite Scroll)

Here we used vue-infinite-scroll as plugin and it installed from NPM.

To create constant const keyword is USED. In Vue.js we SUGGEST to create a seperate file for defining your constants.

Example: Creating a Constant in Vue js.

export const SITE_URL = 'https://www.wisdomjobs.com';

Importing a Constant in Vue js.

import {SITE_URL} from './path/to/constants.js';

To create constant const keyword is used. In Vue.js we suggest to create a seperate file for defining your constants.

Example: Creating a Constant in Vue js.

export const SITE_URL = 'https://www.wisdomjobs.com';

Importing a Constant in Vue js.

import {SITE_URL} from './path/to/constants.js';

VUE-resource is a plugin for vue.js that provides services for MAKING web requests and handle RESPONSES USING a XMLHttpRequest or JSONP.

You can install it via YARN or NPM.

$ yarn add vue-resource

$ npm install vue-resource

VUE-resource is a plugin for vue.js that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

You can install it via yarn or NPM.

$ yarn add vue-resource

$ npm install vue-resource

In Vue js FOLLOWING types of directives are AVAILABLE:

• GENERAL Directives
• LITERAL Directives
• EMPTY Directives
• Custom Directives

In Vue js following types of directives are available:

Below are LIST of COMMONLY USED DIRECTIVES in Vue.js

• V-show
• v-if
• V-model
• V-else
• V-on

Below are list of commonly used directives in Vue.js

HTML:-

<div ID="app">

<fresher GO></fresher go>

div>

 JS:-

Vue. COMPONENT('fresher go', { 

template: '<a href="https://www.wisdomjobs.com/">

fresher go</a>',

});

HTML:-

<div id="app">

<fresher go></fresher go>

div>

 JS:-

Vue. Component('fresher go', { 

template: '<a href="https://www.wisdomjobs.com/">

fresher go</a>',

});

HTML:-

<div id="app">

Name: <input type="text" v-model="name">

<button v-on:click="myClickHandler">Say Hello button>

div> 

JS:-

var myViewModel = new VUE({

el: '#app',

data: my Model,

// A click handler INSIDE METHODS

methods: {

ClickHandler: function(E) {

alert("Hello " + this.name);

}

}

 });

HTML:-

<div id="app">

Name: <input type="text" v-model="name">

<button v-on:click="myClickHandler">Say Hello button>

div> 

JS:-

var myViewModel = new Vue({

el: '#app',

data: my Model,

// A click handler inside methods

methods: {

ClickHandler: function(e) {

alert("Hello " + this.name);

}

}

 });

HTML:-

<DIV id="app">

<ul>

<li v-for="friend in friends | order By 'age'"> {{ friend.NAME }}li>

ul>

div>

JS:-

var my Model = {

name: "Laraphp",

age: 24,

friends: [

{ name: "PHP", age: 21 },

{ name: "VUE", age: 20 },

{ name: "angular", age: 29 }

]

};

HTML:-

<div id="app">

<ul>

<li v-for="friend in friends | order By 'age'"> {{ friend.name }}li>

ul>

div>

JS:-

var my Model = {

name: "Laraphp",

age: 24,

friends: [

{ name: "php", age: 21 },

{ name: "vue", age: 20 },

{ name: "angular", age: 29 }

]

};

HTML:–

&LT;DIV id="app"&GT;

<label for="name">Enter name: label>

<INPUT type="text" v-model="name" id="name" name="name" />

<p>{{ name | uppercase }} is {{ age }} years old.p>

div>

JS:– 

var my Model = {

name: "Laraphp",

age: 24

};

var myViewModel = new Vue({

el: '#app',

data: my Model

});

HTML:–

<div id="app">

<label for="name">Enter name: label>

<input type="text" v-model="name" id="name" name="name" />

<p>{{ name | uppercase }} is {{ age }} years old.p>

div>

JS:– 

var my Model = {

name: "Laraphp",

age: 24

};

var myViewModel = new Vue({

el: '#app',

data: my Model

});

HTML:–

&LT;div id="app"&GT;

<label for="name">ENTER name: label>

<input type="text" v-model="name" id="name" name="name" />

<p>{{ name }} is {{ age }} years old.p>

div>

JS:–

var my Model = {

name: "Laraphp",

age: 24

};

var myViewModel = new Vue({

el: '#app',

data: my Model

});

HTML:–

<div id="app">

<label for="name">Enter name: label>

<input type="text" v-model="name" id="name" name="name" />

<p>{{ name }} is {{ age }} years old.p>

div>

JS:–

var my Model = {

name: "Laraphp",

age: 24

};

var myViewModel = new Vue({

el: '#app',

data: my Model

});

VIEW:–

<div id="app">

{{ name }} is {{ AGE }} years old.

div>

Model:–

var my Model = {

name: "Laraphp",

age: 24

};

ViewModel:–

var myViewModel = new VUE({

el: '#app',

data: my Model

});

View:–

<div id="app">

{{ name }} is {{ age }} years old.

div>

Model:–

var my Model = {

name: "Laraphp",

age: 24

};

ViewModel:–

var myViewModel = new Vue({

el: '#app',

data: my Model

});

Vue.js (pronounced /vjuː/, like view) is a JavaScript LIBRARY that HELPS you build WEB applications using the the MVVM (Model-View-ViewModel) ARCHITECTURAL PATTERN.

Vue.js (pronounced /vjuː/, like view) is a JavaScript library that helps you build web applications using the the MVVM (Model-View-ViewModel) architectural pattern.