Front-End Developer [ Dawex ]
(Disclaimer: I AM NO VUE.JS EXPERT...)
NG component
Vue 2.0 component
One-way data-binding
Unobtrusive reactivity system
npm install --save ngVue
<body ng-app="app">
<app>Loading...</app>
</body>
import App from './App';
angular
.module('app', [])
.component('app', App);
export default App = {
template: `<div>{{$ctrl.hello}}</div>`,
controller() {
this.$onInit = () => {
this.hello = 'Hello, World!';
};
}
};
App.js
<body ng-app="app">
<app>Loading...</app>
</body>
import App from './App';
angular
.module('app', [])
.component('app', App);
export default App = {
template: `<div>{{$ctrl.hello}}</div>`,
controller() {
this.$onInit = () => {
this.hello = 'Hello, World!';
};
}
};
index.js
<body ng-app="app">
<app>Loading...</app>
</body>
import App from './App';
angular
.module('app', [])
.component('app', App);
export default App = {
template: `<div>{{$ctrl.hello}}</div>`,
controller() {
this.$onInit = () => {
this.hello = 'Hello, World!';
};
}
};
index.html
<template>
<div>{{hello}}</div>
</template>
<script>
export default {
data() {
return { hello: 'Hello, World!' }
}
}
</script>
<body>
<div id="app">Loading...</div>
</body>
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
App.vue
<template>
<div>{{hello}}</div>
</template>
<script>
export default {
data() {
return { hello: 'Hello, World!' }
}
}
</script>
<body>
<div id="app">Loading...</div>
</body>
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
main.js
<template>
<div>{{hello}}</div>
</template>
<script>
export default {
data() {
return { hello: 'Hello, World!' }
}
}
</script>
<body>
<div id="app">Loading...</div>
</body>
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
index.html
<template>
<div>Hello {{firstName}} {{lastName}}!</div>
</template>
<script>
export default {
props: {
firstName: String,
lastName: String
}
}
</script>
Hello.vue
export const App = {
template: `
<vue-component
name="Hello" vprops="$ctrl.person">
</vue-component>
`,
controller() {
this.person = { firstName: 'John', lastName: 'Doe' };
}
};
<vue-component
name="Hello"
vprops-first-name="$ctrl.person.firstName"
vprops-last-name="$ctrl.person.lastName">
</vue-component>
App.js
App.js HTML template v2
import angular from 'angular';
import Vue from 'vue';
import ngVue from 'ngVue';
import App from './App'; // AngularJS component
import Hello from './Hello.vue'; // Vue component
angular
.module('ngVueApp', ['ngVue'])
.component('app', App)
.value('Hello', Vue.component('Hello', Hello));
index.js
Use of AngularJS `$injector` service to get `Hello` component
export const App = {
template: `
<hello vprops="$ctrl.person"></hello>
`,
controller() {
this.person = { firstName: 'John', lastName: 'Doe' }
}
};
<hello
vprops-first-name="$ctrl.person.firstName"
vprops-last-name="$ctrl.person.lastName">
</hello>
App.js
App.js HTML template v2
import angular from 'angular';
import Vue from 'vue';
import ngVue from 'ngVue';
import App from './App'; // AngularJS component
import Hello from './Hello.vue'; // Vue component
angular
.module('ngVueApp', ['ngVue'])
.component('app', App)
.directive('hello', createVueComponent =>
createVueComponent(Vue.component('Hello', Hello)));
index.js