Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Vue js is progressive javascript script 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 just need add Vue js library in your project.
Every Vue application starts by creating a new Vue instance with the Vue function:
var vm = new Vue({{"{"}}
// options
})
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.
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.
<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>
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>'
})
The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js was developed by “Evan You”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular.
Vue js comes with following features
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.
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>
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
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.
<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}`
}
}
You have access to a $route object from your components, that expose what we need.
//from your component
console.log(this.$route.query.test)
localStorage.setItem('YourItem', response.data)
localStorage.getItem('YourItem')
localStorage.removeItem('YourItem')
Vue.js Advantages
Vue.js Disadvantages
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
└─ TodoListStatistics
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>
If you've created your project like this:
vue init webpack myproject
Now you can run
npm run build
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>'
})
