Vueのコンポーネントプログラミング

非単一ファイル コンポーネント

ローカル コンポーネントを登録する

現時点では、上記のコンポーネントはすべてローカル コンポーネントです. 上記のコンポーネントを使用するには、各 vue インスタンスをコンポーネントに登録する必要があります. この時点で別の Vue インスタンス vms を作成すると、このインスタンスはコンポーネントに登録されません.コンポーネントを直接使用する場合:


この時点で、コンソールに「コンポーネントは正しく登録されていますか?」というエラーが報告されます。再帰的なコンポーネントの場合は、必ず「名前」オプションを指定してください' (翻訳済み)
この時点で、グローバル コンポーネントを登録し、vms にコンポーネントを登録せずに、グローバル コンポーネントを呼び出して試します


。時間、ページを観察すると、グローバルコンポーネントが正常に参照され、コンポーネントがvmsインスタンスに登録されていないことがわかります

Vue でコンポーネントを使用する際の 3 つの主要な手順の簡単な要約
. 1. コンポーネントを定義する (
コンポーネントを作成する)相違点は次のとおりです
:
1 el は使用できません 最終的に、すべてのコンポーネントは Vue インスタンスによって管理される必要があります. Vue インスタンス内の el は、提供するコンテナーを決定します. 2. データはフォームに書き込まれる必要があります
.コンポーネントの再利用時にデータ間の参照関係を回避するための機能の追加
注: テンプレートを使用してコンポーネントの構造を構成する 本体の場合、テンプレートの下にルート ノードは 1 つしか存在できません
2 コンポーネントを
登録します 1 ローカル登録: 直接渡します新しい Vue インスタンスの components オプションで定義されたコンポーネント名またはエイリアス
2 グローバル登録: Vue.component('コンポーネント名', コンポーネント)

3. コンポーネントを利用する(呼び出し元にコンポーネントタグを書く)
例えば、登録したコンポーネント名が altman の場合:

コンポーネントのネスティング

コンポーネント コンテナ ラッピング ネスティング

現時点では、他のコンポーネントをラップするアプリ コンポーネントのみを vm インスタンスに登録する必要があります。

VueComponent コンストラクター

   1 比如上面定义的altman组件本质其实是一个名为VueComponent的构造函数 并且不是程序员定义的 
   是Vue.extend生成的
   2 我们只需要些<altman/>(单闭合标签建议只在vue脚手架环境下写) 或<altman></altman> Vue解析时会帮我们创建altman组件的实例对象
   3 特别注意: 每次调用Vue.extend时返回的都是一个全新的VueComponent
   4 关于this的指向
        (1) 组件配置中:
            data函数,methods中的函数 watch的函数 computed中的函数 它们的this均是[VueComponent实例对象]
        (2) new Vue()配置中:
            data函数,methods中的函数 watch的函数 computed中的函数 它们的this均是[Vue实例对象]  
   5 VueComponent的实例对象 可以简称vc(此处简称只代表个人,组件实例对象)
      Vue的实例对象可以简称vm(此处简称只代表个人,根据vue的MVVM模型简称)  
   6 一个重要的内置关系:
     VueComponent.prototype.__proto__===Vue.prototype
     有这个关系是为了让组件实例对象(vc) 可以访问到Vue原型上的属性 方法

単一ファイル コンポーネント

現時点では、書かれたコンポーネントとページをブラウザで直接開くことはできません.

コンソールはエラーを報告します: モジュールの外で import ステートメント (翻訳後) を使用することはできません.
サフィックス .vue を持つファイルはスキャフォールディングで実行する必要があります.環境。

Vue 足場スタートアップ

The Vue scaffolding tutorial can be installed on Baidu
. It has been installed here, and the demo example can be created directly with the Vue scaffolding.

作成後、最初にコマンド npm run serve を実行して、デモが成功したかどうかを確認できます。デモが成功したら、
作成したファイルを直接コピーして置き換えることができます. デモ内のファイルを

コピーして置き換えた後起動コマンドを入力します: npm run serve
起動後に次のエラーが報告された場合

vue.config.js に lintOnSave: false のコード行を追加し、起動コマンド npm run serve を再入力して起動します。

component タグをカスタマイズしたページでref 属性
が dom 要素のインスタンスを取得すると、vue はそれを取得するための ref 属性を提供し、dom 要素で属性 ref を構成してから、$refs 属性を使用してそれを取得します。 vue インスタンス 1 要素
またはサブコンポーネントの登録参照情報を提供するために使用されます (id の置換)
2 アプリケーションは、html タグで実際の DOM 要素を取得し、コンポーネント タグでコンポーネント インスタンス オブジェクトを取得します

ページの効果を観察する

props 属性
機能: コンポーネントが外部呼び出し自体から渡されたデータを受信できるようにする
(1) 転送データ:
呼び出す場所: (2)
データを受信する
最初の方法(簡易版、制限なしで受信のみ、デフォルトは基本的に受信)文字列型です)
props: ['name']
第二の方法 (制限型)
props: { name:String, age:Number }第三の方法 (制限型、データ受信の必要性を制限、デフォルト値を指定) ) props:{ name:{ type:String,//type required:true//necessity default:'Sero' //default value } }注: props は読み取り専用で、vue の最下層は props の変更を検出します, 変更された場合, 警告が発行されます. props が受信したデータを格納するように data に data を定義してから, data 内のデータを変更することができます. このとき, props は転送ステーションの mixin に相当します( mix in)関数: 複数のコンポーネントを共有可能 構成またはメソッドを mix-in オブジェクトに抽出 使用法: (1) mix { data(){...}メソッドを定義:{...} ... }
























(2) mixin を使用
(1) グローバル mixin: Vue.mixin(xxx)
(2) ローカル mixin: mixins:['xxx']

プラグイン
関数: Vue の本質を拡張するために使用
: インストール メソッドを含むオブジェクト. インストールの最初のパラメーターは Vue であり、2 番目以降のパラメーターはプラグイン ユーザーによって渡されるデータです. プラグインを定義します
:
object.install = function (Vue, options) { // (1) グローバル フィルターを追加するVue.filter(…) // (2) Tianjian グローバル ディレクティブVue.directive(…) // (3) グローバル mixin を構成する (組み合わせ) ) Vue.mixin(…) // (4) インスタンスメソッドを追加Vue.prototype.my M method = function ( ) . . . V ue .prototype . myMethod = function(){...} Vue.prototype.







$私の方法\_\_\_\_\_=関数\left(\right)。\_\_\_\_\_\_\_..Vue.プロトタイプタイプ。\_\_\_\_\_\_\_$マイプロパティ = xxx

スコープ
機能: 複数のコンポーネントが同じスタイル名を持ち、同じ親によって参照されている場合、スタイル名の繰り返しによる競合を防ぎます
。*<style scoped></style>*