表单：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div1{

                width: 300px;

                height: 300px;

                margin: 0 auto;

                background: skyblue;

            }

        </style>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <h2>输入框</h2>

            <input type="text" v-model='inputText' name="" id="" value="" />

            <p>{{inputText}}</p>

            <hr />

            <h2>单选框</h2>

            <input type="radio" v-model='sex' name="sex" id="" value="男" />

            <input type="radio" v-model='sex' name="sex" id="" value="女" />

            <p>{{sex}}</p>

            <hr />

            <h2>复选框</h2>

            <input type="checkbox" v-model='fx' name="man" id="" value="男" />

            <input type="checkbox" v-model='fx' name="girl" id="" value="女" />

            <p>{{fx}}</p>

            <hr />

            <h2>选项</h2>

            <select name="city" v-model='city'>

                <option value="广州">广州</option>

                <option value="深圳">深圳</option>

                <option value="上海">上海</option>

            </select>

            <p>{{city}}</p>

            <hr />

            <textarea v-model='longtext' name="txt" rows="" cols=""></textarea>

            <p>{{longtext}}</p>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    inputText:'',

                    sex:'',

                    fx:[],

                    city:'',

                    longtext:'123'

                },

                compute:{

                }

                methods:{

                }

            })

        </script>

    </body>

</html>

组件：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <headnav user='xx'></headnav>

            <indexmain @send='changeChild'></indexmain>

            <indexfooter></indexfooter>

            <headnav :user='username'></headnav>

            <h1>{{childContent}}</h1>

        </div>

        <script src="js/indexComponent.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            Vue.component('headnav',{

                    template:'<div><h1>欢迎{{user}}</h1></div>',

                    props:['user'],

                    data:function(){

                        return {

                            msg:'headnav'

                        }

                    }

            })

            var app = new Vue({

                el:'#app',

                data:{

                    username:'隔壁老王',

                    childContent:''

                },

                methods:{

                    changeChild:function(value){

                        console.log(value)

                        this.childContent = value

                    }

                }

            })

            //组件：要想父组件传递数据给子组件，那么需要使用props

            //如果想要子组件将数据传递给父父组件，那么需要使用自定义事件，$emit(事件名称，事件内容)，进行触发，监听：@事件名称=‘要执行的函数’

        </script>

    </body>

</html>

vue表单和组件使用的更多相关文章

  1. Vue表单和组件

    一.表单 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素. <input v-model="message" ...

  2. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  4. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  5. vue_表单_组件

    表单.组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  6. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

  7. vue表单校验（三）

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  8. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  9. meta生成器 —— 表单元素组件

    手写代码? meta(json)需要手写吗?别闹,手写多麻烦呀,我这么懒怎么可能手写,这辈子都别想,所以要弄个工具出来,咱们说干就干. 这个工具,说白了本身就是一个表单,一个meta属性对应一个met ...

随机推荐

  1. Shell之变量

    目录 Shell之变量 参考 变量命名规则 变量语法规范 四种变量类型 系统变量 特殊变量 变量的使用 变量内容的删除和替换 Shell之变量

  2. web前端之浏览器： 知识汇总

    一.URL到页面 准备阶段: 输入URL,Enter进入查找 浏览器在本地查找host文件,匹配对应的IP: 找到返回浏览器并缓存 没有,则进入路由查找: 找到返回浏览器并缓存 再没有,再进入公网DN ...

  3. 【CPU】解决打开360或者Chrome浏览器CPU占用过高

    cmd 运行: RD /s /q "%USERPROFILE%\AppData\Roaming\Microsoft\Protect"

  4. js常用正则整理

    个人博客: http://mcchen.club //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.ex ...

  5. 利用Helm简化Kubernetes应用部署（2）

    目录 定义Charts  使用Helm部署Demo  Helm常用操作命令  定义Charts 回到之前的“charts”目录,我们依次进行解读并进行简单的修改. Chart.yaml 配置示例: a ...

  6. HDU - 1512 　Monkey King

    Problem Description Once in a forest, there lived N aggressive monkeys. At the beginning, they each ...

  7. OFD电子文档阅读器功能说明（采用WPF开发，永久免费）

    特别说明 ofd阅读器开发语言为c#,具有完全自主产权,没有使用第三方ofd开发包.可以根据你的需求快速定制开发.本阅读器还在开发完善阶段,如有任何问题,可以联系我QQ:13712486.博客:htt ...

  8. 前端Vue知识小白

    感觉是已好久没写博文了.今日难得有时间,便写一篇文章.此文章是关于前端知识的,我本身是后端,因工作或其他需要,便学习了前端Vue.此文章是在菜鸟教程上学习的.那么下面进入正文! 首先,Vue.js是一 ...

  9. 白话系列之实现自己简单的mvc式webapi框架

    前言:此文为极简mvc式的api框架,只当做入门api的解析方式,并且这里也不算是mvc框架,因为没有view层,毕竟现在大部分都属于前后端分离,当然也可以提供view层,因为只是将view当做文本返 ...

  10. thinkphp5框架之请求

    又看到请求这一部分,个人认为这部分是算重要的一部分 单独记一篇笔记. 0x01 request请求对象 如果要获取当前的请求信息,可以使用\think\Request类,完全开发手册中也有提到,继承系 ...