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

上次复习

自定义组件——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>