.component()
method
angular.module('myApp').component('myComponent', {
template: '{{ $ctrl.greeting }} world!',
controller: function() {
this.greeting = 'Hello';
}
});
Vue.component('my-component', {
template: '{{ greeting }} world!',
data() {
return {
greeting: 'Hello'
};
}
});
In understanding VueJS's component-based approach for someone skilled in AngularJS, the key differences between the two frameworks lie in the instantiation of components, management of data flow, and updating of the UI. VueJS offers a more modular and declarative approach, resulting in a more maintainable codebase.
In AngularJS, directives are used to extend the HTML vocabulary and achieve dynamic user interfaces.
Directives in AngularJS are defined with a prefix
ng-
.
{{ }}
: AngularJS equivalent for interpolation
v-on:click
, which indicates that the click event is bound to an element.
.stop
can be provided to stop the propagation of the event.
v-on:click
instead of AngularJS's
ng-click
.
v-bind
to dynamically bind attributes or component props to an expression.
ng-bind
to replace the text content of an element with the value of an expression.
v-model
creates a two-way binding on input, textarea, or select elements in VueJS.
ng-model
in AngularJS also creates a two-way binding between a form control and the model.
v-for
is VueJS's directive for rendering a list of items by iterating over an array or object.
ng-repeat
in AngularJS provides a similar functionality, creating a template instance for each item in a collection.
v-if
in VueJS conditionally renders a block based on an expression.
ng-if
in AngularJS removes or recreates a portion of the DOM tree based on an expression.
Note: These methods can be compared to communication mechanisms in AngularJS.
@
,
=
, and
&
to pass data to child directives (components in AngularJS world).
Vue.component('child-component', {
props: ['message'],
template: '<span>{{ message }}</span>'
});Usage in parent:
<child-component message="hello from parent"></child-component>Vuex is a state management pattern + library for Vue.js applications. It provides a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
AngularJS approaches state management through services, or with third-party libraries like Redux.
AngularJS has a Dependency Injection mechanism that manages the creation of dependencies and passing them to components or services.
provide() {
return {
theme: this.theme
};
}
inject: ['theme']
props
option.
Vue.component('child-component', {
props: ['message'],
template: '{{ message }}'
});
v-bind
directive (or
:
shorthand).
<child-component :message="parentData"></child-component>
Vue.component('child-component', {
props: {
message: {
type: String,
required: true
}
},
template: '{{ message }}'
});
@Component
in AngularJS
<script>
tags
<style>
tags, either scoped or global
<template>
<div class="greeting">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
}
};
</script>
<style>
.greeting {
color: red;
}
</style>
``
is similar to AngularJS
template/templateURL
``
export object is similar to AngularJS
controller
`<style scoped>
restricts styles to the component
To create the component, create a
.vue
file that includes all three parts:
<template>
,
<script>
, and
<style>
. Import and use the component in your Vue app.
<script src="/static/JS/reveal.js">var source_link = location.href.split('/slides/')[1];
Reveal.initialize({ height:900, mathjax3: {
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
tex: {
inlineMath: [ [ '\$', '\$' ] , [ '\\[', '\\]' ], [ '\\(', '\\)' ] ]
},
options: {
skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
},
}, parallaxBackgroundImage: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%239C92AC' fill-opacity='0.08'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" ,
parallaxBackgroundHorizontal: 200,
parallaxBackgroundVertical: 50,
parallaxBackgroundImage: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%239C92AC' fill-opacity='0.08'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E",
parallaxBackgroundHorizontal: 200,
parallaxBackgroundVertical: 50,
controls: true,
progress: true,
center: true,
slideNumber: true,
autoPlayMedia: true,
autoSlide: 0,
plugins: [ RevealMarkdown,RevealMath.MathJax3 ,RevealAudioSlideshow,RevealHighlight ] ,
audio: {
prefix: '/slides/voice_files/'+source_link+'_', // audio files are stored in the "audio" folder
suffix: '.mp3'
} }
// a
);
function resetSlideScrolling(slide) {
$(slide).removeClass('scrollable-slide');
}
function handleSlideScrolling(slide) {
if ($(slide).height() >= 800) {
$(slide).addClass('scrollable-slide');
}
}
Reveal.addEventListener('ready', function (event) {
handleSlideScrolling(event.currentSlide);
});
Reveal.addEventListener('slidechanged', function (event) {
resetSlideScrolling(event.previousSlide)
handleSlideScrolling(event.currentSlide);
});
Vue.component
method
VueJS has two types of component registration: global and local.
Global Component:
Can be used in any root Vue instance and its subcomponents by using
Vue.component
.
Local Component:
Defined in the
components
option of its parent instance.
A VueJS component has a
template
option where you set the HTML that will be rendered by the component.
<template>
<div>
<input v-model="message">
<p>The message is: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script><template>
<div>
<button v-on:click="greet">Greet</button>
</div>
</template>
<script>
export default {
methods: {
greet() {
alert('Hello from the Vue component!');
}
}
};
</script>In VueJS components, data binding and directives are similar to the concepts in AngularJS, although the terminology and syntax may differ. The core principles of reactive data and directive-driven DOM manipulation remain consistent between the two frameworks.
Vue.component()
or using a local component object within a parent component.
AngularJS
app.component('myComponent', {
template: `
<div>
{{ message }}
</div>
`,
controller: function() {
this.message = 'Hello from AngularJS';
}
});VueJS
Vue.component('my-component', {
template: `
<div>
{{ message }}
</div>
`,
data() {
return {
message: 'Hello from VueJS'
};
}
});
v-model
directive for two-way data binding like AngularJS's
ng-model
.
v-model
directive is generally used for form inputs.
{{ }}
, similar to AngularJS.
// AngularJS
<li ng-repeat="item in items">{{ item }}</li>
<button ng-click="doSomething()">Click me</button>
// VueJS
<li v-for="item in items">{{ item }}</li>
<button @click="doSomething">Click me</button>
$emit
and
$broadcast
for event handling within scopes.
$emit
.
v-on
directive or its shorthand
@
.
By practicing these exercises, you're reinforcing your understanding of VueJS components and seeing parallels with AngularJS, which should make the transition smoother.
Which symbol is used in VueJS for two-way data binding?
In VueJS component structure, where do you define the functionality of the component?
Which of the following statements is true regarding AngularJS's component-based architecture?
Which VueJS directive is used for two-way data binding on form input, textarea, and select elements?
In VueJS, which directive is used to dynamically bind one or more attributes or a component prop to an expression?
Which VueJS mechanism allows an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep they are?
What is the primary method for passing data from a parent component to a child component in VueJS?
In VueJS, how can a child component emit an event for the parent component to listen to?
What are the three main sections involved in creating a basic VueJS component?
What is the purpose of the data function in a VueJS component?
Which directive in VueJS is similar to ng-if and ng-show/ng-hide in AngularJS?
In VueJS, which directive is used for event handling and can be shortened to `@`?
What is the recommended tool for scaffolding a new VueJS project, similar to Angular CLI in the Angular ecosystem?