タグ

ブックマーク / v2.ja.vuejs.org (5)

  • インストール — Vue.js

    用語 完全: コンパイラとランタイムの両方が含まれたビルドです。 コンパイラ: テンプレート文字列を JavaScript レンダリング関数にコンパイルするためのコードです。 ランタイム: Vue インスタンスの作成やレンダリング、仮想 DOM の変更などのためのコードです。基的にコンパイラを除く全てのものです。 UMD: UMD ビルドは <script> タグによってブラウザに直接利用されます。https://cdn.jsdelivr.net/npm/vue の jsDelivr CDN からの既定のファイルは ランタイム + コンパイラ UMD ビルド (vue.js) です。 CommonJS: CommonJS ビルドは browserify や webpack 1 のような古いバンドラでの利用を意図しています。これらのバンドラ (pkg.main) のための既定のファイルはラ

    インストール — Vue.js
    tvsk
    tvsk 2018/10/31
    コンパイラ含むビルド と ランタイムのみのビルドの使い分け。通常はランタイムのみで十分。templateオプションに文字列を渡す場合はコンパイラ含むビルドが必要。
  • スタイルガイド - Vue.js

    最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基的に JavaScriptHTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません

    スタイルガイド - Vue.js
    tvsk
    tvsk 2018/06/12
    スタイルガイド
  • メソッドとイベントハンドリング - vue.js

    インラインメソッドハンドラメソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定することもできます: <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) 結果: 時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な $event 変数を使うことでメソッドに DOM イベントを渡すことができます: <button v-on:click=

    メソッドとイベントハンドリング - vue.js
    tvsk
    tvsk 2017/09/19
    「なぜ HTML にリスナを記述するのですか」
  • 条件付きレンダリング — Vue.js

    v-ifv-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。 <h1 v-if="awesome">Vue is awesome!</h1> これは、v-else で “else ブロック” を追加することも可能です: <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> テンプレートでの v-if による条件グループv-if はディレクティブなので、単一の要素に付加する必要があります。しかし、1 要素よりも多くの要素と切り替えたい場合はどうでしょうか?このケースでは、非表示ラッパー (wrapper) として提供される、<template> 要素で v-if を使用できます。最終的に描画される結果は、<template> 要

    条件付きレンダリング — Vue.js
    tvsk
    tvsk 2017/06/30
    “一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。”
  • Enter/Leave とトランジション一覧 — Vue.js

    ガイド 基的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ

    Enter/Leave とトランジション一覧 — Vue.js
    tvsk
    tvsk 2016/04/19
    Vue.js は animate.css との結合が、標準でサポ―トされている。
  • 1