コンポーネントとは何ですか？
コンポーネントは、vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張し、再利用可能なコードをカプセル化できます。より高いレベルでは、コンポーネントはカスタム要素であり、Vue.jsのコンパイラは特別な機能を追加します。場合によっては、コンポーネントは、IS機能とともに拡張されたネイティブHTML要素の形式でもあります。
次に、VUEJS一元配置結合、双方向結合、リストレンダリング、および応答関数の基本的な知識を紹介します。具体的な詳細は次のとおりです。
（i）一元配置結合
<div id = "app"> {{message}} </div> <script> new vue（{el： '＃app'、data：{message： 'hello vue.js！'}}）</script>Binding、バインディング、バインディングID = APPタグを意味する必要があります
また、以下に変更することもできます。
<div> {{message}} </div>el： '.app'、
同じくらい効果的です。
しかし、複数の場合、それは最初のものでのみ機能します。
<div> {{message}} </div> <div> {{message}} </div> hello vue.js！{{message}}dataデータのメッセージ変数は、{{message}の値を表します
（2）双方向結合
<div id = "app"> {{message}} <br/> <入力v-model = "message"/> </div> <script> new vue（{el： '＃app'、data：{message： 'hello vue.js！'}}）</scrip>効果は次のとおりです。
intiral初期値は入力入力ボックスにあり、値はデータのメッセージ属性の値です。
inuver入力ボックスの値を変更すると、外部値に影響を与える可能性があります。
（iii）関数の戻り値
<div id = "app"> {{message（）}} <br/> <入力v-model = "message（）"/> </div> <script> new vue（{el： '＃app'、data：{message：function（）{return 'hello vue.js！}}}）</>>>>>>>効果：
sutput出力値は、メッセージの返品値でもあります。
dis延長：双方向のバインディングを失う！
（iv）レンダリングリスト
<div id = "app"> <ul> <li v-for = "list in todos"> {{list.text}} </li> </ul> </div> <script> new vue（{el： '＃app'、data：{todos：[{text： "1st"}、{text： "2nd"}、{3rd "v-forのリストは、inのi inに似ています
個人的に、
todosのリストは、Todosのリストのように理解できます
②次に、次の行のリストをtodos [list] .textとして理解する
次に、このv-forタグはどこにあり、複数回コピーされます。
（v）ユーザー入力を処理します
<div id = "app"> <input v-model = "message"> <input type = "button" value = "value +1" v-on：click = "add"/> <入力タイプ= "ボタン" value = "value-1" v-on： "minus"/> <入力タイプ= "ボタン" value = "reset"/> v-on： "reset"メッセージ：1} {add：function（）{this.message ++;効果：
inuvent入力ボックスの値については、[追加]ボタンを1回クリックすると、値は+1になります。
shand nanなど、通常の式が誤って追加されている場合のように、結果が返されます。
dataデータのメッセージの値は初期値です。
somasメソッドは、コンマで区切られた関数のコレクションです。
value値を取得するときは、これを追加します。たとえば、this.messageはメッセージの値を取得します。
（vi）多機能
<div id = "app"> <input v-model = "val" v-on：keypress.enter = "addtolist"> <ul> <li v-for = "val in values"> {{val.val}} <入力タイプ= "ボタン" Value = "delete" v-on：click = "removelist（$ index）"データ：{1 "、値：[]} {var val.trim（））。 }、removelist：function（index）{this.values.splice（index、1）}}）</script>効果：
amyerive初の入力ボックスの値は1です。
punting入力ボックスのENTERを押して、入力ボックスのコンテンツを数値に変換し、リストに追加します。リスト内の変換された数字と削除ボタン、および入力ボックスの値は、数値に変換されて追加された値に変更されます。
写真に示されているように：
addilow彼の追加は、双方向のバインディングを使用し、データの値の配列に入力値を押してから、レンダリングリストの効果を使用して、複数の行の出力を出力します。
ボタンタグに、関数のパラメーター名にパラメーターが与えられます。これは行のインデックスであり、パラメーター名は$ indexです
tagタグでは、トリガーされた関数の関数名をブラケットで、または括弧なしで追加できます。実際の測定には効果がないようです。
（7）タグとAPIの概要（1）
①{{変数名}}
これはバウンド変数を表します。呼び出すときは変数名が必要です
②v-model =”変数”
双方向の結合を使用します。入力にタイプが追加されていない場合、それはテキストです。タイプが追加されている場合、それはタイプです。たとえば、次のようになります。
<入力v-model = "date" type = "date"/> <li> {{date}} </li>日付タイプの入力ボックスの値は、LIタグによって表示されるコンテンツと一緒にバインドされます。
③V-on：click =” function name”
この関数は、クリックされたときにトリガーされます。 $インデックスは、インデックスを表すパラメーターとして使用され、インデックス値は0から始まります。
④V-For
アレイコンテンツが更新されると、V-Modelと同様に、双方向のバウンドがリアルタイムで更新されます。
声明のforと同様に、それは何度も使用されています
⑤V-on：イベント
つまり、トリガーされたイベント、クリック（クリック）、キープレス（クリック）があります
イベントに続いて、keypress.enterがキャリッジリターン、keypress.spaceなどのより具体的なものが続くことができます。
もっと見る必要があります
⑥新しいvue
Vueの新しいインスタンスによって、このインスタンスにパラメーターとしてオブジェクトを渡します。
で：
Elはバウンドテンプレートを意味します（最初のバウンドとのみ一致します）
データはデータを表します。データは、たとえばv-modelまたは{{variable name}}で直接使用できます。
方法
function関数内の変数を呼び出します
これにより、variable name、例：
データ：{val： "1"、values：[]}、method：{addtolist：function（）{console.log（this.val）;これは、上記のdata.valです。これはhtmlの{{{val}}でもあり、v-model = "val"ですが、そうではありません
<li v-for = "val in values"> {{val.val}} <input type = "button" value = "delete" v-on：click = "removelist（$ index）"/> </li>理由に関しては、ここのValはV-Forの範囲内にあると個人的には、Val in ValのValがスコープチェーンの優先度が高いと考えています。
上記は、編集者によって紹介されたVuejsの最初の入門チュートリアルの詳細な説明です（一方向のバインディング、双方向のバインディング、リストレンダリング、応答関数）。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！