Vueシリーズ6：ダブルバインディング、コンポーネントを形成

6.1、双方向データバインディングとは

Vue.jsはMVVMフレームワークです。つまり、データの双方向バインディングです。つまり、データが変更されるとビューが変更され、ビューが変更されるとデータが同期的に変更されます。これがVue.jsの本質です。
双方向のデータバインディングについて説明する場合、UIコントロールの非UIコントロールには双方向のデータバインディングが含まれていないことに注意してください。一方向のデータバインディングは、状態管理ツールを使用するための前提条件です。vue xを使用する場合、データフローも単一アイテムであり、双方向のデータバインディングと競合します。

（1）データの双方向バインディングを実装する理由

でVue.js使用vuexする場合、データは実際には一方向です。データ双方向バインディングと呼ばれる理由は、UIコントロールに使用されるためです。フォームを処理するためにVue.js、双方向データバインディングは特に快適です。使用します。つまり、この2つは相互に排他的ではなく、1つのアイテムがグローバルデータフローで使用されるため、追跡に便利です。ローカルデータフローは双方向であり、操作が簡単です。

6.2.フォームでの双方向データバインディングの使用

ディレクティブを使用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="../js/vue.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="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"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="../js/vue.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="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });
</script>
</body>
</html>

（6）ラジオボタン

<!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="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            picked:'Two'
        }
    });
</script>
</body>
</html>

（7）ドロップダウンボックス

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    性别：
    <input type="radio" name="sex" value="男" v-model="pan">男
    <input type="radio" name="sex" value="女" v-model="pan">女
    <p>选中了：{
   
   {pan}}</p>-->

    下拉框:
    <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="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"A"
        }
    });
</script>
</body>
</html>

注：v-model式の初期値がどのオプションとも一致しない場合、メタシステムは「未選択」としてレンダリングされます。iOSでは、これによりユーザーは最初のオプションを選択できなくなります。その場合、iOSはchangeイベントを発生させないためです。したがって、上記のように空の値で無効化オプションを提供することをお勧めします。

6.3.コンポーネントとは

コンポーネントは再利用可能なVueインスタンスです。端的に言えば、再利用可能なテンプレートのセットです。JSTLカスタムタグや他のフレームワークThymelealのフレームワークに似ていth:fragmentます。通常、アプリケーションはネストされたコンポーネントツリーの形式で編成されます。

たとえば、ヘッダー、サイドバー、コンテンツ領域などのコンポーネントがあり、各コンポーネントにはナビゲーションリンク、ブログ投稿などの他のコンポーネントが含まれている場合があります。

（1）最初のVueコンポーネント

注：実際の開発では、次の方法ではなく、ファイルvue-cliを作成してvueテンプレート化することでコンポーネントを開発します。次の方法は、コンポーネントが何であるかをすべての人に理解させるためのものです。
このメソッドを使用しVue.component()てコンポーネントを登録します。形式は次のとおりです。

<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.component()：コンポーネントを登録する
pan：カスタムコンポーネントの名前
template：コンポーネントのテンプレート

（2）props属性を使用してパラメーターを渡す

上記のようなコンポーネントを使用することは意味がないため、コンポーネントにパラメータを渡してから、propsプロパティを使用する必要があります。
注：propsプロパティの値は、デフォルトのルールでは大文字にすることはできません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--组件：传递给组件中的值：props-->
  <pan v-for="item in items" v-bind:panh="item"></pan>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
    //定义组件
    Vue.component("pan",{
        props:['panh'],
        template:'<li>{
   
   {panh}}</li>'

    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","Linux","前端"]
        }
    });
</script>
</body>
</html>

説明：

v-for="item in items"Vue：インスタンスで定義された名前付きitems配列を反復処理し、同数のコンポーネントを作成します
v-bind:panh="item"：itemトラバースされたアイテムをコンポーネントで定義されたプロパティにバインドしますprops; item=記号の左側panhはprops定義されたプロパティ名であり、右側はitem in itemsトラバースされたアイテムアイテムの値です