vue数据的双向绑定和组件化开发

已于 2022-12-13 17:38:40 修改
阅读量353 收藏
点赞数
分类专栏： # Vue 文章标签： 数据双向绑定和组件化开发
于 2019-07-17 20:35:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsx1314lovezyf/article/details/96358755
版权

今日内容

表单输入绑定
数据双向绑定

​ v-model 只能应用在input textare select 表单控件中

<!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">
<!--在vue里表单控件不需要value 改为v-model 这里的v-model="msg"就是input框的值
而p标签的值也是用的msg 所以input框的值改变  p标签的值也会改变-->
<input type="text" v-model="msg">
<p>{{ msg }}</p>
</div>
<script src="vue.js"></script>
<script>
   // 双向的数据绑定		使用v-model
    new Vue({
        el:"#app",
        data(){
            return {
                msg:""
            }
        }
    })
</script>
</body>
</html>

<!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">
<!--在vue里表单控件不需要value 改为v-model 这里的v-model="msg"就是input框的值
而p标签的值也是用的msg 所以input框的值改变  p标签的值也会改变-->
<input type="text" v-model="msg">
<p>{{ msg }}</p>
<textarea placeholder="add multiple lines" v-model="msg"></textarea>
<br /><br /><br />

<!--单个复选框，绑定到布尔值-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br /><br /><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> <br> <br>

<!--单选按钮-->
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
<br> <br> <br>

 <!--选中option的值他就是select的值-->
 <select v-model="selected">
     <!--disabled 不能被选中-->
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
<br> <br> <br>

<!--多选时 (绑定到一个数组)-->
 <!--multiple按住ctrl就可以实现多选   -->
<select v-model="selected1" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
  <br>
  <span>Selected1: {{ selected1 }}</span>


<br> <br> <br>
<!--修饰符 lazy  number  trim -->
<!-- 在“change”时而非“input”时更新 (意思是输入完以后回车就更新)-->
<input v-model.lazy="msg">

<br> <br> <br>
<!--如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符 (意思是只能输入数值类型的)-->
<input v-model.number="age" type="number">

<br> <br> <br>
<!--如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符  (意思清楚前后空格)-->
<input v-model.trim="msg">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                msg:"",
                checked: false,
                checkedNames: [],
                picked:"",
                selected:"",
                selected1:[],
                age:0
            }
        }
    })
</script>
</body>
</html>
组件化开发

组件数

在这里插入图片描述

  1. 全局组件

    打油诗:声子 用子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--3.用子 <App /> 就是我们自定义的标签      你也可以写成<App></App>-->
    <!--不放在template可以放在el里一样的但是子组件要写template因为这样你才能够看清楚子组件的结构-->
    <App />
</div>

<script src="vue.js"></script>
<script>

    // 全局组件
    // 第一个参数是组件的名字, 第二个参数options   它是全局组件
    // <slot></slot> slot是vue中提供的内容组件  它会去分发内容
    Vue.component('VBtn', {
       data(){
           return{

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


    // 局部组件
    // 声子
    let Vheader = {
        data(){
            return {

            }
        },
        // Component template should contain exactly one root element
        // 意思是需要一个根元素吧他们包裹起来
        // VBtn全局组件里面的字会替代slot
        template:`
            <div>
                <h2>日天</h2>
                <h2>alex</h2>
                <VBtn>登入</VBtn>
                <VBtn>注册</VBtn>
                <VBtn>提交</VBtn>
                <VBtn>删除</VBtn>
            </div>
        `
    }

    // App header aside content
    // 子组件没有el 其他功能都有
    // 1.声子 定义组件开头字母必须是大写, 因为这样才能跟标签区分, 组件中的data必须是函数 一定要有返回值
    // 局部组件
    let App = {
        data(){
            return {
                text: "我是日天"
            }
        },
        template:`
            <div>
                <h2>{{ text }}</h2>
                <Vheader></Vheader>
                <VBtn>退出</VBtn>
            </div>
        `,
        components:{
            // 挂子
            Vheader
        }
    }

    // 如果仅仅是实例化vue对象中 既有el 又有template, 如果template中定义模板的内容
    // 那么template模板的优先级大于el
    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        components:{
            // 2.挂子
            // 如果key和value一样   可以只写一个
            // App:App
            App
        }
    })
</script>
</body>
</html>

  2. 局部组件

    打油诗: 声子 挂子 用子

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ msg }}
</div>

<script src="vue.js"></script>
<script>
    // 如果仅仅是实例化vue对象中 既有el 又有template, 如果template中定义模板的内容
    // 那么template模板的优先级大于el
    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        template:`
            <div>
                <h2>{{ msg }}</h2>
            </div>
        `
    })
</script>
</body>
</html>
    1. 声明子
    // App header aside content
    // 子组件没有el 其他功能都有
    // 1.声子 定义组件开头字母必须是大写, 因为这样才能跟标签区分, 组件中的data必须是函数 一定要有返回值
    let App = {
        data(){
            return {
                text: "我是日天"
            }
        },
     	  //  报错Component template should contain exactly one root element
        // 意思是需要一个根元素吧他们包裹起来, 所以这里用div包裹
        template:`
            <div>
                <h2>{{ text }}</h2>
                <Vheader></Vheader>
            </div>
        `
    }

    2.挂子

    挂在那个组件, 这个组件就是我的父组件

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

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

  3. 组件的嵌套

    数据: 单向数据流

  4. 父子组件传值

    父==>子

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

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

    props

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App />
</div>

<script src="vue.js"></script>
<script>
     Vue.component('VBtn', {
       data(){
           return{

           }
       },
         props:["post_id"],
        template:`
            <button>{{ post_id }}</button>
        `
    })

    let Vheader = {
        data(){
            return {

            }
        },
        // 在子组件中  使用props声明  可以直接在子组件中任意使用
        props:["msg", "post"],
        template:`
        <div>
            <h2>日天</h2>
            <h2>{{ msg }}</h2>
            <h3>{{ post.title }}</h3>
            <VBtn :post_id="post.id"></VBtn>
        </div>
        `
    }


    let App = {
        data(){
            return {
                text: "我是父组件的数据",
                post:{
                    id: 1,
                    title: "我是头"
                }
            }
        },
        // 父组件  要定义自定义的属性msg
        template:`
            <div>
                <h2>{{ text }}</h2>
                <Vheader :msg="text" :post="post"></Vheader>
            </div>
        `,
        components:{
            // 挂子
            Vheader
        }
    }


    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        components:{
            App
        }
    })
</script>
</body>
</html>

    子==>父

    1.子组件要用到vue里的内置放大$emit(“自定义属性”, 传递的值)

    2.父组件自定义属性, 并实现该方法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App />
</div>

<script src="vue.js"></script>
<script>
     Vue.component('VBtn', {
       data(){
           return{

           }
       },
         props:["id"],
        template:`
            <button @click="clickHandler">{{ id }}</button>
        `,
         methods:{
           clickHandler() {
               // this.$emit("父组件自定义的时间", "传值")
               this.id++;
               this.$emit("clickHandler", this.id);
           }
         }
    })

    let Vheader = {
        data(){
            return {

            }
        },
        // 在子组件中  使用props声明  可以直接在子组件中任意使用
        props:["msg", "post"],
        template:`
        <div class="child">
            <h1>我是header组件</h1>
            <h2>日天</h2>
            <h2>{{ msg }}</h2>
            <h3>{{ post.title }}</h3>
            <VBtn :id="post.id" @clickHandler="clickHandler"></VBtn>
        </div>
        `,
        methods:{
            clickHandler(val){
                alert(val);
                this.$emit("fatherHandler", val);
            },

        }
    }


    let App = {
        data(){
            return {
                text: "我是父组件的数据",
                post:{
                    id: 1,
                    title: "我是头"
                }
            }
        },
        // 父组件  要定义自定义的属性msg
        template:`
            <div>
                <h2>{{ text }}</h2>
                <h2>{{ post.id }}</h2>
                <Vheader :msg="text" :post="post" @fatherHandler="fatherHandler"></Vheader>
            </div>
        `,
        components:{
            // 挂子
            Vheader
        },
        methods:{
            fatherHandler(val){
                this.post.id = val;
            }
        }
    }


    new Vue({
        el:"#app",
        data(){
            return {
                msg:"alex"
            }
        },
        components:{
            App
        }
    })
</script>
</body>
</html>

    5.平行组件传值

    同级子组件传递值 $on 和 $emit不能使用this在平行组件传值时

    <!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></App>
</div>

<script src="vue.js"></script>
<script>

    let bus = new Vue();

    // A==>B  B要声明事件$on("事件的名字", function(){})  A要触发事件$emit("B组件中声明的事件名", 你要传进去的值)
    // 前提这两个方法必须绑定在同一个实例化对象(bus)

    // Test2 和 Test都是Vheader的子组件所以是平行组件
    Vue.component("Test2", {
        data(){
            return{
                text:""
            }
        },
        template:`
            <h2>{{ text }}</h2>
        `,
        methods:{

        },
        created(){
            bus.$on("testData", (val) => {
                this.text=val;
                alert(val);
            })
        }
    })

    Vue.component("Test", {
        data(){
            return{
                msg:"我是子组件的数据"
            }
        },
        template:`
            <button @click="clickHandler">传递</button>
        `,
        methods:{
            clickHandler(){
                alert(1);
                console.log(bus);
                bus.$emit("testData", this.msg);
            }
        }
    })

    let Vheader = {
        data(){
            return {

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

    let App = {
        data(){
            return{

            }
        },
        methods:{

        },
        template:`
            <div class="app">
                <Vheader></Vheader>
            </div>
        `,
        components:{
            Vheader
        }
    }

    new Vue({
        el:"#app",
        data(){
            return {

            }
        },
        methods:{

        },
        components:{
            App
        }
    })
</script>
</body>
</html>
只因为你温柔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue数据双向绑定以及组件化简介
12-23
### Vue.js 数据双向绑定原理与...数据双向绑定和组件化是Vue.js框架的核心特性，它们极大地提高了开发效率和代码质量。通过深入理解这两个概念的工作原理和应用场景，我们可以更好地利用Vue.js来构建复杂的应用程序。
数据双向绑定和组件
xiao-啸
07-13 268
数据双向绑定和组件 表单输入绑定 数据双向绑定 ​ v-model 只能应用在input textare select 表单控件中 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
【Vue2从入门到精通】详解Vue数据双向绑定原理及手动实现双向绑定
全栈弄潮儿
03-29 2928
Vue是采用数据劫持结合发布者-订阅者模式的方式，通过使用ES5中的Object.defineProperty()方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
antd的input.textarea设置defaultvalue不成功该怎么办？
beyond150的博客
04-23 2138
问题： 开发中遇到如上问题。 原因 原文链接：原文的最下方 解决 表单头上赋值 <Form initialValues={formData}>
Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
热门推荐
无缺的博客
02-25 1万+
先上整体代码： const beforeSearchSubmit = (par) => { //par 就是你搜索表单输入的内容 } <ProTable headerTitle="查询表格" columns={columns} rowKey="key" params={ params } beforeSearchSubmit={beforeSearchSubmit}
antd a-select绑定数据
program_ape_lqh的博客
10-18 2346
绑定数据通过:options属性绑定一个数组。label是显示的内容。value是选中的值。
Vue 3.0双向绑定原理的实现方法
10-16
Vue.js作为前端开发中广泛应用的JavaScript框架，其核心功能之一便是实现了数据的双向绑定。Vue3.0相较于Vue2.0在双向绑定的数据劫持方式上做了改进，使用了Proxy代理代替了Object.defineProperty来实现数据响应式...
Vue组件内部实现一个双向数据绑定的实例代码
10-17
这种模式实现了数据的双向绑定：父组件通过props将数据传递给子组件，子组件通过`$emit`将数据反馈回父组件。需要注意的是，尽管这种实现方式看似直接，但直接修改props是不推荐的，因为这会破坏组件的封装性。在...
Vue数据双向绑定原理实例解析
10-15
Vue.js 的数据双向绑定是其核心特性之一，它使得 View 层与 Model 层可以实时同步，极大地简化了前端开发流程。这一特性是基于 MVVM（Model-View-ViewModel）设计模式实现的，与传统的 MVC（Model-View-Controller）...
vue双向数据绑定原理探究(附demo)
08-31
`bindModel` 处理 `w-model` 指令，实现数据和表单元素的双向绑定。 ```javascript init: function() { this.bindText(); this.bindModel(); } ``` 3. `bindText` 方法遍历所有带有 `w-text` 指令的元素，将其...
div实现自适应高度的textarea实现angular双向绑定
08-31
本文主要介绍了div实现自适应高度的textarea，实现angular双向绑定的方法。具有一定的参考价值，下面跟着小编一起来看下吧
vue表单应用  v-model
qq_43198747的博客
01-24 1335
v-model只能用于    input 、select、 textarea这些表单元素上实现双向数据绑定。 所谓双向书数据绑定，指的是在vue对象中的data与其绑定的DOM元素的内容保持一致。两者无论谁被改变，另一个也相应改变。 因为表单元素展现数据的方式不同，在实现双向数据绑定时，vue会根据不同的控件类型自动选择正确的方式来更新数据。 控件的不同？ v-model  input输入框...
22 双向数据绑定 input、textarea、checkbox、radio
wgchen
12-02 2843
学会学习的人，是幸福的人 梦想不会因为成长而离开你，也不会被社会的压力所击倒，梦想是被自己的借口所一步步慢慢吞噬直到平庸。 [基础]Vue表单的双向数据绑定-1新建干净的Vue3文件input 的数据双向绑定textarea 的数据双向绑定checkbox 数据双向绑定checkbox 里的 true-value 和 false-valuecheckbox 复选双向数据绑定Radio 的双向数据绑定 我在教程刚开始的初识阶段，经常强调Vue是数据驱动的开发。 其中最重要的一点应用是数据的双向绑定，从这节开始
动态修改elmentUI元素样式
简单随风的博客
07-02 2131
理论上也可用于其他组件库 这里以修改一个input框的文字颜色为例，正常我们要修改el-textarea__inner的值用以下写法即可 /deep/ .el-textarea__inner { color: red } 思路就是将red引入为一个变量： /deep/ .el-textarea__inner { color: var(--textarea-color) } 我们在需要修改的地方，为--textarea-color变量赋值 <el-input type="text.
[ Vue3 ] 三种方式实现组件数据双向绑定
最新发布
记录开发日常
11-28 9218
在 Vue 中，组件数据双向绑定是一项非常重要的特性，它使得我们能够轻松地在组件中处理数据的变化并将其同步到视图 比如我们想要在父组件中修改数据能够同步给子组件，并且子组件修改数据也能同步给父组件，使他们数据一方发生变化，则双方都发生改变
组件间的双向绑定、如何自己定制双向绑定
weixin_48879122的博客
09-19 1531
本篇文章讲述了组件间的双向绑定、如何自己定制双向绑定的使用方法；
【Vue】 五分钟就能看懂的vue数据双向绑定
Lushengshi的博客
08-20 1517
在web开发应用中，很多项目都会用到表格一列的组件进行数据的传输、获取和提交，在开发使用中，表格类组件数据的传输，我们一般可以使用v-model将输入的数据同步到data属性中，这个指令可以为不同的输入元素使用不同的属性，这个指令一般在form表单中的input等等元素上面来创建双向的数据绑定。
react antd Input 绑定值
datouniao1的博客
09-13 1829
在页面上做一些搜索条件，为了方便我们可以做一个按钮"置空"，或者清除，点击这个按钮实现将输入框中的值删除，在以前的html页面中我们很方便通过js来将值制空，但是react组件封装的很严重了，我们没有办法通过js来制空，即使可以实现也是比较麻烦的
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只因为你温柔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值