vue表单标签和组件的基本用法，父子组件间的通信，直接看例子吧。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <span>Welcome {{name}} join our home</span><br>
        <input type="text" v-model="name" placeholder="shannonliang" />
        <input type="checkbox" id="checkbox" v-model="checked" />
        <label for="checkbox">{{checked}}</label>
        <br>
        <span>交通工具：</span>
        <br>
        <!--:biz是向子组件传值绑定到了biz上,也可以用v-bind:biz,  "biz" 是传的值，即取的是for循环中的biz的值  -->
        <!--refreshbizlines 是自定义的一个事件类型（这个区分大小写），类似click，直接绑定到了组件上。rebizLines是触发该类型执行的自定义的方法-->
        <biz-component v-for="biz in bizs" :biz="biz" v-on:refreshbizlines="rebizLines"> </biz-component>
        <br>
        <span>{{bizLines}}</span>
        <br>

    </div>
</body>
<script type="text/javascript">
    var child = '<span><input type="checkbox" :id="biz.type" @click="addBizLines" /><label :for="biz.type">{{biz.description}}</label></span>';
    Vue.component('biz-component', { //组件的名称也区分大小写；这里注册的时候大写，html标签中就用‘-’，例如  注册：bizComponent，HTML： <biz-component>。否则就都用小写。
        // 声明 props
        props: ["biz"], //接受父组件的传值，
        // 就像 data 一样，prop 可以用在模板内
        template: child,
        methods: {
            addBizLines: function(e) { //方法名称不区分大小写
                if (e.target.checked)
                    this.$emit('refreshbizlines', e.target.id, true); //触发父组件中的自定义事件类型(refreshbizlines)绑定的方法，会调用rebizLines方法.后面传的是两个参数。
                else {
                    this.$emit('refreshbizlines', e.target.id, false);
                }
            }
        }
    });
    var app = new Vue({
        el: "#app",
        data: {
            name: "shnannon",
            checked: false,
            bizs: [{
                type: "flash",
                description: "快车"
            }, {
                type: "premium",
                description: "专车"
            }, {
                type: "bus",
                description: "巴士"
            }],
            bizLines: []
        },
        methods: {
            rebizLines: function(value, isAdd) {
                if (isAdd)
                    this.$data.bizLines.push(value);
                else {
                    this.$data.bizLines.splice(this.$data.bizLines.indexOf(value), 1); //splice(i,n,v);i表示删除的数组中开始的位置的索引(包括)，n删除的数组中的个数，v插入数组的值
                }
            }
        }
    });
</script>

</html>

2、注意

  • biz是向子组件传值绑定到了biz上,也可以用v-bind:biz,  "biz" 是传的值，即取的是for循环中的biz的值
  • refreshbizlines 是自定义的一个事件类型（这个区分大小写），类似click，直接绑定到了组件上。rebizLines是触发该类型执行的自定义的方法
  • /组件的名称也区分大小写；这里注册的时候大写，html标签中就用‘-’，例如  注册：bizComponent，HTML： <biz-component>。否则就都用小写

第四节：Vue表单标签和组件的基本用法，父子组件间的通信的更多相关文章

  1. 第五节：表单标签的用法——value绑定和修饰符

    1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如:  v-model ...

  2. web（四）html表单类标签

    表单类标签 操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...

  3. 第七节 认识SpringMVC中的表单标签

    所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当 ...

  4. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  5. springMVC(7)---表单标签

    springMVC(7)---表单标签 form标签作用                                     简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...

  6. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

  7. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. struts2：表单标签

    目录 表单标签1. form标签2. submit标签3. checkbox标签4. checkboxlist标签5. combobox标签6. doubleselect标签7. head标签8. f ...

  9. day 31 表单标签，CSS

    一. HTML表单标签 HTML表单用于搜集不同类型的用户输入,然后把数据提交给服务器处理. 常用的表单标签: 标签 作用 form 所有表单标签的根标签 input 输入标签,包括单行输入框.密码框 ...

随机推荐

  1. IE跨域访问问题

    可能出现的症状: 1.跨域无法登录. 2.同一页面请求同一域名SESSION无法获取.(SESSION_ID一直在变) 一般情况下在方法前加上以下代码: header("P3P: CP=CU ...

  2. Python 类的命名空间

    Python中类的定义其实就是执行代码块: class cc: a=0 print '+++++', print a 会直接执行print语句而不是在实例化cc时执行.执行后会生成对应的类的命名空间. ...

  3. Thinkphp内置截取字符串函数

    Thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便.调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用. 比如今天我们说的截 ...

  4. ansible 自动化(1)

    安装篇: yum安装 1.安装第三方epel源 centos 6的epel rpm -ivh http://mirrors.sohu.com/fedora-epel/6/x86_64/epel-rel ...

  5. Oracle Profile 使用

    一.目的: Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制,使用Create Profile命令创建一个Profile,用它来实现对数据库资源的限制使用,如果把该prof ...

  6. 黑马程序员——HTML表格布局

    ---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net ...

  7. TclError: no display name and no $DISPLAY environment variable

    %matplotlib inline 或 %matplotlib notebook

  8. 设计模式之美：Iterator（迭代器）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Iterator 模式结构样式代码. 实现方式(二):实现 IEnumerable 中序遍历二叉树. 实现方式(三):实现 Bi ...

  9. 【原创】GC/垃圾回收简介

    GC简介 1 GC机制 1.1 对象 从计算机的角度,装有数据的内存空间 1.2 作用 将内存垃圾的释放自动化 1.3 本质 将已经引用不到的对象视为死亡,将死亡的对象找出来并且作为垃圾进行回收 2 ...

  10. [.net 面向对象编程基础] (16) 接口

    [.net 面向对象编程基础] (16) 接口 关于“接口”一词,跟我们平常看到的电脑的硬件“接口”意义上是差不多的.拿一台电脑来说,我们从外面,可以看到他的USB接口,COM接口等,那么这些接口的目 ...