vue2.0数据双向绑定与表单bootstrap+vue组件


Posted in Javascript onFebruary 27, 2017

最近一直在用vue,觉得确实是好用。

一,拿数据的双向绑定来说吧

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

vue2.0数据双向绑定与表单bootstrap+vue组件

vue中的所有数据都是在data中定义的,

el是指的挂载的元素,

watch 是我可以检测某个数据的变化。

v-model=“name” 就是与data中的name数据绑定,input框中的值变,那么data中的name也会变,我们可以通过差值操作,也就是{{name}}来看到变化,当然也可以像我一样打log。都是可以的。

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

vue2.0数据双向绑定与表单bootstrap+vue组件

现在我的需求是要得到我表单里边的所有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

<template>
  <div class="devDesc">

     Device Description

<form class="form-horizontal" role="form" ref="form" id="form">
    <div class="form-group">
      <label for="vendor" class="col-sm-2 control-label text-left">vendor:</label>
      <div class="col-sm-2">
        <input type="text" class="form-control vendor" id="vendor" v-model="vendor" control-label name="vendor">
      </div>
    </div>
    <div class="form-group">
      <label for="dType" class="col-sm-2 control-label text-left">Type:</label>
      <div class="col-sm-2">
        <input type="text" class="form-control dType" id="dType" v-model="dType" control-label name="dType">
      </div>
    </div>
    <div class="form-group">
      <label for="dDesc" class="col-sm-2 control-label text-left">description:</label>
      <div class="col-sm-2">
        <input type="text" class="form-control dDesc" id="dDesc" v-model="dDesc" control-label name="dDesc">
      </div>
    </div>
      <!--<serList class="serListPad" :services="services" @services-change="servicesChange">-->
      <!--</serList>-->
      <!--发现这个serList不用抽出来组件-->
    <div 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>-->
      <div v-for="service in services">
        <service v-for="item in items" :items="items" :service="service" @child-services-change="childServicesChange"></service>
      </div>
    </div>
    </form>
    <button class="btn btn-info" @click="commit">commit</button>
    <button class="btn btn-success">save</button>
  </div>
</template>

vue2.0数据双向绑定与表单bootstrap+vue组件

以上所述是小编给大家介绍的vue2.0数据双向绑定与表单bootstrap+vue组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 #Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 #Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 #Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 #Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 #Javascript
JavaScript中object和Object的区别(详解)
Feb 27 #Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 #Javascript
You might like
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
Javascript Math对象
2009/08/13 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
python简单读取大文件的方法
2016/07/01 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
python生成requirements.txt的两种方法
2019/09/18 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Spy++的使用方法及下载教程
2021/01/29 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
国际会议邀请函范文
2014/01/16 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
校运会口号
2014/06/18 职场文书
七夕活动策划方案
2014/08/16 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python