Vueの学習日記26

1.jQuery UIフレーム
解析：jQueryのUIの状態を維持するために、多数の小さな部品が含まれている[ウィジェット]、したがって、jQueryのプラグわずかに異なるパターンを使用することが一般的です。すべてのjQueryのUIは、[ウィジェット]はそれほど長いものは、他のウィジェット[ウィジェット]を使用する方法を知っていることを学ぶために使用されるように、同じパターンを使用してウィジェット。

構成2.jQuery UIコンポーネント
分析：分析：相互作用、およびウィジェットライブラリの効果：jQueryのUIは、3つの部分に分割されます。次の
[1]の相互作用[相互作用]：インタラクション手段は[サイズ変更可能]をスケーリング含むコンテンツと関連するいくつかのマウス相互作用である、[ドロップ可]置かドラッグ[ドラッグ可能]は、[選択]を選択し、[ソート可能]などをソーティング。
[2]ウィジェット[ウィジェット]：折り畳まれたパネルを含む、主にいくつかの拡張インタフェース、[アコーディオン]、自動的に[オートコンプリート]ボタン、[ボタン]、日付ピッカー[日付ピッカー]、ダイアログ[ダイアログ]、メニュー[メニュー]、プログレスバー[プログレス]、スライダー[スライダー]、回転子[スピナー]タブ、[タブ]、ツールチップボックス[ツールヒント]というように、新しいバージョンはより多くのUIウィジェットの含まれています。
[3]エフェクトライブラリ[効果]：豊富なアニメーション効果を提供するために、アニメーションはもはやjQueryのアニメーション（）メソッドに限定。効果[効果]、表示し、[表示]、[非表示]隠された、スイッチ[切り替え]を含め、追加クラス[クラスの追加]、クラスを削除するには、クラス[トグルクラス]、変換クラス[スイッチクラス]を、切り替え、[クラスを削除します]カラーアニメーション[カラーアニメーション]など。

3.flex：1
分析を：Flexプロパティは、フレックスが成長+フレックスシュリンク+あるフレックス基礎略語。次のとおりです。

.item {
    flex: 1;
}
或
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

4.inlineフレックス
分析：インラインフレックスレイアウト要素を使用することができます。

.box{
  display: inline-flex;
}

説明：セットフレックスレイアウト後、サブエレメントフロート、クリア、および垂直整列属性が失敗します。

5.justifyコンテンツ[横方向に整列]
分析：
[1]フレックススタート：容器は、左側端部要素と整列する
要素と位置合わせされた容器の右端：[2]フレックス端
[3]中心：横コンテナ要素の中央
[4 】空間との間：保持要素間の距離は、に等しく、
保持要素の周りに同じ距離：[5]空間アラウンド

6.backgroud
分析：あなたは色、画像、および場所など、すべての背景を、定義することができます。

7.display：ブロック
解像度：この要素は、この要素の意志の前と後に改行して、ブロックレベル要素として表示されます。

8.background位置
分析：背景画像の位置背景位置プロパティを開始します。値XPOSとYPOS場合、最初の値は水平位置であり、垂直方向の位置は、第二の値です。左上隅は00です。ピクセル単位[0PX 0PX]または任意の他のCSSユニット。あなたは一つの値だけを指定した場合、他の値が50％になります。％を混合し、位置の値を指定できます。

セレクタ9.CSS>
分析：A> B Aは、すべての子要素Bを選択した要素を表します。その差にAB、ABは、すべての子孫要素を選択し、A> Bは、世代を選択します。

10.vオン命令の
構文解析：DOMイベントは、V-上の命令に耳を傾けると、トリガされたときといういくつかのJavaScriptコードを実行することができます。

辞書長11.js検査対象
解析：Object.keys辞書配列をキー、長さ辞書再取得の長さを得るために使用されます。

const dict = {a: 'aa',  b: 'bb', c: 'cc'}
Object.keys(dict).length

12.初期化EventBus
分析：初期化EventBusは、グローバルイベントバスです。

Vue.prototype.$EventBus = new Vue()

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 接收消息
EventBus.$on(channel: string, callback(payload1,…))

13.EventBus.$off()
解像度：直接呼び出しEventBus $オフ（）全てのイベントチャネルを削除するには、任意のパラメータを追加する必要はありません。

14.mutations
分析：
[1]の変異の唯一の目的は、状態の状態を変更することで
、物事を行うには、各単一の可能な方法で、[2]の変異を。

15.action
分析：突然変異と同様の作用は、それ以外は：
[1]アクションは、直接状態を変更するのではなく、突然変異を起こしました。
[2]動作は、任意の非同期操作を含むことができます。
[3]この。$ Store.dispatchプッシュアクション[非同期操作]。

16.mutation
分析：
唯一の方法は、状態ストアの[1] vuex変更が突然変異を提出しています。
[2]これ。$ Store.commitは突然変異[同期]を押してください。

17.mapGetters（）メソッドは、
解決：ローカル・コンピューティングゲッター特性にのみマップストア内mapGetters補助機能。あなたは、オブジェクト形式を使用して、別の名前ゲッタープロパティを取りたい場合。

18.vh
分析：
VHは、現在の画面可視％1の高さである[1]
[2]高さ：100VH ==高さ：100％
[3]の要素の内容が設定高さでない場合は100％、支持要素ではありませんオープン
[4]要素はないコンテンツ、セット高さがない場合：100VHを、要素が高度に一貫した伸延画面であります

19.vw
分析：
VWは1％画面の現在の幅である[1]
セット幅場合[2]：100％は、親要素の幅に設定されている幅の要素に設定されている
[3] 100vwは画面幅に見える相対的セットアップ

20.height：計算値（100％ - 40ピクセル
）分析：開発の端の移動中に、しばしば遭遇ヘッド高さが40ピクセルであり、ページヘッダの内容が除去され、カルクCSSと、ウィンドウの高さ全体を占めますそれは非常に便利です。

.container{
  height: calc(100% - 40px);
}

21.CSSは属性左
解析を：
左属性要素の左端を指定し、属性は、ブロックとその左側の境界との間のオフセットを含む要素を標的の左側境界の外縁を規定する[1]。
[2]属性静的位置の値が、次に設定した場合、左属性は影響を及ぼしません。

23.CSS3境界半径性
分析：境界半径属性は、4つの境界の最大値を指定することができる- * -複合プロパティの半径プロパティ。構文：境界半径：1-4長さ| ％/ 1-4長|％; 以下のように：
[1]長さ：定義された曲線形状。
[2]％：角の定義された形状を使用して％。
注：4つの値のそれぞれの半径の順序は次のとおり左上、右上、右下、左下。省略した場合、左下、右上は同じです。あなたは右下隅を省略した場合は、左上隅は同じです。省略した場合は、右上隅には、左上隅は同じです。

25.CSSのz-index属性
分析は、Z-index属性は、要素の重なり順を指定します。常に要素の下重ね順の前になります要素の高い積層順があります。z屈折率位置決め要素[位置：絶対位置：相対、又は位置：固定]。以下：
オート[1]：デフォルト。順序をスタッキングすることは親要素に等しいです。
[2]数：エレメントの重ね順を設定します。
[3] [継承：親要素のz-index属性から継承される所定の値。

参考文献：
[1] jQueryのUI：HTTPS：//www.jqueryui.org.cn/
[2] jQueryのAPI中国のマニュアル：HTTPS：//jqueryapi.net/
[3] Flexのレイアウト文法ます。https：// WWW .runoob.com / w3cnote /フレックスgrammar.html
[4] CSSプロパティ背景位置：HTTPS：//www.w3school.com.cn/cssref/pr_background-position.asp
CSSリファレンスマニュアル[5]：HTTPS：/ /www.runoob.com/cssref/css-reference.html

1000sprites

公開された364元の記事・ウォンの賞賛422 ・ビュー360 000 +

彼のメッセージボードの懸念

おすすめ