Vue2.0 データの双方向バインディングとフォームブートストラップ + Vue コンポーネント-jsチュートリアル-php.cn

Vue2.0 データの双方向バインディングとフォームブートストラップ + Vue コンポーネント

高洛峰

リリース： 2017-02-28 14:11:31

オリジナル

2660 人が閲覧しました

最近vueを使っているのですが、とても使いやすいと思います。

まず、例としてデータの双方向バインディングを見てみましょう

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo1</title>
</head>
<body>
  <p id="app">
{{ name }}
    <input type="text" v-model="name">
  </p>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
  new Vue({
    el: &#39;#app&#39;,
    data: {
      name: &#39;&#39;
    },
    watch: {
      name: function () {
        console.log(this.name);
      }
    }
  });
</script>
</html>

ログイン後にコピー

Vue2.0 データの双方向バインディングとフォームブートストラップ + Vue コンポーネント

vue内のすべてのデータはdataで定義されており、

elはマウント要素を参照し、

watch は、特定のデータの変更を検出できる場所です。

v-model=“name” はデータ内の名前データにバインドされており、入力ボックスの値が変更されると、データ内の名前も変更されることになります。つまり、{{name}} です。もちろん、私のようにログを記録することもできます。どれも可能です。

もちろんあまり実用的ではないかもしれませんが、公式サイトでも紹介されているので、私が仕事でどのように使っているかについてお話しましょう

Vue2.0 データの双方向バインディングとフォームブートストラップ + Vue コンポーネント

ここで必要なのは、フォーム内のすべての値を取得することです、はい

 let service = $(&#39;.vendor&#39;).val();
        let vendor = document.getElementsByClassName(&#39;vendor&#39;)[0].value;

ログイン後にコピー

しかし、これでは vue の双方向バインディングを取得する利点が完全に失われます。では、どうすればよいでしょうか?

import service from &#39;./components/service.vue&#39;;
  import $ from &#39;jquery&#39;;
  export default {
    data () {
      return {
        resultData: &#39;&#39;,
        vendor: &#39;&#39;,
        dType: &#39;&#39;,
        services: [service],
        items: [service],
        device: &#39;&#39;,
        dDesc: &#39;&#39;
      }
    },
    watch: {
      services () {
        console.log(this.services);
      },
      items (val) {
        this.items = val;
        console.log(this.items);
      }
    },
    components: {
      service
    },
    methods: {
      addService (component) {
        this.items.push(component);
      },
      childServicesChange (val) {
        this.services = val;
      },
      commit () {
        console.log(&#39;commit&#39;);
        let device = {
          "type": &#39;urn:&#39; + this.vendor + &#39;:device:&#39; + this.dType + &#39;:0000&#39;,
          "description": this.dDesc,
          "services": this.items
        };

ログイン後にコピー

ほら、私は this.vendor を直接使用しただけです。ベンダーはデータ内で定義されており、2 つの方向で v-model にもバインドされています

<template>
  <p class="devDesc">

ログイン後にコピー

デバイスの説明

<form class="form-horizontal" role="form" ref="form" id="form">
    <p class="form-group">
      <label for="vendor" class="col-sm-2 control-label text-left">vendor:</label>
      <p class="col-sm-2">
        <input type="text" class="form-control vendor" id="vendor" v-model="vendor" control-label name="vendor">
      </p>
    </p>
    <p class="form-group">
      <label for="dType" class="col-sm-2 control-label text-left">Type:</label>
      <p class="col-sm-2">
        <input type="text" class="form-control dType" id="dType" v-model="dType" control-label name="dType">
      </p>
    </p>
    <p class="form-group">
      <label for="dDesc" class="col-sm-2 control-label text-left">description:</label>
      <p class="col-sm-2">
        <input type="text" class="form-control dDesc" id="dDesc" v-model="dDesc" control-label name="dDesc">
      </p>
    </p>
      <!--<serList class="serListPad" :services="services" @services-change="servicesChange">-->
      <!--</serList>-->
      <!--发现这个serList不用抽出来组件-->
    <p class="serList serListPad">
      <section class="serList-section">
          <span class="span-serList">service List</span>
          <button type="button" class="btn btn-default btn-sm" @click="addService(service)">
            <span class="glyphicon glyphicon-plus"></span>
          </button>
      </section>
      <!--<service v-for="item in items" :items="items" :myService="myService" @child-services-change="childServicesChange"></service>-->
      <p v-for="service in services">
        <service v-for="item in items" :items="items" :service="service" @child-services-change="childServicesChange"></service>
      </p>
    </p>
    </form>
    <button class="btn btn-info" @click="commit">commit</button>
    <button class="btn btn-success">save</button>
  </p>
</template>

ログイン後にコピー

。

Vue2.0 データの双方向バインディングとフォームブートストラップ + Vue コンポーネント