前端学习五（vue高级特性）

一、事件的参数传递

示例为通过按钮删除一行v-for渲染出来的数据

<body>
    <table id="app" border="">
        <tr>
            <th>idth>
            <th>nameth>
            <th>testerth>
            <th>projectth>
            <th>操作th>
        tr>
        <tr v-for="item in lists">
            <td>{{item.id}}td>
            <td>{{item.name}}td>
            <td>{{item.tester}}td>
            <td>{{item.project}}td>
            <td><button @click="del(item.id)">删除button>td>
        tr>
    table>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                lists: [{
                    "id": 1,
                    "name": "登录接口1",
                    "tester": "测试人1",
                    "project": "自动化测试平台1"
                },
                {
                    "id": 2,
                    "name": "登录接口2",
                    "tester": "测试人2",
                    "project": "自动化测试平台2"
                },
                {
                    "id": 3,
                    "name": "登录接口3",
                    "tester": "测试人3",
                    "project": "自动化测试平台3"
                }]
            },
            methods: {
                del: function (id) {
                    console.log("点击了删除按钮", id);
                    // 方法一，filter
                    // this.lists = this.lists.filter(
                    //     function (item) {
                    //         return item.id != id
                    //     }
                    // )
                    // 方法二，找到索引，再删数据
                    const ind = this.lists.findIndex(function (item) {
                        return item.id === id
                    })
                    console.log("索引", ind);
                    // 第一个入参为索引，第二入参为从入参索引开始删除的个数
                    this.lists.splice(ind, 1)
                }
            }
        })
    script>
body>

二、事件修饰符

https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

上一篇文章还有提到表单修饰符：https://cn.vuejs.org/v2/guide/forms.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6

<body>
    <div id="app">
        <div @click="work">
            
            <button type="button" @click.stop="work2()">按钮1button>
        div>
        <a href="https://www.baidu.com" @click.prevent="work3">百度a>
    div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                work: function () {
                    console.log("调用work方法");
                },
                work2: function () {
                    console.log("----work2---");
                },
                work3: function () {
                    console.log("----work3---");
                }
            }
        }
        )
    script>
body>

三、按键修饰符

https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81

<body>
    <div id="app">
        <form action="">
            账号：<input type="text" v-model="loginForm.user">
            <br>
            
            密码：<input type="password" v-model="loginForm.pwd" 
                    @keyup.enter="login_btn()" @keyup.delete="del()">
            <br>
            <button type="button" @click="login_btn()">登录button>
        form>
    div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                loginForm: {
                    user: "",
                    pwd: ""
                }
            },
            methods: {
                login_btn: function () {
                    console.log("用户登录数据为：", this.loginForm);
                },
                del:function(){
                    this.loginForm.pwd=""
                }
            }
        }
        )
    script>
body>

 四、计算属性computed、侦听属性watch

<body>
    <div id="app">
        <div>
            <h3>订单h3>
            <h5>商品名：{{name}}h5>
            <h5>单价：{{price}}h5>
            <h5>库存：{{stock}}h5>
            <h5>
                数量：
                <button @click="sub">-button>
                {{num}}
                <button @click="add">+button>
            h5>
            <hr>
            <h5>总价：{{priceSum}}h5>
            <h5>总价：{{test}}h5>
        div>
        <hr>
        <form action="">
            账号：<input type="text" v-model="loginForm.user">
            <br>
            
            密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()" @keyup.delete="del()">
            <br>
            <button type="button" @click="login_btn()">登录button>
        form>
    div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                name: "西瓜",
                num: 10,
                price: 99,
                stock: 20,
                test: "990",
                loginForm: {
                    user: "",
                    pwd: ""
                }
            },
            methods: {
                add: function () {
                    this.num += 1;
                    this.test = this.num * this.price
                },
                // 函数简写
                sub() {
                    this.num -= 1;
                    this.test = this.num * this.price
                },
            },
            // 定义计算属性
            computed: {
                priceSum: function () {
                    return this.num * this.price
                }
            },
            //定义侦听器，只能监听data里面的值是否发生变化
            watch: {
                // 单层监听
                num(newValue, oldValue) {
                    console.log(newValue, oldValue);
                    if (newValue < 0) {
                        this.num = 0
                    } else if (newValue > this.stock) {
                        this.num = this.stock
                    }
                },
                // 监听层级内的某个数据
                'loginForm.user': function (newValue, oldValue) {
                    console.log(newValue, oldValue);
                },
                // 监听层级内的数据，示例监听的是loginForm整个对象
                loginForm: {
                    handler:function(newValue, oldValue){
                        console.log("测试",newValue.user, oldValue.user);
                    },
                    // 不管层级有多深，都能监听到
                    deep:true
                }
            }
        })
    script>
body>

五、过滤器

<body>
    <div id="app">
        
        <p :style="style|styleChange">{{price|doubleFloat}}p>
    div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                price: 99,
                style: "color:red"
            },
            // 过滤器（对传入的数据进行处理）
            filters: {
                doubleFloat: function (value) {
                    return value.toFixed(2)
                },
                styleChange(value){
                    return "color:green"
                }
            }
        })
    script>
body>