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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
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
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
js跳转页面方法总结
2014/01/29 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
暑期实践思想汇报
2014/01/06 职场文书
作风年建设汇报材料
2014/08/14 职场文书
施工安全协议书
2016/03/22 职场文书
2019个人工作总结
2019/06/21 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技