vuejs の組み込みコンポーネントには、「
」、「 」、「 」、「 」が含まれます。 "、""、""。
1 2 |
|
1 2 |
|
パラメーターには、is および inline-template が含まれます。前者は主に文字列またはカスタム コンポーネントですが、後者はブール型です。コード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
このコンポーネントの属性には、include、exclude、および max が含まれます。最初の 2 つは文字列またはこの式です。一致したコンポーネントをキャッシュするかどうかを指定します。Max は、キャッシュできるコンポーネントの最大数を表します。コード例照合では、最初にコンポーネント自体の名前オプションがチェックされ、名前オプションが使用できない場合は、そのローカル登録名 (親コンポーネントのコンポーネント オプションのキー値) と照合されます。匿名コンポーネントは照合できません。
このコンポーネントは通常、v-show、v-if、v-else-if、v-else、is、および条件を含むその他のコンポーネントと組み合わせて使用されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
css トランジションと js トランジションがあります共通属性: name: 文字列、CSS トランジション クラス名を自動的に生成するために使用されます; css:ブール型、CSS遷移クラスを使用するかどうか。デフォルトは true です。 false に設定すると、登録された JavaScript フックはコンポーネント イベントを通じてのみトリガーされます。
csstransition
enter-class、leave-class、および通常はサードパーティのアニメーションと組み合わせて使用されるその他の属性を通じてクラス名をカスタマイズすることもできます。 library;
v-enter: トランジションに入る開始状態を定義します。これは要素が挿入される前に有効になり、要素が挿入された後の次のフレームで削除されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
|
也可以在属性中声明 JavaScript 钩子函数,在钩子函数中,使用js进行动画的操作;
当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成
对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
1 2 3 4 5 6 7 8 9 10 11 |
|
Props:
tag - string - 如果未定义,则不渲染动画元素。
move-class - 覆盖移动过渡期间应用的 CSS 类。
除了 mode - 其他 attribute 和
事件:
事件和
用法:
注意,每个
1 2 3 4 5 |
|
vue的内容分发非常适合“固定部分+动态部分”的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会触发拉取更多内容的操作,因此我们可以把下拉loading做成一个有slot的插件
Props:
name - string,用于具名插槽
用法:
Props:
to - string。需要 prop,必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动
1 2 3 4 5 6 7 8 |
|
disabled - boolean。此可选属性可用于禁用
1 2 3 |
|
请注意,这将移动实际的 DOM 节点,而不是被销毁和重新创建,并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。
相关推荐:《vue.js教程》
以上がvuejs の組み込みコンポーネントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。