Vue.js + Ionic = <3
@zwacky—Nov 2018
Overview
1) Current state @ionic/vue
2) How to get started
3) How does using it look like
4) Why would you use this?
5) Using Ionic as Web Components
6) Resources
1) Current state of @ionic/vue
2) How to get started
npx vue create hello-world
npm install @modus/ionic-vue
3) How does using it look like
4) Why would you use this?
Why we chose Vue.js
5) Ionic as Web Components
A) Listening to Components
&
B) Passing primitive type parameters
<ion-searchbar� :showCancelButton="true"� @ionInput="onInput($event)"� @ionCancel="onCancel($event)">
</ion-searchbar>
onInput(evt) {
console.log(evt.target.value);
}
onCancel(evt) {
}
C) Passing non-primitive type parameters
<ion-slides� :options="{ loop: true }">
</ion-slides>
// or
<ion-slides� :options="myOptionsObject">
</ion-slides>
// => [object Object]
C) Passing non-primitive type parameters
<ion-slides� :options.prop="{ loop: true }">
</ion-slides>
// property binding necessary.
// for primitive types it’s
// enough to bind to attribute
// (:options=”…”)
// property vs attribute
// explanation
D) Call methods on Ionic components
<ion-slides� ref=”myName”>
</ion-slides>
<div class=”arrow-right”
@click=”next()”>
</div>
<script lang=”ts”>
…
next() {
this.$refs.myName.slideNext();
}
…
</script>
6) Resources
Thank you!