Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

Vue

並べる

Vue

例えば <v-row> <v-col v-for="(list, i) in mylists" :key="i" cols="6"> <hogecard v-bind="list" /> </v-col> </v-row>

index.vue

Vue

nuxtでindex.vueをpageのフォルダやその入れ子のフォルダにおくとindex.htmlのようにフォルダ指定のデフォルトになる。

compositionAPI ストアのプロバイドとインジェクション

Vue

より明確にストアの書き方がわかったので書いておく。 キーを何か用意 const StoreSymbol = Symbol() 親のstoreをもっているものがprovideする。 // sotreを持っている側がprovideする。 export function provideStore(store) { provide(StoreSymbol, store)…

alert

Vue

アラートを書いてみた。クロージャで結果を返すのはやめるべきなのかよくわからないがそこもリアクティブにすべきだろう。 gist.github.com

compositionAPIの初歩

Vue

ここの説明がそもそもわかりやすかった。 vue-composition-api-rfc.netlify.app そこに書いてあるコードを借りてくると、こんな感じでuse関数(useは実際は何でも良い)を書いて、 function useCreateFolder (openFolder) { // originally data properties con…

ABC propsでオブジェクトを指定する。

Vue

type AlertCompletedBlock = (index: number) => void; interface Alert { display: number; completedBlock: AlertCompletedBlock | null; title: string; desc: string; buttonTitles: string[]; } const alertInit:Alert = { display:0, title:"", desc:"…

vue-property-decorator

vue

クラスで書けるので普通のクラスの書き方に慣れているひとはこちらのほうが断然わかりやすい。型の情報が明確。 以下に詳しい解説があった。 qiita.com

まとめ

rodhos.hatenadiary.jp

ABC globalに参照するオブジェクト

Vue

Vue.observableを使うらしい。 /* eslint-disable */ import Vue from 'vue' /// グローバル変数定義 const state = Vue.observable({ _hoge:"Hoge", get hoge(): string { return this._hoge; }, set hoge(value:string) { this._hoge = value; } }) declar…

ABC v-bindはオブジェクトや関数を渡せる。

Vue

よって、使ってほしい関数などを渡すことは可能だった。 validationに使う関数を渡すのに使ってみた。 指定しないときはnullを入れておくようにした。

ABC5 ストア

Vue

例題を勉強したサイトを失念してしまった。思い出したらリンクを張りたい‥。 検索して見つかりました。この記事です。 qiita.com 以下はこの記事を自分で実装してみたメモです。 今、カウンター情報を各コンポーネントで共通化したいと考える。 次のようなク…

ABC4 composition-api

Vue

composition-api プラグインなのでVue.useを忘れずに。 defineComponentで作る。 setupしてreturnで参照したい変数(ref,reactiveで作る)、関数、computedな関数等を作って返却する。 例 /* eslint-disable */ export default defineComponent({ name: 'Login…

Vue.JS コンポーネントの使い方

vue

簡単な例 components <template> <div> <p>myConponent</p> </div> </template> スクリプトは <script> /* eslint-disable */ import { defineComponent, computed, watch } from '@vue/composition-api'; export default defineComponent({ name: 'MyCard', components: {}, props: {}, data: function() {}…

Vue.JS ABC3 ルーティング

Vue

vue-router パスを定義する。 Vue.use(VueRouter) const routes: Array<RouteConfig> = [ { path: '/', name: 'Home', component: Home }, { path: '/hoge', name: 'Hoge', component: Hoge } ] const router = new VueRouter({ routes }) export default router 使用を宣</routeconfig>…

VueABCその2 基本

Vue

テンプレート {{ }} <div>hoge world,{{ name }}?</div> でそのテンプレートのnameのdataをみている。{{ }}は口髭(Mustache) クリック v-on:click <button v-on:click="pushCrick">push</button> これでテンプレートのpushCrockメソッドが呼ばれる。 テーブルリスト v-for <table> <tr v-for="item in myTableData" v-bind:key="item"> <td><img src="" /></td> <td> {{ item.title }}…</td></tr></table>

Vue.JS ABC勉強ノート

Vue

基本 <template> </template> <script> </script> <style> </style> プラグインを各種使う Vue.config.productionTip = false new Vue({ router, vuetify, render: h => h(App) }).$mount('#app') アプリのマウント new Vue({ el: '#app` // エレメントのid指定 }) this.$elでマウントしたタグが見れる。 スクリプ…

サンプル

Vue

Vue.jsのサンプルを打ち込んでみた。 簡単につかえるようだ。 <div> <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <div id="app-3"> <span v-if="seen">Now you see me</span> </div> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.…</li></ol></div></div>