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. Fragment要点复习

    做系统时间久了,应用层的很多东西都忘了,但是基础还是得巩固,下面对fragment相关的知识点简单整理一下. 一.fragment的引入 fragment是从Android3.0(API level ...

  2. Android 断点续传 思路

    大部分http服务器本身是可以支持range字段和断点续传的.另外 http返回206字段表示支持断点续传. 但是遇到支持的服务器的时候,就需要手动去处理断点续传的功能. 客户端在请求文件的时候添加 ...

  3. oracl 创建用户

    -- Create the user create user ADMIN  default tablespace SYSTEM  temporary tablespace TEMP  profile ...

  4. iOS上简单推送通知（Push Notification）的实现

    iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...

  5. SSIS内存不足

    [SSIS.Pipeline] 信息: 缓冲区管理器检测到系统的虚拟内存不足,但无法换出任何缓冲区.考虑了 0 个缓冲区,锁定了 0 个缓冲区.或者是因未安装足够的内存或其他进程正在使用内存,以致于没 ...

  6. C++混合编程之idlcpp教程Lua篇(6)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(5) 第一篇在这 C++混合编程之idlcpp教程(一) 工程LuaTutorial4中加入了四个文件:LuaTutorial4.cpp, Tut ...

  7. unity如何显示血条（不使用NGUI）

    用unity本身自带的功能,如何显示血条? 显示血条,从资源最小化的角度,只要把一个像素的色点放大成一个矩形就足够,三个不同颜色的矩形,分别显示前景色,背景色,填充色,这样会消耗最少的显存资源. un ...

  8. linux awk 一看就懂

    awk是什么 awk是linux环境下的一个命令行工具,但是由于awk强大的能力,我们可以为awk工具传递一个字符串,该字符串的内容类似一种编程语言的语法,我们可以称其为Awk语言,而awk工具本身则 ...

  9. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

  10. 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

    Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...