VUE专题（一）vue2.0数据双向绑定 +表单bootstrap+vue组件

vue.png

很久没有动手写过文章了，今天推送有3个人喜欢了我的文章，我很是惊讶，毕竟这么久没更了。说明我写的东西还是对大家有帮助的。

Paste_Image.png

最近一直在用vue，觉得确实是好用。
一，拿数据的双向绑定来说吧

 
 
 
 
 
 
 

 
{{ name }}
 
 
 
 
 
 

log

vue中的所有数据都是在data中定义的，
el是指的挂载的元素，
watch 是我可以检测某个数据的变化。
v-model=“name” 就是与data中的name数据绑定，input框中的值变，那么data中的name也会变，我们可以通过差值操作，也就是{{name}}来看到变化，当然也可以像我一样打log。都是可以的。

当然这样也许还不是很实用，官网上也是这么介绍的，那么就说我在工作中是怎么用的吧

表单

现在我的需求是要得到我表单里边的所有value ，我们也许可以

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

但是这样就完全没有get到vue双向绑定的好处了，那么我们该怎么做呢？

import service from './components/service.vue';
 import $ from 'jquery';
 
 
export default {
    data () {
        return {
            resultData: '',
            vendor: '',
            dType: '',
            services: [service],
            items: [service],
            device: '',
            dDesc: ''
        }
    },
    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('commit');
            let device = {
                "type": 'urn:' + this.vendor + ':device:' +  this.dType + ':0000',
                "description": this.dDesc,
                "services": this.items
            };

看到没，我就是直接用的this.vendor， vendor是在data中定义好的，也进行了双向绑定v-model

log

今天先介绍到这里，以后会慢慢深入，下面是vue交流群，可以加下交流互相学习，共同进步。

vue.png