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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
全球精选男装和家居用品:Article
2020/04/13 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
入职担保书怎么写
2014/05/12 职场文书
联谊活动总结
2014/08/28 职场文书
党员证明模板
2015/06/19 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书