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 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 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
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
python类中super()和__init__()的区别
2016/10/18 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python占用的内存优化教程
2019/07/28 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
keras中的backend.clip用法
2020/05/22 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
项目专员岗位职责
2013/12/04 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server