vueフォームバインディングとコンポーネント

9258 ワード

一、双方向データバインディングとは何ですか？
Vue.jsはMV VMフレーム、つまりデータ双方向バインディングであり、データが変化するとビューも変化します。ビューが変化すると、データも同期して変化します。これもVue.jsの真髄です。
の注意すべきことは、データ双方向結合ということは、UIコントロールにとって非UIコントロールがデータ双方向バインディングに関与しないことである。一方向データバインディングは状態管理ツールを使用する前提である。もし私たちがvue xを使うと、データストリームも一つの項目です。この時は双方向データバインディングと衝突します。
1、なぜデータの双方向バインディングを実現しますか？
Vue.jsにおいて、vuexを使うと、実際のデータはまだ一方的であり、データ双方向結合というのは、UIコントロールを使っています。私たちがフォームを処理するために、Vue.jsの双方向データを結合して使うととても快適です。つまり、両方は互いに反発しないで、グローバルデータフローに単一の項目を使って、追跡しやすいです。ローカルデータストリームは双方向を使用して、簡単に操作できます。
二、フォーム内で双方向データバインディングを使用する
v-modelコマンドを使ってフォームと要素に双方向データバインディングを作成できます。コントロールの種類によって自動的に正しい方法を選択して要素を更新します。ちょっと不思議ですが、v-modelは本質的には文法飴にすぎません。これは、ユーザーの入力イベントをモニターしてデータを更新し、いくつかの極端なシーンを特殊処理する。
v-modelはすべてのフォーム要素のvalue、checked、selected特性の初期値を無視して、いつもVueインスタンスのデータをデータソースとして扱うことに注意してください。JavaScriptを通じてコンポーネントのdataオプションに初期値を宣言するべきです。
1、1行テキスト


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
       ：<input type="text" v-model="message" value="hello">{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      message:""
    }
  });
</script>
</body>
</html>

2、複数行のテキスト


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
      ：<textarea v-model="pan"></textarea>&nbsp;&nbsp;     ：{{pan}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      pan:"Hello hello!"
    }
  });
</script>
</body>
</html>

3、シングルチェックボックス


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
      ：
  <input type="checkbox" id="checkbox" v-model="checked">
  &nbsp;&nbsp;
  <label for="checkbox">{{checked}}</label>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      checked:false
    }
  });
</script>
</body>
</html>

4、マルチチェックボックス


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
      ：
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="jack">Jack</label>
  <input type="checkbox" id="join" value="Join" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="join">Jack</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="mike">Mike</label>
  <span>    ：{{checkedNames}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      checkedNames:[]
    }
  });
</script>
</body>
</html>

5、ラジオボタン


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
       
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <span>    ：{{picked}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      picked:'Two'
    }
  });
</script>
</body>
</html>

6、フレームを下げる


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

     :
  <select v-model="pan">
    <option value="" disabled>---   ---</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
  <span>value:{{pan}}</span>



</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      pan:"A"
    }
  });
</script>
</body>
</html>

注意：v-model表現の初期値はオプションにマッチしませんでした。要素は「選択されていません」状態として描画されます。iOSでは、最初のオプションを選択することができなくなります。この場合、iOSはchangeイベントをトリガしません。したがって、上記のように、値が空の無効オプションを提供することをオススメします。
三、何がコンポーネントですか？

コンポーネントは多重化可能なVueの例であり、言い換えれば、繰り返し使用できるテンプレートのセットであり、JSTLのカスタムラベル、Thymelealのth：fragmentなどのフレームとは異曲同工法であり、通常、アプリケーションは1本のネスティングされたコンポーネントツリーの形で構成される：

は、例えば、ページの端、サイドバー、コンテンツエリアなどのコンポーネントがあり、各コンポーネントは、他のナビゲーションリンク、ブログなどのコンポーネントを含んでいます。

1、最初のVueコンポーネント
実際の開発では、以下のようにコンポーネントを開発するのではなく、vue-cliを使って作成し、vueテンプレートファイルを開発しています。
Vue.com mponent()を使ってコンポーネントを登録します。フォーマットは以下の通りです。


<div id="app">
 <pan></pan>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  //     
  Vue.component("pan",{
    
    template:'<li>Hello</li>'

  });
  //    Vue
  var vm = new Vue({
    el:"#app",
  });
</script>

説明:

Vue.com mponent()：登録コンポーネント

pan：カスタムコンポーネントの名前

template：コンポーネントのテンプレート

2、props属性を使ってパラメータを伝える
上のようにコンポーネントを使うと意味がありません。だから、私たちはパラメータをコンポーネントに渡す必要があります。この時はprops属性を使う必要があります。
注意：デフォルト規則ではprops属性の値は大文字にできません。


<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<div id="app">
  <!--  ，        ：props-->
  <cpn v-for="item in items" v-bind:itemChild="item"/>
</div>


<!--1.  vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  //     vue  component  
  Vue.component("cpn",{
    props: ['itemChild'],
    template: `<li>{{itemChild}}</li>`
  })
  var vm = new Vue({
    el: '#app',
    data: {
      items: ['   ','    ','    ']
    }
  });
</script>
</body>
</html>

説明:

v-for=「item in items」：Vueの例で定義されているitemsという配列を巡回して、同じ数のコンポーネント

を作成します。

v-bind：itedChild=「item」：巡回したアイテムをコンポーネントに結合するpropsをitem属性と定義する。左のアイテムはpropsで定義された属性名で、右のアイテムはitem in itemsで巡回されたアイテムの値

です。
以上は、vueフォームバインディングとコンポーネントの詳細な内容を詳細に理解し、より多くのvueフォームバインディングとコンポーネントの資料については、他の関連記事に注目してください。

原生jsは星の点滅効果を実現します。

typspcriptを使わないで、どのようにタイプを使って機能を強めますか？