Vue的组件和表单

最新推荐文章于 2021-03-11 13:16:01 发布
最新推荐文章于 2021-03-11 13:16:01 发布
阅读量105 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/chenxi67/p/10032208.html
版权

 一.表单输入绑定

1.数据的双向绑定  

　　v-model  指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <label for="username">用户名：</label>
    <input type="text" v-model="msg" id="username">
    <p>{{ msg }}</p>
    <textarea placeholder="add multiple lines" v-model='msg'></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br>
    <!--多个复选框 使用列表保存-->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    <br>
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <!--懒监听-->
    <input v-model.lazy="msg" >
    <!--数字显示-->
    <input v-model.number="age" type="number">
    <!--清除前后空格-->
    <input v-model.trim="msg">

</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'alex',
                checked: false,
                checkedNames: [],
                selected:'',
                age:0
            }

        }
    })

</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <input type="text" :value="msg" @input = 'changeHandler'>
    <p>{{ msg }}</p>
</div>
<script src="vue.js"></script>
<script>

    //Object.definePropty()
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'alex'
            }

        },
        methods:{
            changeHandler(e){
               this.msg =  e.target.value
            }
        }
    })

</script>
</body>
</html>
双向数据绑定

二.组件

1.全局组件使用

Vue.component('全局组件的名字',{
 跟new Vue() 实例化对象中的options是一样，但是要注意：
 不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {}
})
  <slot> 元素作为承载分发内容的出口

2.局部组件的使用

　　油诗： 声子 挂子 用子

　　声子

let App = {
    data(){
        return {
            
        }
    },
    template:`<div>
        
        
        </div>`
}

 　　挂子

　　　　挂载哪个组件，这个组件就是我的父组件

　　　　template中的模板一定要有一个根元素

{
 ....
 template:`<App/>`
 components:{
     //挂子
     App
 }
}

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    {{ msg }}
</div>
<script src="vue.js"></script>
<script>
    //如果仅仅是实例化vue对象中 既有el 又有template，如果template中定义模板的内容
    //        那么template模板的优先级大于el

//    App   header aside  content
//    1.声子  Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值
    let App = {
        data(){
            return {
               text:"我是日天"
            }

        },
        template:`
            <div id="a">
                <h2>{{ text }}</h2>
            </div>
        `,
        methods:{

        }
    }

    new Vue({
        el: '#app',
        data() {
            return {
                msg:'alex'
            }
        },
        //3 用子
        template: `
                <div class="app">

                 <App></App>
                </div>

            `,
        components:{
            //2.挂子
            //如果key和value一样 可以只写一个
            //App:App
            App
        }
    })

</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>
    //如果仅仅是实例化vue对象中 既有el 又有template，如果template中定义模板的内容
    //        那么template模板的优先级大于el
    //第一个参数是组件的名字，第二个参数 options参数 它是全局组件
//     <slot></slot>  slot是vue中提供的内容组件  它会去分发 内容
    Vue.component('VBtn',{
        data(){
            return {

            }
        },
        template:`<button>
            <slot></slot>

</button>`
    })

//    App   header Vaside  Vcontent
//    1.声子  Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值




    let Vheader = {
        data(){
            return {

            }
        },
        //template定义模板的内容
//        Component template should contain exactly one root element
        template:`
            <div>
                <h2>日天</h2>
                <h2>日天</h2>
                <VBtn>登录</VBtn>
                <VBtn>注册</VBtn>
                <VBtn>按钮</VBtn>
                <VBtn>提交</VBtn>

            </div>
        `
    }


    let App = {
        data(){
            return {
               text:"我是日天"
            }

        },
        template:`
            <div id="a">
                <h2>{{ text }}</h2>
                <Vheader></Vheader>
                 <VBtn>删除</VBtn>
                 <br>

            </div>
        `,
        methods:{

        },
        components:{
            Vheader
        }
    }

    new Vue({
        el: '#app',
        data() {
            return {
                msg:'alex'
            }
        },
        template:`<App />`,
        components:{
            //2.挂子
            //如果key和value一样 可以只写一个
            //App:App
            App
        }
    })

</script>
</body>
</html>
局部组件的使用更改

3.父子组件传值

　　父向子传值

　　　　1.在子组件中 使用props声明 可以直接在子组件中任意使用

　　　　2.父组件 要定义自定义的属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>
    Vue.component('VBtn', {
        data() {
            return {}
        },
        template: `<button>
            {{ id }}

        </button>`,
        props:['id']
    })
    let Vheader = {
        data() {
            return {}
        },
        //只要声明了父组件的属性，就可以使用
        props: ['msg', 'post'],
        template: `
            <div class="child">
                <h2>日天</h2>
                <h2>{{ msg }}</h2>
                <h3>{{ post.title}}</h3>
                <VBtn v-bind:id = 'post.id'></VBtn>
            </div>
        `
    }


    let App = {
        data() {
            return {
                text: "我是父组件的数据",
                post: {
                    id: 1,
                    title: 'My Journey with Vue'
                }
            }

        },
        template: `
            <div id="a">

                <Vheader :msg = 'text' v-bind:post = 'post'></Vheader>
            </div>
        `,
        methods: {},
        components: {
            Vheader
        }
    }

    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'alex'
            }
        },
        template: `<App />`,
        components: {

            App
        }
    })

</script>
</body>
</html>　　

　　子向父传值

　　　　1、子组件中 通过$emit()触发父组件中自定义的事件

　　　　2、父组件中声明自定义的事件介绍

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>
    Vue.component('VBtn', {
        data() {
            return {}
        },
        template: `<button @click = 'clickHandler'>
            {{ id }}

        </button>`,
        props:['id'],
        methods:{
            clickHandler(){
                //每个组件中的this指的是当前组件对象
                console.log(this);
                this.id++;
//                this.$emit('父组件声明自定义的事件','传值');
                this.$emit('clickHandler',this.id);


            }
        }
    })
    let Vheader = {
        data() {
            return {}
        },
        //只要声明了父组件的属性，就可以使用
        props: ['msg', 'post'],
        template: `
            <div class="child">
                <h1>我是header组件</h1>
                <h2>日天</h2>
                <h2>{{ msg }}</h2>
                <h3>{{ post.title}}</h3>
                <VBtn v-bind:id = 'post.id' @clickHandler="clickHandler"></VBtn>
            </div>
        `,
        methods:{
          clickHandler(val){
              alert(val);
              this.$emit('fatherHandler',val)
          }
        },
         created(){
          console.log(this);
        },
    }


    let App = {
        data() {
            return {
                text: "我是父组件的数据",
                post: {
                    id: 1,
                    title: 'My Journey with Vue'
                }
            }

        },
        template: `
            <div id="a">
                我是父组件的 {{post.id}}
                <Vheader :msg = 'text' v-bind:post = 'post' @fatherHandler = 'father_handler'></Vheader>
            </div>
        `,
        methods: {
            father_handler(val){
                console.log(val);

                this.post.id = val;
            }
        },
        components: {
            Vheader
        },
         created(){
          console.log(this);
        },
    }

    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'alex'
            }
        },
        created(){
          console.log(this);
        },
        template: `<App />`,
        components: {

            App
        }
    })

</script>
</body>
</html>

4.平行组件传值

　　使用$on()和$emit() 绑定的是同一个实例化对象

　　A===>B组件传值

　　1、B组件中要使用$on(‘事件的名字’,function(){})

　　2、A组件中使用$emit('事件的名字',值)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <App/>
</div>
<script src="vue.js"></script>
<script>
    let bus = new Vue();
    //A===》B   B要声明事件  $on('事件的名字',function(val){})  A要触发事件 $emit('A组件中声明的事件名','值')

    //前提 这两个方法必须绑定在同一个实例化对象（bus）
    Vue.component('Test2', {
        data() {
            return {
                text:''
            }
        },
        template: `
            <h2>{{ text }}</h2>
        `,
        methods: {

        },
        created(){
            bus.$on('testData', (val)=> {
                alert(val);
                this.text = val;
            })
        }
    })
    Vue.component('Test', {
        data() {
            return {
                msg: '我是子组件的数据'
            }
        },
        props:['txt'],
        template: `
            <button @click = 'clickHandler'>{{ txt }}</button>
        `,
        methods: {
            clickHandler() {

                bus.$emit('testData',this.msg)
            }
        }
    })

    let Vheader = {
        data() {
            return {
                txt:'wusir'
            }

        },
        template: `
            <div class="header">

                <Test :txt = 'txt'/>
                <Test2 />

            </div>
        `
    }
    let App = {
        data() {
            return {}

        },
        template: `
            <div class="app">

                 <Vheader />

            </div>
        `,
        components: {
            Vheader
        }
    }
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        components: {
            App
        }
    })

</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/chenxi67/p/10032208.html

weixin_30421525
关注
vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
皮皮王的专栏
01-10 1330
<el-cascader :options="optionsWithDisabled" @change="selChange" size="40" placeholder="请选择网上银行类别" filterable=true v-model="ruleForm.selValue" style="margin-left:-80px">
表单组件定义
iPlatForm的博客
02-06 2346
基于新构思和JQuery控件而开发的平台，该功能模块用于定义表单组件的属性,表单组件包括文本输入框、下拉列表选择框、下拉日期选择框、下拉日期时间选择框等。界面左区域为表单组件树，显示所定义的表单组件类实例树，有三种过滤形式： 组件类：过滤项有文本输入框、下拉列表选择框、下拉日期选择框、下拉日期时间选择框等，选择后触发查询。 分类名：所有组件、未设置模块组件和所有定义的Min
Vue学习之表单与组件篇
cug-jdc的博客
09-09 878
Vue学习之表单与组件篇Vue表单Vue组件Vue自定义Vue自定义事件Vue自定义指令 Vue表单 这一篇介绍 Vue.js 表单上的应用。我们可以用 v-model 指令在表单控件元素上创建双向数据绑定，如下所示的原理图。v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框 下面实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定： <div id="app"> <p>input 元素：</p> &lt
Vue表单和组件
qq_47443027的博客
03-11 871
一、表单 　　v-model 指令在表单控件元素上创建双向数据绑定，v-model 会根据控件类型自动选取正确的方法来更新元素。 <input v-model="message" placeholder="编辑我……"> <p>消息是: {{ message }}</p> 1、复选框 　　复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组： <div id="app"> <p>单个复选框：</p> <in
HTML 表单组件
Aseveng的博客
10-31 1054
Insert title here <!-- 如果要给服务端提交数据 表单中的组件必须有name和value属性 用于给服务端获取数据 --> 输入名称: 输入密码: 选择性别: 男 女 选择技术: Java html CSS 选择文件: 一个图片: 隐藏组件: 一个按钮: --选择国家- 美
vue select 单独组件实现
小米粒的博客
06-05 612
父组件： <systemName :systemNameList="systemNameList" :systemNameChecked="systemNameChecked" @choonseSystemName="changeSystemName"></systemName> :systemNameList="systemNameList" 初始化List用的 :systemNameChecked="systemNameChecked" 选中回显用的 @choo...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
vue复合组件实现注册表单功能
08-28
Vue.js 是一款流行的前端框架，它提倡组件化的开发方式，使得开发者可以将复杂的应用拆分成一个个独立、可复用的组件。在本示例中，我们将深入探讨如何使用Vue.js来实现一个复合组件，用于创建一个注册表单。 首先...
vue动态绑定组件子父组件多表单验证功能的实现代码
08-27
5. 子父组件表单验证：使用 Vue 的验证规则来实现子父组件之间的验证，提高验证的灵活性和高效性。 详细说明： Vue 动态绑定组件子父组件多表单验证功能的实现代码主要是使用 Vue 的核心功能组件来实现动态绑定...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
vue3+ts 表单和表格配置化组件
最新发布
10-26
"vue3+ts 表单和表格配置化组件"这一主题，主要关注的是如何利用Vue3、TypeScript以及Element Plus来创建高度可配置的表单和表格组件。这些组件通常用于处理动态数据，允许开发者通过配置对象来定义表单字段或表格列...
利用Vue v-model实现一个自定义的表单组件
08-30
本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
vue-----表单与组件
weixin_33895657的博客
03-19 74
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue--表单与组件</title> &...
Vue中表单组件的实现
weixin_43852916的博客
02-23 511
强调vue语法 createElement 函数是用来生成 HTML DOM 元素的 Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。 Vue 的mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前...
Vue.js入门之表单和组件基础
Emoji的博客
04-25 1949
前面几期整理，详见博客 Vue.js框架入门之vue简介和基本语法(一） Vue.js框架入门之基本语法(二) Vue.js框架入门之条件渲染、列表渲染、事件处理 现在来续写第四期—Vue.js的表单和组件基础 一、表单输入绑定 这节我们为大家介绍 Vue.js 表单上的应用。 我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。 ...
Vue--表单控件
博客
11-19 1829
不同表单控件绑定 v-model 获得的值 textarea： 略 input[type=’text’]： 略 单个input[type=’checkbox’]： 值为boolean类型，true或false 多个input[type=’checkbox’]： 多个input的 v-model 绑定同一个属性 多个input的value不能相同，否则相同value的box同时被选中 绑定属性的
基于Vue构造器创建Form组件的通用解决方案
li420520的博客
11-02 2532
在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。 在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如 &lt;template&gt; &lt;header&gt;&lt;/header&gt; ... &lt;...
element form组件封装
热门推荐
追逐的活
05-15 1万+
组件：searchForm.vue <!-- 搜索表单 --> <template> <div class="ces-search"> <el-form :size="size" inline :label-width="labelWidth"> <el-form-item v-for='item in searchFo...
P5-VUE3-Element组件库-Form表单组件
Bruce小鬼
02-05 1382
P5-VUE3-Element组件库-Form表单组件 1.概述 这篇文章介绍Element组件库的Form表单，在项目中使用非常广泛。 2.新建组件 新建组件 配置组件路由 3.Form表单使用 官网Form表单介绍 3.1.Form表单基本使用 复制官网表单代码 应用到Form.vue <template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item
Vue组件：表单数据回显验证与提交实战代码
这篇文章提供了一个基础的Vue组件表单开发框架，包含了数据回显、验证以及提交的基本操作。在实际项目中，可以根据需求进一步优化和扩展，如添加更复杂的验证规则、优化用户体验等。通过这个实例，开发者能够更好地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值