How to create an instance of Vue.js?
How to use local storage with Vue.js?
How to create Two-Way Bindings in Vue.js?
What are Components in Vue.js?
What are Directives in Vue.js, List some of them you used?
How can you redirect to another page in Vue.js?
Can I pass parameters in computer properties in Vue.js?
Explain the basic logical Vue.js app organisation
What are the Advantages/Disadvantages of Vuejs?
Explain the differences between one-way data flow and two-way data binding?
How can I fetch query parameters in Vue.js?
List type of Directive are available in Vue.js.
What is the difference v-bind and v-model? Provide some code example.
How to call function on child component on parent events?
How to pass an argument to Vue.js filters?
How can you prevent layout jumps in Vue.js?
Can you force Vue.js to reload/rerender?
Are there any drawback of Vue.js you know?
How can you bind styles in Vue.js?
Could you listen for components props changes?
What's the equivalent of Angular Service in Vue.js?
How to save new value to data variables in Vue.js whenever the user types?
How to implement simple routing in Vue.js (without external library)?
List some types of components communication channels in Vue.js app
How can I watch an array length using Vue.js?
What is the best way to create a constant, that can be accessible from entire application in VueJs ?
What is the main difference between a method and a computed value in Vue.js?
What is a proper way to communicate between sibling components in vuejs 2.0?
How do you toggle a class in Vue.js?
Every Vue application starts by creating a new Vue instance with the Vue function:
var vm = new Vue({
// options
})Vue.js is a progressive javascript framework used to create dynamic user interfaces. Vue.js is very easy to learn. In order to work with Vue.js you just need to add few dynamic features to a website. You don’t need to install any thing to use Vue.js you just need add the Vue.js library in your project.
You can just do following:
localStorage.setItem('YourItem', response.data)
localStorage.getItem('YourItem')
localStorage.removeItem('YourItem')v-model directive is used to create Two-Way Bindings in Vue js.In Two-Way Bindings data or model is bind with DOM and Dom is binded back to model.
In below example you can see how Two-Way Bindings is implemented.
<div id="app">
{{message}}
<input v-model="message">
</div>
<script type="text/javascript">
var message = 'Vue.js is rad';
new Vue({ el: '#app', data: { message } });
</script>In Vue js filters are used to transform the output that are going to rendered on browser.
A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. In the markup it is denoted by a single pipe (|) and can be followed by one or more arguments:
<element directive="expression | filterId \[args...\]"></element>Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props. Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})If you've created your project like this:
vue init webpack myprojectNow you can run
npm run buildThen copy index.html and /dist/ folder into your website root directory. Done.
Components are one of most powerful features of Vue js.In Vue components are custom elements that help extend basic HTML elements to encapsulate reusable code.
Following is the way to register a Vue component inside another component:
export default {
el: '#your-element'
components: {
'your-component'
}
}The concept of directive in Vue js is drastically simpler than that in Angular. Vue.js directives provides a way to extend HTML with new attributes and tags. Vue.js has a set of built-in directives which offers extended functionality to your applications.You can also write your custom directives in Vue.js .
Below are list of commonly used directives in Vue.js
- v-show
- v-if
- v-model
- v-else
- v-on
Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and v-bind expressions (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol:
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>Vue js comes with following features
- Templates
- Reactivity
- Components
- Transitions
- Routing
If you are using vue-router, you should use router.go(path) to navigate to any particular route. The router can be accessed from within a component using this.$router. router.go() changed in VueJS 2.0. You can use router.push({ name: "yourroutename"})or just router.push("yourroutename") now to redirect.
You can use a method or computed function.
The method way:
<span>{{ fullName('Hi') }}</span>
methods: {
fullName(salut) {
return `${salut} ${this.firstName} ${this.lastName}`
}
}Computed property with a parameter way:
computed: {
fullName() {
return salut => `${salut} ${this.firstName}
${this.lastName}`
}
}A Vue.js application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components. For example, a todo app’s component tree might look like this:
Root Instance
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatisticsAll Vue components are also Vue instances.
Vue.js Advantages
- Easy for applications and interfaces development
- Support Two-way communication as like AngularJs
- Ability to control the states
- Natural thought process
Vue.js Disadvantages
- Limited scope
- Single creator
- Small developer community
In one-way data flow the view(UI) part of application does not updates automatically when data Model is change we need to write some custom code to make it updated every time a data model is changed. In Vue js v-bind is used for one-way data flow or binding.
In two-way data binding the view(UI) part of application automatically updates when data Model is changed. In Vue.js v-model directive is used for two way data binding.
You have access to a $route object from your components, that expose what we need.
//from your component
console.log(this.$route.query.test)In Vue.js following types of directives are available
- General Directives
- Literal Directives
- Empty Directives
- Custom Directives
You could build your template this way:
<b-menu v-for="menu in menu_items" v-bind:key="menu.label">
<label>{{ menu.label }}</label>
<b-menu-list v-for="item in menu.items" v-bind:key="item">
<b-menu-item> {{ item.message }}</b-menu-item>
</b-menu-list>
</b-menu>v-model is a two-way binding for form inputs. It combines v-bind, which **brings a js value **into the markup, and v-on:input to update the js value.
Consider:
<input v-model="something">and it's just syntactic sugar for:
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
>v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd).
Give the child component a ref and use $refs to call a method on the child component directly.
Html:
<div id="app">
<child-component ref="childComponent"></child-component>
<button @click="click">Click</button>
</div>Javascript:
var ChildComponent = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
}
}
new Vue({
el: '#app',
components: {
'child-component': ChildComponent
},
methods: {
click: function() {
this.$refs.childComponent.setValue(2.0);
}
}
})- Empowered HTML. This means that Vue.js has many similar characteristics with Angular and this can help to optimize HTML blocks handling with a usage of different components.
- Detailed documentation. Vue.js has very circumstantial documentation which can fasten learning curve for developers and save a lot of time to develop an app using only the basic knowledge of HTML and JavaScript.
- Adaptability. It provides a rapid switching period from other frameworks to Vue.js because of the similarity with Angular and React in terms of design and architecture.
- Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. The main thing is that smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
- Large scaling. Vue.js can help to develop pretty large reusable templates that can be made with no extra time allocated for that according to its simple structure.
- Tiny size. Vue.js can weight around 20KB keeping its speed and flexibility that allows reaching much better performance in comparison to other frameworks.
Consider:
filters:{
currency: function(value, arg1){
return arg1+value;
}And usage:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
{{123 | currency('$') }}
</div>You want to totally nullify the time of the first rendering, the only way to go is to do server-side rendering. So your app will be served with the initial html structure already there.
You can use Vueify. it's a browserify transform.
gulp.task('browserify', function() {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({
debug: !env.p,
transform: ['vueify']
}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});Yes. Consider:
vm.$forceUpdate();- Lack of resources. Vue.js still has a pretty small market share in comparison with React or Angular, which means that knowledge sharing in this framework is still in the beginning phase.
- Risk of over flexibility. Sometimes, Vue.js might have issues while integrating into huge projects and there is still no experience with possible solutions, but they will definitely come soon.
- Chinese background. As far as Vue.js has a bit of Chinese background, a lot of elements and descriptions are still available in Chinese. This leads to a partial complexity on some stages of development, nevertheless, more and more materials are being translated into English.
Consider:
<div id="table">
<div v-for="table in tables">
<div class="table-div" v-bind:style="{top: table.top + 'px', left: table.left + 'px'}">{{table.name}}</div>
</div>
</div>Yes. You can watch props to execute some code upon props changes:
new Vue({
el: '#app',
data: {
text: 'Hello'
},
components: {
'child' : {
template: `<p>{{ myprop }}</p>`,
props: ['myprop'],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
}
}
}
}
});And in HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<child :myprop="text"></child>
<button @click="text = 'Another text'">Change text</button>
</div>There are 4 ways:
- Stateless service: then you should use mixins
- Statefull service: use Vuex
- Export service and import from a vue code
- any javascript global object
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. The basic idea behind Vuex, inspired by Flux, Redux and The Elm Architecture.
Vuex resolves two problems:
- Multiple views may depend on the same piece of state. Passing props can be tedious for deeply nested components, and simply doesn't work for sibling components.
- Actions from different views may need to mutate the same piece of state. We often find ourselves resorting to solutions such as reaching for direct parent/child instance references or trying to mutate and synchronize multiple copies of the state via events. Both of these patterns are brittle and quickly lead to unmaintainable code.
Use watch method to detect changes on variable you are storing data on like this:
watch: {
input: function () {
if (isLocalStorage() /* function to detect if localstorage is supported*/) {
localStorage.setItem('storedData', this.input)
}
}
}If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this:
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})For most Single Page Applications, it’s recommended to use the officially-supported vue-router library.
- Props (
props) - The simplest communication channel in Vue for direct Parent-Child communication. It should mostly be used to pass data relating to presentation logic or a restricted set of data down the hierarchy. - Refs and methods (
ref) - When it doesn't make sense to use a prop to let a child handle an event from a parent, setting up a ref on the child component and calling its methods is just fine. - Events (
$emitand$on) - The simplest communication channel for direct Child-Parent communication. Again, should be used for presentation logic. - Event bus (
this.$root.$emit,this.$root.$on) - This can become useful when passing props all over the place from far up down to deeply nested children components, with almost no other components needing these in between. - Centralized store (Vuex) - Vuex is the way to go with Vue for state management. It offers a lot more than just events and it's ready for full scale application.
Use the watch section in your vm creation:
var vm = new Vue({
el: 'body',
data: {
items: []
},
computed: {
item_length: function () {
return this.battle_logs.length;
}
},
watch: {
items: {
handler: function () {
console.log('caught!');
},
deep: true
}
}
});Or watch a computed length attribute:
vm.$watch('item_length', function(newVal, oldVal) {
console.log('caught!');
});Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.
Consider:
// define a mixin object
var myMixin = {
methods: {
getProducts () {
myApi.get('products?id=' + prodId).then(response => this.product = response.data)
}
}
}
// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin]
})
// alternate way to have a mixin while initialising
new Vue({
mixins: [myMixin],
created: function () {
console.log('other code')
}
})What is the best way to create a constant, that can be accessible from entire application in VueJs ?
You can always define a variable outside of the Vue app scope and use it throughout the application.
//const.js
export default {
c1: 'Constant 1',
c2: 'Constant 2'
}And:
// component.vue
import const from './const';
export default {
methods: {
method() {
return const.c1;
}
}
}Computed values and methods are very different in Vue and are definitely not interchangeable in most cases.
- A more appropriate name for a computed value is a computed property. You can think of a computed value as a derived value that will be automatically updated whenever one of the underlying values used to calculate it is updated.
- A method is just a function bound to the Vue instance. It will only be evaluated when you explicitly call it.
With Vue 2.0, we using the eventHub mechanism.
Consider:
const eventHub = new Vue() // Single event hub
// Distribute to components using global mixin
Vue.mixin({
data: function () {
return {
eventHub: eventHub
}
}
})
// your component you can emit events with
this.eventHub.$emit('update', data)
// And to listen you do
this.eventHub.$on('update', data => {
// do your thing
})You can even make it shorter and use root Vue instance as global Event Hub:
// Component 1
this.$root.$emit('eventing', data);
// Component 2
mounted() {
this.$root.$on('eventing', data => {
console.log(data);
});
}For Vue.js 2 you could have the active class be dependent upon a boolean data value:
<th
class="initial"
v-on:click="myFilter"
v-bind:class="{ active: isActive }"
>
<span class="wkday">M</span>
</th>methods: {
myFilter: function(){
this.isActive = !this.isActive;
// some code to filter users
}
}