Vue2.0 data two-way binding and form bootstrap+vue component-JS Tutorial-php.cn

Vue2.0 data two-way binding and form bootstrap+vue component

高洛峰

Release： 2017-02-28 14:11:31

Original

2615 people have browsed it

I have been using vue recently and I think it is really easy to use.

First, take the two-way binding of data as an example

<!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>

Copy after login

Vue2.0 data two-way binding and form bootstrap+vue component

All data in vue is defined in data,

el refers to the mounted element,

watch means I can detect a certain changes in data.

v-model="name" It is bound to the name data in the data. If the value in the input box changes, then the name in the data will also change. We can pass the difference Operate, that is, {{name}} to see the changes. Of course, you can also log like me. All are possible.

Of course, this may not be very practical. The official website also introduces it this way, so let’s talk about how I use it at work.

Vue2.0 data two-way binding and form bootstrap+vue component

Now I The requirement is to get all the values in my form. We may be able to get the benefits of vue two-way binding. Then What should we do?

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

Copy after login

See, I just used this.vendor directly. The vendor is defined in data and is also bound in two directions. v-model

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
        };

Copy after login

Device Description

<template>
  <p class="devDesc">

Copy after login

The above is the vue2.0 data two-way binding and form bootstrap+vue component introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. . I would also like to thank you all for your support of the PHP Chinese website!

For more articles related to vue2.0 data two-way binding and form bootstrap+vue components, please pay attention to the PHP Chinese website!

Vue2.0 data two-way binding and form bootstrap+vue component