vue基础6——自定义组件v-model

最新推荐文章于 2024-05-10 12:27:58 发布
最新推荐文章于 2024-05-10 12:27:58 发布
阅读量184 收藏
点赞数
分类专栏： vue基础 文章标签： vue html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/enginebrkalsy/article/details/116273111
版权

上次复习

在这里插入图片描述
在这里插入图片描述

自定义组件——v-model——与v-bind不同

不能正常加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <stepper v-model:count="goods_count"></stepper>

    </div>
    <script>
        // 定义全局组件
        Vue.component("stepper",{
            props:["count"],
            // 定义模版
            template:`
            <div>
                <button @click='sub'>-</button>
                <span>{{count}}</span>
                <button @click='add'>+</button>
            </div>
            `,
            methods:{
                sub:function(){
                    return this.count -=1
                },
                add:function(){
                    return this.count +=1
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                "goods_count":0
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

换成v-bind就可以

在这里插入图片描述
在这里插入图片描述

解决：v-model里面需要添加prop属性

在这里插入图片描述

问题：count不是goods-count

在这里插入图片描述
在这里插入图片描述

解决：

在这里插入图片描述
在这里插入图片描述

生命周期函数

beforeCreate：只有vue或者组件实例化执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{username}}</p>


    </div>
    <script>

        new Vue({
            el:'#app',
            data:{
                username:'abc'
            },
            // 创建期间方法创建
            beforCreate(){
                // vue或者组件实例化就执行
                console.log('第一个生命周期函数：eforCreate')
                console.log(this.username)
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

created：

在这里插入图片描述

在这里插入图片描述

beforeMount：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

mounted:

在这里插入图片描述

在这里插入图片描述

beforeUpdate:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

updated:

在这里插入图片描述
在这里插入图片描述

销毁阶段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
     <!-- 销毁阶段
             生命周期：vue对象、组件
             如何让组件销毁======v-if创建与销毁元素来控制显示 -->
    <div id="box">
            <destroy-view v-bind:msg="message"></destroy-view>
            


    </div>
    <script>
        Vue.component("destroy-view",{
            props:['msg'],
            template:`
            <p style="color:blue;">{{msg}}</p>
            `,
            

        })
        new Vue({
            el:'#box',
            data:{
                message:'hello world'
            },
        })
    </script>
</body>
</html>

在这里插入图片描述

销毁时加入v-if，点击则销毁

在这里插入图片描述

在这里插入图片描述

beforeDestroy：点击销毁则触发

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

destroyed：

在这里插入图片描述
在这里插入图片描述

图书管理系统 事例

在bootstrap找样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <div id="bookManage">
        <!-- form表单 -->
        <div class='container'>
            <!-- 一般来说，引入模版过程，class属性指定样式 -->
            <form class="form-inline">
                <h1>图书管理系统</h1>
                <div class="form-group">
                <label >名称：</label>
                <input type="text" class="form-control" id="name" placeholder="请输入书名">
                </div>

                <div class="form-group">
                <label >作者：</label>
                <input type="text" class="form-control" id="author" placeholder="请输入作者名">
                </div>

                <div class="form-group">
                <label >价格：</label>
                <input type="text" class="form-control" id="price" placeholder="请输入价格">
                </div>

                <div class="form-group">
                <label >搜索：</label>
                <input type="text" class="form-control" id="search" placeholder="请输入搜索关键字">
                </div>              
                <button type="submit" class="btn btn-default">添加</button>
            </form>
        </div>
    </div>
    <script>
        new Vue({
            el:'#bokManage',
            data:{

            }
        })
    </script>
</body>
</html>

在这里插入图片描述

添加表格：

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <div id="bookManage">
        <!-- form表单 -->
        <div class='container'>
            <!-- 一般来说，引入模版过程，class属性指定样式 -->
            <form class="form-inline">
                <h1>图书管理系统</h1>
                <div class="form-group">
                <label >名称：</label>
                <input type="text" class="form-control" id="name" placeholder="请输入书名">
                </div>

                <div class="form-group">
                <label >作者：</label>
                <input type="text" class="form-control" id="author" placeholder="请输入作者名">
                </div>

                <div class="form-group">
                <label >价格：</label>
                <input type="text" class="form-control" id="price" placeholder="请输入价格">
                </div>

                <div class="form-group">
                <label >搜索：</label>
                <input type="text" class="form-control" id="search" placeholder="请输入搜索关键字">
                </div>              
                <button type="submit" class="btn btn-default">添加</button>
            </form>
            <!-- 表格样式 -->
            <table class="table">
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>作者</td>
                    <td>价格</td>
                    <td>时间</td>
                    <td>删除</td>
                </tr>
                <tr v-for="(book,index) in books">
                    <td>{{index+1}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.atime}}</td>
                    <td>删除</td>
                </tr>
                

              </table>
        </div>
    </div>
    <script>
        new Vue({
            el:'#bookManage',
            data:{
                books:[
                    {"name":"挪威的森林","author":"村上","price":"28","atime":new Date()},
                    {'name':"python核心编程","author":"lao a","price":"10",'atime':new Date()}

                ]

            }
        })
    </script>
</body>
</html>

在这里插入图片描述

增加功能的添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <div id="bookManage">
        <!-- form表单 -->
        <div class='container'>
            <!-- 一般来说，引入模版过程，class属性指定样式 -->
            <form class="form-inline">
                <h1>图书管理系统</h1>
                <div class="form-group">
                <label >名称：</label>
                <input type="text" class="form-control" id="name" placeholder="请输入书名" v-model="add_book.name">
                </div>

                <div class="form-group">
                <label >作者：</label>
                <input type="text" class="form-control" id="author" placeholder="请输入作者名" v-model="add_book.author">
                </div>

                <div class="form-group">
                <label >价格：</label>
                <input type="text" class="form-control" id="price" placeholder="请输入价格" v-model="add_book.price">
                </div>

                <div class="form-group">
                <label >搜索：</label>
                <input type="text" class="form-control" id="search" placeholder="请输入搜索关键字">
                </div>  
                     <!-- 点击添加，应该触发事件，而不是默认提交表单        -->
                     <!-- 如何阻止默认行为 .prevent修饰符 -->
                <button type="submit" class="btn btn-default" @click.prevent='add'>添加</button>
            </form>
            <!-- 表格样式 -->
            <table class="table">
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>作者</td>
                    <td>价格</td>
                    <td>时间</td>
                    <td>删除</td>
                </tr>
                <tr v-for="(book,index) in books">
                    <td>{{index+1}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.atime}}</td>
                    <td>删除</td>
                </tr>
                

              </table>
        </div>
    </div>
    <script>
        new Vue({
            el:'#bookManage',
            data:{
                books:[
                    {"name":"挪威的森林","author":"村上","price":"28","atime":new Date()},
                    {'name':"python核心编程","author":"lao a","price":"10",'atime':new Date()}

                ],
                add_book:{
                    name:"",
                    author:'',
                    price:0,
                }

            },
            methods:{
                add:function(){
                    // 获取输入框当中数据
                    // console.log(this.add_book)
                    // 只要将add_book添加到books中
                    this.books.push(this.add_book)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

使用JSON.parse和JSON.straighfy()

在这里插入图片描述
在这里插入图片描述

输入完就可以情况框中内容

在这里插入图片描述
在这里插入图片描述

图书馆删除

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

图书馆搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <div id="bookManage">
        <!-- form表单 -->
        <div class='container'>
            <!-- 一般来说，引入模版过程，class属性指定样式 -->
            <form class="form-inline">
                <h1>图书管理系统</h1>
                <div class="form-group">
                <label >名称：</label>
                <input type="text" class="form-control" id="name" placeholder="请输入书名" v-model="add_book.name">
                </div>

                <div class="form-group">
                <label >作者：</label>
                <input type="text" class="form-control" id="author" placeholder="请输入作者名" v-model="add_book.author">
                </div>

                <div class="form-group">
                <label >价格：</label>
                <input type="text" class="form-control" id="price" placeholder="请输入价格" v-model="add_book.price">
                </div>

                <div class="form-group">
                <label >搜索：</label>
                <input type="text" class="form-control" id="search" placeholder="请输入搜索关键字" v-model='keyword'>
                </div>  
                     <!-- 点击添加，应该触发事件，而不是默认提交表单        -->
                     <!-- 如何阻止默认行为 .prevent修饰符 -->
                <button type="submit" class="btn btn-default" @click.prevent='add'>添加</button>
            </form>
            <!-- 表格样式 -->
            <table class="table">
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>作者</td>
                    <td>价格</td>
                    <td>时间</td>
                    <td >删除</td>
                </tr>
                <!-- 因为搜索框发生变化，显示不再是完整的books而是book_result -->
                <tr v-for="(book,index) in book_result">
                    <td>{{index+1}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.atime}}</td>
                    <td class="btn btn-success" @click='del(index)'>删除</td>
                </tr>
                

              </table>
        </div>
    </div>
    <script>
        new Vue({
            el:'#bookManage',
            data:{
                books:[
                    {"name":"挪威的森林","author":"村上","price":"28","atime":new Date()},
                    {'name':"python核心编程","author":"lao a","price":"10",'atime':new Date()}

                ],
                add_book:{
                    name:"",
                    author:'',
                    price:0,
                },
                keyword:'',
                // book_result:[]

            },
            methods:{
                add:function(){
                    // 获取输入框当中数据
                    // console.log(this.add_book)
                    // 只要将add_book添加到books中
                    // this.books.push(this.add_book)
                    // 问题：v-model双向绑定add——book，所以输入框变化则表格内容也变化
                    // 解决：创建一个新对象 对象是将add——book转为json字符串
                    // JSON.stringify()  将js对象转为json字符串
                    // JSON.parse()   将json对转为json对象
                    var book =JSON.parse(JSON.stringify(this.add_book))
                    // JSON.stringify(this.add_book)
                    // console.log(book)
                    this.books.push(book)
                    // 将输入框清空
                    this.add_book ={                   
                    name:"",
                    author:'',
                    price:''
                    }

                },
                del:function(index){
                    this.books.splice(index,1)
                },
               
            },
             // indexOf 判断关键字是否在数据组，在就显示索引，不在就-1隐藏
                // keyword发生变化 则显示发生变化
                computed:{
                    book_result(){
                        // 判断：如果this.keyword
                        if(this.keyword){
                            kw =this.keyword
                            // 存在就可以搜索，但我们搜索时，应该判断该关键字在那一行字的name中
                            // 过滤方法 取出每一行数据  this.filter(方法)
                            var newbook=this.book.filter(function(item){
                                // console.log(item)
                                // item表示每一条记录
                                // 判断下标  =0存在
                                // 在function中this并不再是指定vue中的对象而是指定function自己
                                if(item.name.indexOf(kw) >=0){
                                    return true
                                }else{
                                    return false
                                }
                            })
                            return newbook
                            console.log(newbook)
                        }else{
                            // 没有输入关键字，还是显示books
                            return this.books
                        }
                    }
            }
        })
    </script>
</body>
</html>
brkalsy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue 中的自定义组件
Zhangq_1208的博客
02-08 508
被 Vue 所管理的标签可以认为是 vue 的组件。而在项目开发过程中，经常会遇到一些需要复用的标签结构以及相 应样式、脚本功能。
vueMeta的使用
写点什么好
09-02 440
安装vueMeta npm i vue-meta --s-d 在main.js入口文件中引入 import VueMeta from 'vue-meta' // meta组件引用 Vue.use(VueMeta) 在页面中使用 和data平级 metaInfo () { return { titleTemplate: `%s - ${this.shopDetail.title}`//动态引入 } }, ...
Vue创建自定义组件，并详解整个创建自定义组件的过程
pon的博客
03-28 8874
在vue开发项目中想自定义一个自己的组件，于是在网上找一下教程，教程基本的都一样，但是都不是很详细，我就按照网上的教程从头到尾学习了一遍，文章中如果有不正确的，还请各位大佬指出，共同进步。 vue自定义组件前奏 学习 ES6中import xxx from xxx的用法，因为这个用法会在后面的自定义组件中用到。 Vue使用import … from …来导入组件，库，变量等。而from后的文件来......
3.Vue3——自定义组件
最新发布
2401_82986110的博客
05-10 1552
什么是组件？h1就是一个组件，就是标签，一个组件具备：组件本身即标签+属性+事件，属性用来提供数据，事件用来提供功能，事件的实现通过组件事先提前封装写好方法。所以，如何写一个简单的组件呢？写一个标签完善该标签的属性和方法，对外提供。——属性props接受外部传入数据 emit向外部传出事件，2者都需要先注册再使用。有些内容是待定的，你只需要固定它的位置，比如一个古诗组件，标题等等都是需要使用时填入，这个时候就需要——使用插槽实现 案例1：自定义面板 vue组件的生命周期可以分为：创建，挂载，销毁
vue中的自定义组件如何使用v-model
m0_50441807的博客
03-03 1692
以上的形式用在案例中是会报错的，因为mySelectValue是用在v-model上的，也就是会修改mySelectValue的值，给子组件，子组件接收value值，同时通过input事件传递参数给父组件；自定义组件中使用了v-model，默认自定义属性名是。使用v-model实际上是传递一个自定义属性。// 通过调用父组件的input事件来传递值。对象形式定义的属性，允许修改，不会报错；// 父组件传递过来的value。'v-model的值为：'
vue2自定义组件v-model实现
黎小小的博客
11-11 1078
页面设置和组件管理切换：使用自定义组件v-model实现。
vue中input的v-model清空操作
10-16
总结起来，处理Vue中`input`的`v-model`清空操作的关键在于利用事件机制，通过子组件发出事件，父组件监听并响应事件来改变`v-model`绑定的数据。虽然这可能看起来比直接修改`v-model`值稍微复杂一些，但它确保了...
vue 入门，v-model数据绑定
05-03
本篇文章将深入探讨Vue的核心概念之一——`v-model`数据绑定，帮助初学者快速入门。 `v-model`是Vue中的一个指令，用于实现双向数据绑定，它使得视图（View）与模型（Model）之间的数据同步变得简单。这种机制让...
关于前端开发框架vue中的v-model双向绑定自定义组件（第二版）
12-21
本文将深入探讨Vue中的一个重要特性——`v-model`双向数据绑定，特别是如何在自定义组件中实现这一功能。我们将通过实例解析`v-model`的工作原理，并指导你如何在自定义组件中应用它，以提升开发效率和代码复用性。 ...
Vue 组件复用多次自定义参数操作
10-15
此外，Vue组件还支持一种强大的功能——插槽（Slot），用于在组件内部插入自定义内容。插槽允许父组件动态地向子组件传递内容，而无需使用props。例如，我们创建一个`my-blog`组件，它有一个默认插槽，可以插入任意...
vue组件开发
10-08
3. **属性与数据绑定**：Vue中的`v-model`指令用于实现双向数据绑定，这里我们用它来绑定输入框的值到组件的数据属性`value`。`v-bind:`（简写`:`)用于绑定属性，如`minValue`和`maxValue`，这些属性可以在父组件中...
vue中的v-model原理,与组件自定义v-model详解
10-14
主要介绍了vue中的v-model原理,与组件自定义v-model详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue在自定义组件上使用v-model
qq_43176127的博客
02-17 246
父组件绑定值控制子组件显示与隐藏。父组件通过v-model绑定isShow，子组件通过props:[“value”]接收，同时子组件可以通过$emit(‘input’, false)来改变这个值。点击子组件里的关闭按钮会触发$emit(‘input’, false)从而改变父组件isShow，isShow变成false，子组件不显示。点击switch isShow变成true，子组件显示。开始isShow是false，子组件不显示。
【Vue】自定义组件绑定 v-model
qq_45677671的博客
07-22 4213
自定义组件绑定 v-model 使用案例
css定位，v-model
一片涟漪
12-09 373
定位 model
vue自定义组件v-model
热门推荐
lh1144151563的博客
01-21 1万+
自定义组件使用v-model vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子： <input type="text" v-model="message"> <p>{{message}}</p> // v-model只是语法糖，真正的实现形式： <input type="text" :value="message" @input="message = $event.target.value"> 将输入框的值绑定到message变量上，这
VUE框架自定义组件复用局部配置和全局配置以及命名原则------VUE框架
春风若有怜花意，可否许我再少年
12-04 1078
VUE框架自定义组件复用局部配置和全局配置以及命名原则------VUE框架
vue 自定义组件v-model
qq_41144591的博客
04-11 6935
vue 自定义组件v-model,vue3不知道可不可以，只试了vue2
vue自定义组件
m0_62198921的博客
02-14 5925
使用组件的好处 组件是可以复用性的 易于维护 有封装性，易用于使用 大型项目中降低组件之间复用性 全局组件 引用全局组件 my-header
vue3 自定义组件v-model
08-25
在Vue 3中，自定义组件的v-model默认绑定的是`modelValue`而不是`value`，接收的方法由`input`改为`@update:modelValue`。例如，在一个父组件中，我们可以这样使用自定义组件： ``` <child v-model="message" /> ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值