vue five day

给昨天的图书案例添加5个特性:

1.过滤器使用(用此特性添加了对日期数据的格式化)

2.自定义指令(用此特性添加了让输入域自动获取焦点的自定义指令)

3.计算属性(用此特性添加了图书数量的计算)

4.侦听器(同此特性添加了对 检验新加图书是否存在 的一个功能)

5生命周期(钩子函数 其实使用场景很多,常见mounted钩子触发时代表模板已经可以使用,然后可以在此钩子里去获取后台数据然后填充模板)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理案例</title>
    <style>
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-color: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <label for="id">
                            编号:
                        </label>
                        <input type="text" id="id" v-model="id" :disabled="flag" v-focus>
                        <label for="name">
                            名称:
                        </label>
                        <input type="text" id="name" v-model="name">
                        <button @click="handle" :disabled="checkNameFlag">提交</button>
                    </div>
                </div>
            </div>
            <div class="total">
                <span>图书总数:</span>
                <span>{{total}}</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr :key="item.id" v-for="item,index in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>
                            <a href="" @click.prevent @click="change(index)">修改</a>
                            <span>|</span>
                            <a href="" @click.prevent @click="del(index)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                flag: false,
                change_index: 0,
                checkNameFlag:false, // 检验新添加书名是否已在的标志
                books: [
                    {
                        id: 1,
                        name: "三国演义",
                        date: ""
                    },
                    {
                        id: 2,
                        name: "水浒传",
                        date: ""
                    },
                    {
                        id: 3,
                        name: "红楼梦",
                        date: ""
                    },
                    {
                        id: 4,
                        name: "西游记",
                        date: ""
                    }
                ]
            },
            methods: {
                handle: function () {
                    if (this.flag) {
                        // 修改数据
                        // Vue.set(this.books[this.change_index],this.id,this.name)
                        this.books[this.change_index].name = this.name
                        // 放开标志
                        this.flag = false
                    } else {
                        // 添加数据
                        this.books.push(
                            {
                                id: this.id,
                                name: this.name,
                                date: ""
                            }
                        )
                    }
                    this.id = "";
                    this.name = "";
                },
                change: function (index) {
                    // 点击修改按钮 需要做的事情
                    this.change_index = index
                    this.id = this.books[index].id
                    this.name = this.books[index].name
                    // 禁止修改id
                    this.flag = true
                },
                del: function (index) {
                    this.books.splice(index, 1)
                    // this.books.splice(index)
                }
            },
            directives: {
                focus: {
                    // 自定义指令的定义
                    inserted: function (el) {
                        el.focus()
                    }
                }
            },
            computed: {
                // 计算属性 统计图书总数
                total: function () {
                    return this.books.length;
                }
            },
            filter: {
                handleDate: function (date) {
                    // 过滤器的使用,格式化日期数据 具体代码就不写了
                }
            },
            watch: {
                name: function (val) {
                    // 侦听器的使用,用来检验新添加图书是否为已存在
                    // name为监听的属性:function为监听方法
                    // val为新添加图书名
                    // some是es6里的方法 可以用来检验数组里是否有相同数据
                    this.checkNameFlag = this.books.some(function (item) {
                        return item.name == val;
                    })
                }
            },
            mounted:function(){
                // 当mounted钩子函数触发的时候代表模板已经可以使用
                // 通常这里可以去获取后台数据,然后填充到模板
            }
        })
        // var oop = [{
        //     id: 4,
        //     name: "西游记",
        //     date: ""
        // }]
        // es6里的数组的index及value遍历
        // for ([k, v] of oop.entries()) {
        //     console.log(k, v)
        // }
        // es6里的方法 判断数组里是否有此数据
        // console.log(oop.includes("西游记"))
    </script>
</body>

</html>

组件化开发

组件的注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button-count></button-count>
        <button-counter></button-counter>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 全局注册组件
        // 组件命名方式可以是x-x也可以是驼峰命命方式
        // data和template为固定关键字 data里为函数 定义的数据需要return,也可以定义methods等方法
        // template为模板 需要有一个确切的根元素,可以是模板字符串,需要浏览器提供支持(es6语法)
        // 组件的使用需要在挂载到vue实例下的div下使用
        // 组件可以重用 因为data里面是函数 所以重复使用的时候data里面的数据是独立的
        Vue.component("button-count", {
            data: function () {
                return {
                    count: 0
                }
            },
            template: "<button @click='count++'>全局注册点击增加{{count}}</button>"
        })
        // 局部注册组件的方式
        // 局部注册的组件只能在注册它的父组件中使用
        var button_conunter = {
            data: function () {
                return {
                    count: 0
                }
            },
            template: "<button @click='count++'>局部注册点击增加{{count}}</button>"
        }
        var vm = new Vue({
            el: "#app",
            components: {
                "button-counter": button_conunter,
            }
        })
    </script>

</body>

</html>

Vue的调试工具安装

直接谷歌商店搜索vue找到devtools安装即可。

posted @ 2020-06-01 19:11  桜満三葉  阅读(154)  评论(0编辑  收藏  举报