Vue.js
以前、親コンポーネントから子コンポーネントのメソッドを叩く方法を書いた。 www.tomcky.net で、つい最近、「あれ、逆に子コンポーネントから親コンポーネントのメソッドを叩くにはどうしたらいいんだっけ？」ってなったんだけど、よくよく思い出すと、こ…
ref を使って子コンポーネントに対して参照IDを割り当てる。 jp.vuejs.org <template> <div id="app"> <FooComponent ref="foo"/> </div> </template> <script> // ... methods: { // 子コンポーネントであるFooComponentのメソッドfugaを叩く this.$refs.foo.fuga(); } </script>
Vueを使いつつマテリアルデザインを実現したいとき、Materialize使うのはjQueryで共存できるとはいってもVue使いつつjQuery使うっていうのは極力避けたくて、色々探してたらVuetifyってのがあった。 vuetifyjs.com 一通りのことはできそうだし、ドキュメント…
前回の記事で使った例をベースに、子コンポーネント Favorites.vue を追加して、親コンポーネントからデータを渡してみる。 tomcky.hatenadiary.jp 親コンポーネント App.vue はこんな感じにする。 <template> <div id="app"> <Posts @fav="addToFavorite"/> <Favorites :favorites="favorites"/> </div> </template> <script> import Favori…
vm.$emit は引数で指定したイベントを発火させる。 これを使って、親コンポーネント内で v-on ディレクティブを使って登録したカスタムイベントを発火させることで、子から親へのデータ渡しが実現できる。 例えば、親コンポーネントである App.vue を以下の…
Vue.jsを使ったプロジェクトはある程度大きくなってくるとコンポーネント単位でファイルを分けたくなってくる。 その場合、単一ファイルコンポーネントとして .vue というファイルをコンポーネント単位で作っていくことになる。 今回は vue-cli を使って単一…
.vimrc に以下の一行追加する。 autocmd BufNewFile,BufRead *.{html,htm,vue*} set filetype=html vue ファイルをHTMLとして認識させてるだけ。
github.com axiosをCDNで読み込んでおく。 v-on ディレクティブを使ってクリックイベントをハンドリングする。 省略記法を使っているので @click となっている。 また v-for ディレクティブを使って取得したデータを描画できるようにしておく。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head></html>…
v-for を使ってたら何やらエラーが出た。 error: Custom elements in iteration require 'v-bind:key' directives ... ... component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. エラ…
Vue.jsでの最も基本的なデータバインディングの形は二重中括弧 {{}} を利用したテキスト展開である。 これはマスタッシュ（Mustache）構文と呼ばれる。 <p>{{ msg }}</p> だがこれは、HTML属性内部で使用することができない。 <img src="{{ src }}"> <a href="{{ url }}"></a> なので、この場合は v-bind ディレ…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div id="app"> <button v-on:click="toggleMood"> <i class="material-icons" style="font-size: 48px;">{{ icon }}</i> <…</button></div></body></html>
symfony.com 必要なものをインストールして、 $ yarn add --dev vue vue-loader vue-template-compiler webpack.config.js の修正。 Encore // ... .enableVueLoader() ; これだけで使えるようになる。 Hello world的なところまでやってみる。 エントリーポ…
