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. 【九度OJ】题目1061：成绩排序

    题目描述: 有N个学生的数据,将学生数据按成绩高低排序,如果成绩相同则按姓名字符的字母序排序,如果姓名的字母序也相同则按照学生的年龄排序,并输出N个学生排序后的信息. 输入: 测试数据有多组,每组输入 ...

  2. Angular概念纵览

    Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...

  3. sacc scss less

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  4. 在Ubuntu下配置舒服的Python开发环境

    Ubuntu 提供了一个良好的 Python 开发环境,但如果想使我们的开发效率最大化,还需要进行很多定制化的安装和配置.下面的是我们团队开发人员推荐的一个安装和配置步骤,基于 Ubuntu 12.0 ...

  5. iOS开发-二维码的基本使用

    二维码在生活中出现的频率越来越多了,大街小巷各个角落,它的出现更大的作用是代替功能单一的传统条形码,但是通常很多人第一次见到这个都不清楚这是干嘛用的.最初第一次见到可能就是买到的商品上有一个数字的条形 ...

  6. rdc21n（研发与设计综合讨论）博客开通了！

    rdc21n是“Research and Design Comprehensive discussioN”,其中21表示Comprehensive discussioN中间的21个字母(不包含空格), ...

  7. d3 API scale

    比例尺有很多种类型,每一种类型都有各自的方法. 常用的是linear log oridinal linear .rangeRound(): 输出的值 四舍五入 .copy():返回一个独立的副本 .t ...

  8. Linux下多路径multipath配置

    一.multipath在redhat 6.2中的基本配置: 1. 通过命令:lsmod |grep dm_multipath  检查是否正常安装成功.如果没有输出说明没有安装那么通过yum功能安装一下 ...

  9. linux-10 基本命令之查看内存使用情况- free，history,who,last

    free 命令 显示当前系统中内存的使用量情况  格式如下:free[-m/-g] 以m为单位显示当前内存的使用情况 [root@localhost /]# free -m 内存总量 已用量 可用量 ...

  10. Fedora23Server配置

    系统准备 启动网卡: sudo service network start 更新系统: sudo dnf update 远程管理: https://IP:9090/ Dnf使用: http://www ...