Vue.nextTickのコードリーディング
Vue.nextTickとは？ callbackを延期し、DOMの更新サイクル後に実行します。DOM更新を待ち受けるために、いくつかのデータを変更した直後に使用してください。 VueはDOMを非同期に更新するため、「DOMを更新した後にその更新済みのDOMに対して何らかの処理をする」といったような場面でnextTickが役立ちます。 // single file component <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'default' } }, mounted() { this.message = 'hello'; console.log(this.$el.textContent); // default この時点ではまだD
Vue.jsでページ番号付きのページネーションをつくる
以前、『Vue.jsだけでページナビゲーション（ページネーション）をつくる』という記事を投稿した。 それをちょっと改良してページ番号付きのページネーションをつくってみた。 普通のページネーションをつくる場合は、以下の記事を参考にしてほしい。 追記: 2017/10/26 8:00 当記事のVue.jsのバージョンはv0.12と古いため、新しいバージョンで書き直した。 Vue@2.x+系は、以下の記事を参照してほしい。 ページ番号付きのページネーションをつくる 前回からレベルアップしたポイントは、以下のとおり。 ページ番号クリックで、そのページに移動する処理を追加 最初のページ、最後のページに移動する処理を追加 ※今回は、Bootstrapを使っています。そのため見た目がちょっと変わります。 <!doctype html> <html lang="ja"> <head> <meta char
Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件 - Qiita
はじめに 今流行りのJSフレームワークであるNuxt.js（ベースはVue.js）に、これまた今流行りのUIフレームワークであるBulmaを組み込む方法を試していたら、今までどんなに勉強してもイマイチよくわからなかったVuexストアの役割がストンと腑に落ちたというアハ体験をしましたので、みなさんと共有したいと思います 前提条件 macOS High Sierra v10.13.3 node.js v9.7.1 npm v5.7.1 yarn v1.5.1 node.js以下については、Homebrewを使ってインストールしました 新規プロジェクトを生成する create-nuxt-appコマンドを使います プロジェクト名はavocadoとします。特に意味はありません # これは以下のコマンド2つと同じ意味です yarn create nuxt-app avocado # 1/2 creat
Vue CLI を使わずに Vue のユニットテストを実行できるようにする - 30歳からのプログラミング
Vueのユニットテストを書こうと思い調べてみたが、ざっと読んだところ、Vue CLI の利用を前提にしている文書が多かった。 だが現実的には、何らかの理由で Vue CLI を使わない、使っていないというケースも多いはず。 そこで、Vue CLI を使わない環境でユニットテストを導入する方法を調べた。 テストフレームワークはJest、アサーションライブラリはpower-assertを導入する。 使っているライブラリのバージョンは以下。 @babel/core@7.1.6 @babel/preset-env@7.1.6 @vue/test-utils@1.0.0-beta.25 babel-core@7.0.0-bridge.0 babel-jest@23.6.0 babel-preset-power-assert@3.0.0 jest@23.6.0 power-assert@1.6.1 v
マークアップエンジニアがVue.jsにチャレンジしてじゃんけんゲームを作ってみました。｜株式会社アクトゼロ｜クリエイティブブログ
エンジニアのタケヨシです。 名前だけでも覚えて帰ってください。 この記事は JavaScript Advent Calendar 2016 19日目の記事です。 普段からJSはjQueryを使って書いてはいるのですが、近年のフレームワーク、ライブラリには全然触れていなかったので、今年は少しづつでもいいから触ってみようと思いBackbone.js,Angular2,Vue.jsなどのチュートリアルをやって現在も勉強中です。 そこで今回は勉強も兼ねて、シンプルなじゃんけんゲームを作ってみたので、作成したものの紹介とWebサイト制作のJSとの違いなど感じたことをまとめてみました。 今回はVue.js v2.0で作ってみました。 Vue.js v2.0は10/1リリースされたようです。自分は1にも触れていなかったのですが、公式サイトを見たところ既にドキュメントが日本語なので、学ぶハードルの1つであ
Firebase × Vue.js で サクッとリアルタイムに反映される掲示板を作る · tanaken.me
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>board_app</title> <link href="index.css" rel="stylesheet"> </head> <body> <div id="board"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="main.js"></script> </body> </html> <div id="board"> <h2>掲示板</h2> <ul class="lists" style="list-style-type: none"> <board-list v-for="list in li
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IT初心者スキルアップ応援ブログ
vue-ssr-test/guide/ja.md at master · nkzttt/vue-ssr-test
たのしいWeb｜Webのことを中心に発信
Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜