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. 结对开发训练（续）（郭林林&胡潇丹）

    本次题目:求二维数组最大连续的子数组之和. 通过前两次对问题的分析,这次在拿到题目时,我们首先与前两次题目做对比,尤其与第二次的题目相比较,这是在第二次题目上的扩展,第二次的题目是此次题目的一个特例. ...

  2. 好玩儿的Game

    1. 种类: 威佐夫游戏, Bash游戏, Nim游戏, 等. 2. 理论: 胜态一定可以通过某种策略走向必败态; 而必败态采取任何策略都将走向胜态. 用图论的话来说, 因为必败态只能走向胜态, 所以 ...

  3. 在已有 Xcode 项目中 加入Cordova框架

    转自:http://www.jianshu.com/p/656838ae92bc 我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但 ...

  4. 对文本行按特定字段排序（前N个字符或后N个字符），TCPL 练习5-17

    The C programming language 的关于文本行排序的问题有很多种要求的方式,在对每行的字段排序方面,最简单的是例如对前N个字符或者末位N个字符进行排序,更高一点的要求是,对特殊符号 ...

  5. 最快让你上手ReactiveCocoa之进阶篇

    前言 由于时间的问题,暂且只更新这么多了,后续还会持续更新本文<最快让你上手ReactiveCocoa之进阶篇>,目前只是简短的介绍了些RAC核心的一些方法,后续还需要加上MVVM+Rea ...

  6. Android性能优化典范第二季

      Google前几天刚发布了Android性能优化典范第2季的课程,一共20个短视频,包括的内容大致有:电量优化,网络优化,Wear上如何做优化,使用对象池来提高效率,LRU Cache,Bitma ...

  7. 使用call来实现继承

    function Class1(arg1,arg2) { this.name = arg1; this.pass = arg2; this.showSub = function() { return ...

  8. hadoop使用问题

    前提 环境 ubuntu 安装hadoop 已经有一段时间 1．启动的时候提示 Connection reset by peer 这个查看日志,里面有说 ssh里面某个文件的权限太大 这个ssh里修改 ...

  9. C# Lambda表达式详解，及Lambda表达式树的创建

    最近由于项目需要,刚刚学完了Action委托和Func<T>委托,发现学完了委托就必须学习lambda表达式,委托和Lambda表达式联合起来,才能充分的体现委托的便利.才能使代码更加简介 ...

  10. 字符串查找String.IndexOf

    String.indexOf的模拟实现,没想象中有多么高深的查找算法,就是最普通的遍历查找 思路:先找到第一个相同的字符,然后依次比较后面的字符,若都相等则表示查找成功 /** * 查找字符串patt ...