吴荣昌个人博客|五天入门Vue--Day2

[[ $t(slide_text) ]]

[[ item.c ]]

五天入门Vue--Day2

[[ $t('发布时间') ]]：2023-03-10 [[ $t('作者') ]]：吴荣昌 [[ $t('来源') ]]：吴荣昌个人博客

HTML5 CSS JavaScript Vue

## vue事件：

> vue事件名符合JavaScript事件命名规则，跟jQuery的一样。【onclick去掉on就是vue和jquery的事件】
>
>  
>
>  执行的方法必须在methods中！
>
> 在method中用this获取data所有的属性！

```vue
<body>
<div id="app">
    <div>{{ num }}</div>
    <div>
        
        <button v-on:click="add">点我+</button>
        
        <button @click="num--">点我-</button>
    </div>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            num: 10,
        },
        methods: {
            add() {
                //在method中用this获取data所有的属性
                this.num++
            }
        }
    })
</script>
</body>
```

### 参数传递：

> 注意：
>
> 无参数add后面不用跟括号，有参数要跟括号。

```html
<button v-on:click="add(10)">点我+</button>
```

```javascript
methods: {
    add(number) {
    //在method中用this获取data所有的属性
    this.num += number
    }
}
//此时函数就能接收传递进来的值
```

### 默认参数：

> 函数不跟参数，默认有一个event的形参
>
>  
>
> **默认参数就是触发当前事件的事件对象！**
>
>  
>
> 一定是`v-on:click="add"`只写一个函数名，而不是`v-on:click="add()"`这样获取不到事件对象

```html
<button v-on:click="add" id="btn" class="btn_cls">点我+</button>
```

```javascript
methods: {
    add(event) {
        //在method中用this获取data所有的属性
        this.num++
        console.log(event)
        console.log(event.target) //获取当前对象的html写法
        console.log(event.target.id) //获取当前对象的id
        console.log(event.target.className) //获取当前对象的类名
    }
}
```

> 如果函数带有参数，那么默认的event形参就会失效，可以用`$event`将event形参传递进函数。

```html
<button v-on:click="add(10, $event)" id="btn" class="btn_cls">点我+</button>
```

```javascript
methods: {
    add(number, event) { //这里接收event
        //在method中用this获取data所有的属性
        this.num++
        console.log(event)
        console.log(event.target) //获取当前对象的html写法
        console.log(event.target.id) //获取当前对象的id
        console.log(event.target.className) //获取当前对象的类名
    }
}
```

## 图片轮播图案例：

```vue
<body>
<div id="app">
    <div>
        <img v-bind:src="img_list[index]">
    </div>
    <div>
        <button v-on:click="prevImag(index, img_list.length)">上一张</button>
        <button v-on:click="nextImag">下一张</button>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            index: 0, //图片当前索引
            img_list: [ //图片url列表
                'https://pic.3gbizhi.com/2022/0914/thumb_1680_0_20220914010322135.jpg',
                'https://pic.3gbizhi.com/2022/0914/thumb_1680_0_20220914010322294.jpg',
                'https://pic.3gbizhi.com/2022/0914/thumb_1680_0_20220914010324737.jpg',
                'https://pic.3gbizhi.com/2022/0914/thumb_1680_0_20220914010326732.png',
                'https://pic.3gbizhi.com/2022/0914/thumb_1680_0_20220914010321847.jpg',
                'https://pic.3gbizhi.com/2022/0801/thumb_1680_0_20220801050431315.jpg',
            ]
        },
        methods: {
            nextImag() {
                if (this.index === this.img_list.length - 1) {
                    this.index = -1
                    // return this.index = 0 可以直接return
                }
                this.index++
            },
            prevImag(index, len) {
                //把当前图片索引和图片列表长度传进来，可以省略写this
                if (index === 0) {
                    this.index = len - 1
                }
                this.index--
            }
        },
    })
</script>
</body>
```

## 计算属性：

![image-20221204221131537](http://typora.wrcblog.cn/typora/img/image-20221204221131537.png)

> - 调用的时候不用加括号（只是一个属性）
> - 可以监听属性变化；【属性变化，计算属性重新执行】
> - 并且有缓存（多个计算属性，只执行一次）
> - 计算属性是基于它们的的依赖进行缓存的，只有在相关依赖发生改变时才重新求值，只要相关依赖没有改变就会立即返回之前的值
> - **不能接收参数**

```html

<div>{{ getName }}</div>
<div>{{ getName }}</div>
<div>{{ getName }}</div>
<div>{{ getName }}</div>
<div>{{ getName }}</div>
```

```vue
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            name: '窗前明月光'
        },
        computed: {
            getName() {
                console.log('计算属性')
                return this.name.split('').reverse().join('')
            }
        }
    })
</script>
```

![image-20221204223257704](http://typora.wrcblog.cn/typora/img/image-20221204223257704.png)

### 和methods的区别：

```html
<body>
<div id="app">
    
    <div>{{ get_data_name() }}</div>
    <div>{{ get_data_name() }}</div>
    <div>{{ get_data_name() }}</div>
    <div>{{ get_data_name() }}</div>
    <div>{{ get_data_name() }}</div>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            name: '窗前明月光'
        },
        methods: {
            get_data_name() {
                console.log('属性方法')
                return this.name.split('').reverse().join('')
            }
        }
    })
</script>
</body>
```

> 注意和vue的事件辨别：
>
> vue事件调用无参方法不用加括号，而属性方法单独调用无论有没有参数都要加括号。

## computer、watch、methods的区别：

> methods：可以放入函数，并且没有缓存
>
> watch：监听，当数据发生变化时，才会触发

## 自定义过滤器：

```vue
<body>
<div id="app">
    <div>
        当前时间：{{ now|get_date }}
    </div>
    <ul>
        <li v-for="item in date_list" v-bind:key="item.id">
            id：{{ item.id }} 时间：{{ item.date|date_to_filter }}
        </li>
    </ul>
</div>
<script>
    function getDateDiff(datestamp) {
        //js里面的时间戳时13位数
        var publishTime = datestamp / 1000, //转为10位数时间戳
            d_seconds,
            d_minutes,
            d_hours,
            d_days,
            timeNow = parseInt(new Date().getTime() / 1000),
            d,
            date = new Date(publishTime * 1000), //转为13位数时间戳
            Y = date.getFullYear(),
            M = date.getMonth() + 1,
            D = date.getDate(),
            H = date.getHours(),
            m = date.getMinutes(),
            s = date.getSeconds();
        // 小于10在前面补0
        if (M < 10) {
            M = '0' + M;
        }
        if (D < 10) {
            D = '0' + D;
        }
        if (H < 10) {
            H = '0' + H;
        }
        if (m < 10) {
            m = '0' + m;
        }
        if (s < 10) {
            s = '0' + s;
        }
        d = timeNow - publishTime;
        d_days = parseInt(d / 86400);
        d_hours = parseInt(d / 3600);
        d_minutes = parseInt(d / 60);
        d_seconds = parseInt(d);
        if (d_days > 0 && d_days < 30) {
            return d_days + '天前';
        } else if (d_days <= 0 && d_hours > 0) {
            return d_hours + '小时前';
        } else if (d_hours <= 0 && d_minutes > 0) {
            return d_minutes + '分钟前';
        } else if (d_seconds < 60) {
            if (d_seconds <= 0) {
                return '刚刚发表'
            } else {
                return d_seconds + '秒前';
            }
        } else if (d_days >= 30) {
            return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
        }

}

var vue = new Vue({
        el: '#app',
        data: {
            now: '2021-12-8 22:01:11',
            date_list: [
                {id: 1, date: '2022-12-5 11:12:43'},
                {id: 2, date: '2022-12-5 19:11:40'},
                {id: 3, date: '2022-10-11 13:13:13'},
                {id: 4, date: '2022-11-11 11:11:11'},
            ]
        },
        filters: {
            get_date(date_str) {
                //字符串转时间对象
                let date = new Date(date_str)
                return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
            },
            date_to_filter(date_str) {
                //字符串-->时间对象-->时间戳
                //和当前时间做差，算出相差的时间
                let datestamp = new Date(date_str).getTime()
                return getDateDiff(datestamp)
            }
        }
    })
</script>
</body>
```

### 定义：

```javascript
filters: {
    get_date(date_str) {
        //字符串转时间对象
        let date = new Date(date_str)
        return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
    },
}
```

### 使用：

```javascript
<div>
    当前时间：{{ now|get_date }}
</div>
```

## v-model双向数据绑定：

> 详细见vue文档

```vue
<body>
<div id="app">
    <div>
        <input type="text" v-model="msg">
        <button @click="getMsg">获取数据</button>

<select v-model="selected" multiple>
            <option :value="item.value" v-for="item in select_list" :key="item.value">
                {{ item.label }}
            </option>
        </select>

<input type="text" v-model.lazy.trim="msg">
    </div>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            msg: '欢迎过来到vue！',

// selected: 3, //select标签没加multiple用这个
            selected: [3, 4], //否则用这个
            select_list: [
                {value: 1, label: '火锅'},
                {value: 2, label: '麻辣烫'},
                {value: 3, label: '串串香'},
                {value: 4, label: '干饭'},
            ],

},
        methods: {
            getMsg() {
                // console.log(this.msg)
                console.log(this)
            }
        }
    })
</script>
</body>
```

[[ $t("上一篇") ]]：五天入门Vue--Day1 [[ $t("下一篇") ]]：五天入门Vue--Day3

[[ $t('你觉得文章怎么样') ]]