Vue快速了解并上手-3

最新推荐文章于 2024-05-09 15:06:50 发布

菜鸟一枚在这

最新推荐文章于 2024-05-09 15:06:50 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121283589

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

系列文章目录

上期我们讲解了系统指令、过滤器、自定义指令等等内容，这期我们继续讲解vue相关知识

文章目录

系列文章目录
1、计算属性
- 1.1、计算属性实现表格内容的搜索
2、在Vue中实现请求发送
总结

1、计算属性

场景:当表达式过于复杂的情况下可以采用计算属性对于任何复杂逻辑都可以采用计算属性
常用的计算属性的例子我们可以去查询Vue的官方文档，这里就不做过多的阐述

1.1、计算属性实现表格内容的搜索

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="add">
        品牌名称:
        <input type="text" v-model="name">
        <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
    </div>

    <div class="add">
        品牌名称:
        <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in newList" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>
                    <a href="#" @click.prevent="deleItem(index)">删除</a>
                </td>
            </tr>
            <tr v-if="newList.length===0">
                <td colspan="4">没有品牌数据</td>
            </tr>
        </table>
    </div>
</div>
<script src="./vue.js"></script>

<script>
    /*
    1. 静态页面 准备
    2. 实例化一个Vue
    3. 定义表格数据
    4. 采用v-for 循环将静态内容切换为动态内容
    5. 采用v-if控制提示消息
    */
    // 准备数据
    let v=new Vue({
        el: '#app',
        data: {
            // 模拟ajax的数据
            list: [{
                name: '大娃',
                date: new Date()
            }, {
                name: '二娃',
                date: new Date()
            }, {
                name: '三娃',
                date: new Date()
            }],
            // 我要添加的数据
            name: '',
            searchVal:''
        },
        methods: {
            // 添加
            addItem() {
                this.list.unshift({
                    name: this.name,
                    date: new Date()
                })
                this.name = ''
            },
            // 删除
            deleItem(index) {
                if (confirm('是否删除')) {
                    this.list.splice(index, 1)
                }
            }
        },
        computed:{
            newList(){
                return this.list.filter((v)=>{
                    return v.name.startsWith(this.searchVal)
                })
            }
        }
    })
</script>
</body>

</html>

它的基本使用方式为：

在Vue实例选项中定义 computed:{ 计算属性名: 带返回值的函数 }

computed:{
            newList(){
                return this.list.filter((v)=>{
                    return v.name.startsWith(this.searchVal)
                })
            }
        }

2、在Vue中实现请求发送

原理 : Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。

vue-resource: Vue.js的插件，已经不维护，不推荐使用
axios : 不是vue的插件，可以在任何地方使用，推荐

2.1、axios

基本使用：

// 基本用法
axios.get(url).then((res) => {
// 请求成功 会来到这 res响应体
}).catch((err) => {
// 请求失败 会来到这 处理err对象
})

// 获取
axios.get('http://localhost:3000/brands').then().catch()
// 删除
axios.delete('http://localhost:3000/brands/1').then().catch()
// 添加
axios.post('http://localhost:3000/brands', {name: '小米', date: new Date()}).then().catch()
// 修改
axios.put('http://localhost:3000/brands/1', {name: '小米', date: new
Date()}).then().catch()
// get模糊搜索
axios.get("http://localhost:3000/brands?name_like=" + "aaa").then().catch()

用例：

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="add">
        品牌名称:
        <input type="text" v-model="name">
        <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
    </div>

    <div class="add">
        品牌名称:
        <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in newList" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>
                    <a href="#" @click.prevent="deleItem(index)">删除</a>
                </td>
            </tr>
            <tr v-if="newList.length===0">
                <td colspan="4">没有品牌数据</td>
            </tr>
        </table>
    </div>
</div>
<script src="./vue.js"></script>

<script>
    /*
    1. 静态页面 准备
    2. 实例化一个Vue
    3. 定义表格数据
    4. 采用v-for 循环将静态内容切换为动态内容
    5. 采用v-if控制提示消息
    */
    // 准备数据
    let v=new Vue({
        el: '#app',
        data: {
            // 模拟ajax的数据
            list: [{
                name: '大娃',
                date: new Date()
            }, {
                name: '二娃',
                date: new Date()
            }, {
                name: '三娃',
                date: new Date()
            }],
            // 我要添加的数据
            name: '',
            searchVal:''
        },
        methods: {
            // 添加
            addItem() {
                this.list.unshift({
                    name: this.name,
                    date: new Date()
                })
                this.name = ''
            },
            // 删除
            deleItem(index) {
                if (confirm('是否删除')) {
                    this.list.splice(index, 1)
                }
            }
        },
        computed:{
            newList(){
                return this.list.filter((v)=>{
                    return v.name.startsWith(this.searchVal)
                })
            }
        },
        mounted(){
            axios.get('http://localhost:3000/brands').then((res) => {
                this.list = res.data
            }).catch((err) => {
                console.log(err)
            })
        }
    })
</script>
</body>

</html>

db.json

{
  "brands": [
    {
      "id": 1,
      "name": "铁蛋儿",
      "date": "2019-08-02T03:40:02.575Z"
    },
    {
      "id": 2,
      "name": "小白龙",
      "date": "2019-08-02T03:40:18.988Z"
    },
    {
      "name": "奔波儿灞",
      "date": "2020-06-27T07:29:36.256Z",
      "id": 3
    }
  ]
}

2.1.1、axios表格

将表格案例中列表数据实现用axios请求

使用axios请求列表

引入axios
在mounted（相当于window.onload）函数中发送请求获取数据
获取的数据赋值给list列表

// mounted函数 加载完DOM再执行的函数 相当于window.onload
mounted() {
	axios.get("http://localhost:3000/brands").then(result => {
		this.list = result.data;
	});
}

2.1.3、实现表格获取请求数据

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="add">
        品牌名称:
        <input type="text" v-model="name">
        <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
    </div>

    <div class="add">
        品牌名称:
        <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in newList" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>
                    <a href="#" @click.prevent="deleItem(index)">删除</a>
                </td>
            </tr>
            <tr v-if="newList.length===0">
                <td colspan="4">没有品牌数据</td>
            </tr>
        </table>
    </div>
</div>
<script src="./vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
    1. 静态页面 准备
    2. 实例化一个Vue
    3. 定义表格数据
    4. 采用v-for 循环将静态内容切换为动态内容
    5. 采用v-if控制提示消息
    */
    // 准备数据
    let v=new Vue({
        el: '#app',
        data: {
            // 模拟ajax的数据
            list: [{
                name: '大娃',
                date: new Date()
            }, {
                name: '二娃',
                date: new Date()
            }, {
                name: '三娃',
                date: new Date()
            }],
            // 我要添加的数据
            name: '',
            searchVal:''
        },
        methods: {
            // 添加
            addItem() {
                this.list.unshift({
                    name: this.name,
                    date: new Date()
                })
                this.name = ''
            },
            // 删除
            deleItem(index) {
                if (confirm('是否删除')) {
                    this.list.splice(index, 1)
                }
            }
        },
        computed:{
            newList(){
                return this.list.filter((v)=>{
                    return v.name.startsWith(this.searchVal)
                })
            }
        },
        mounted(){
            axios.get('http://localhost:3000/brands').then((res) => {
                this.list = res.data
            }).catch((err) => {
                console.log(err)
            })
        }
    })
</script>
</body>

</html>

2.1.4、实现表格数据删除

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="add">
            品牌名称:
            <input type="text" v-model="name" v-foucs>
            <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
        </div>

        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in newList" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date|fmDate}}</td>
                    <td>
                        <a href="#" @click.prevent="deleItem(item.id)">删除</a>
                    </td>
                </tr>
                <tr v-if="newList.length===0">
                    <td colspan="4">没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script src="./moment.js"></script>
    <script src="./axios.min.js"></script>
    <script>
        /* 
        1. 静态页面 准备
        2. 实例化一个Vue
        3. 定义表格数据
        4. 采用v-for 循环将静态内容切换为动态内容
        5. 采用v-if控制提示消息
        */
        // 准备数据
        // 过滤器过滤日期
        Vue.filter('fmDate', function (v) {
            return moment(v).format('YYYY-MM-DD, h:mm:ss a')
        })
        // 自定义指令获取焦点
        Vue.directive('foucs', {
            inserted: function (el) {
                el.focus()
            }
        })
        new Vue({
            el: '#app',
            data: {
                // 模拟ajax的数据
                list: [{
                    name: '大娃',
                    date: new Date()
                }, {
                    name: '二娃',
                    date: new Date()
                }, {
                    name: '三娃',
                    date: new Date()
                }],
                // 我要添加的数据
                name: '',
                // 搜索的内容
                searchVal: ''
            },
            mounted() {
                this.getData()
            },
            methods: {
                // 获取列表方法
                getData() {
                    axios.get('http://localhost:3000/brands').then((res) => {
                        this.list = res.data
                    }).catch((err) => {
                        console.log(err)
                    })
                },
                // 添加
                addItem() {
                    this.list.unshift({
                        name: this.name,
                        date: new Date()
                    })
                    this.name = ''
                },
                // 删除
                deleItem(id) {
                    if (confirm('是否删除')) {
                        axios.delete('http://localhost:3000/brands/' + id)
                            .then((res) => {
                                this.getData()
                            }).catch((err) => {
                                console.log(err)
                            })
                    }
                }
            },
            // 计算属性实现搜索功能
            computed: {
                newList() {
                    return this.list.filter((v) => {
                        return v.name.startsWith(this.searchVal)
                    })
                }
            }
        })
    </script>
</body>

</html>

2.1.5、实现表格数据的添加

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="add">
        品牌名称:
        <input type="text" v-model="name" v-foucs>
        <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
    </div>

    <div class="add">
        品牌名称:
        <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in newList" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date|fmDate}}</td>
                <td>
                    <a href="#" @click.prevent="deleItem(item.id)">删除</a>
                </td>
            </tr>
            <tr v-if="newList.length===0">
                <td colspan="4">没有品牌数据</td>
            </tr>
        </table>
    </div>
</div>
<script src="./vue.js"></script>
<script src="./moment.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
    1. 静态页面 准备
    2. 实例化一个Vue
    3. 定义表格数据
    4. 采用v-for 循环将静态内容切换为动态内容
    5. 采用v-if控制提示消息
    */
    // 准备数据

    // 自定义指令获取焦点
    Vue.directive('foucs', {
        inserted: function (el) {
            el.focus()
        }
    })
    new Vue({
        el: '#app',
        data: {
            // 模拟ajax的数据
            list: [{
                name: '大娃',
                date: new Date()
            }, {
                name: '二娃',
                date: new Date()
            }, {
                name: '三娃',
                date: new Date()
            }],
            // 我要添加的数据
            name: '',
            // 搜索的内容
            searchVal: ''
        },
        mounted() {
            this.getData()
        },
        methods: {
            // 获取列表方法
            getData() {
                axios.get('http://localhost:3000/brands').then((res) => {
                    this.list = res.data
                }).catch((err) => {
                    console.log(err)
                })
            },
            // 添加商品
            addItem() {
                axios.post('http://localhost:3000/brands', {
                    name: this.name,
                    date: new Date()
                }).then((res) => {
                    const {
                        status
                    } = res
                    if (status == 201) {
                        // 成功以后重新刷列表
                        this.getData()
                    }
                    this.name=''
                }).catch((err) => {
                    console.log(err)
                })
            },
            // 删除
            deleItem(id) {
                if (confirm('是否删除')) {
                    axios.delete('http://localhost:3000/brands/' + id)
                        .then((res) => {
                            this.getData()
                        }).catch((err) => {
                        console.log(err)
                    })
                }
            },


        },
        // 计算属性实现搜索功能
        computed: {
            newList() {
                return this.list.filter((v) => {
                    return v.name.startsWith(this.searchVal)
                })
            }
        }
    })
</script>
</body>

</html>

2.1.6、实现表格数据的搜索

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="add">
        品牌名称:
        <input type="text" v-model="name" v-foucs>
        <input :disabled="name.length===0" @click="addItem" type="button" value="添加">
    </div>

    <div class="add">
        品牌名称:
        <input type="text" placeholder="请输入搜索条件" v-model="searchVal">
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in newList" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date|fmDate}}</td>
                <td>
                    <a href="#" @click.prevent="deleItem(item.id)">删除</a>
                </td>
            </tr>
            <tr v-if="newList.length===0">
                <td colspan="4">没有品牌数据</td>
            </tr>
        </table>
    </div>
</div>
<script src="./vue.js"></script>
<script src="./moment.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
    1. 静态页面 准备
    2. 实例化一个Vue
    3. 定义表格数据
    4. 采用v-for 循环将静态内容切换为动态内容
    5. 采用v-if控制提示消息
    */
    // 准备数据
    // 自定义指令获取焦点
    Vue.directive('foucs', {
        inserted: function (el) {
            el.focus()
        }
    })
    new Vue({
        el: '#app',
        data: {
            // 模拟ajax的数据
            list: [{
                name: '大娃',
                date: new Date()
            }, {
                name: '二娃',
                date: new Date()
            }, {
                name: '三娃',
                date: new Date()
            }],
            // 我要添加的数据
            name: '',
            // 搜索的内容
            searchVal: ''
        },
        mounted() {
            this.getData()
        },
        methods: {
            // 获取列表方法
            getData() {
                axios.get('http://localhost:3000/brands').then((res) => {
                    this.list = res.data
                }).catch((err) => {
                    console.log(err)
                })
            },
            // 添加商品
            addItem() {
                axios.post('http://localhost:3000/brands', {
                    name: this.name,
                    date: new Date()
                }).then((res) => {
                    const {
                        status
                    } = res
                    if (status == 201) {
                        // 成功以后重新刷列表
                        this.getData()
                    }
                }).catch((err) => {
                    console.log(err)
                })
            },
            // 删除
            deleItem(id) {
                if (confirm('是否删除')) {
                    axios.delete('http://localhost:3000/brands/' + id)
                        .then((res) => {
                            this.getData()
                        }).catch((err) => {
                        console.log(err)
                    })
                }
            },


        },
        // 计算属性实现搜索功能
        computed: {
            newList() {
                return this.list.filter((v) => {
                    return v.name.startsWith(this.searchVal)
                })

            }
        },
        watch: {
            searchVal(newV, oldV) {
                axios.get("http://localhost:3000/brands?name_like=" + newV)
                    .then(res => {
                        this.list = res.data
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
        }
    })
</script>
</body>

</html>

2.2、watch-基本使用

特性: 监听data数据变化时自动触发函数

计算属性和watch区别：

计算属性必须要有返回值所以说不能写异步请求因为有人用它的返回值(插值表达式)
watch选项中可以写很多逻辑不需要返回值因为没有人用它的返回值

// 基本用法
data: {
	msg: 'abc'
},
watch: {
	// data中的属性msg发生改变时 自动触发该函数
	msg(newV, oldV) {
		console.log(newV, oldV)
	}
}

总结

本文主要讲解了axios、计算属性、watch等等内容，下期我们讲解组件方面的内容。

菜鸟一枚在这

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue快速了解并上手-3

系列文章目录上期我们讲解了系统指令、过滤器、自定义指令等等内容，这期我们继续讲解vue相关知识文章目录系列文章目录1、计算属性1.1、计算属性实现表格内容的搜索2、在Vue中实现请求发送2.1、axios2.1.1、axios表格2.1.3、实现表格获取请求数据2.1.4、实现表格数据删除2.1.5、实现表格数据的添加2.1.6、实现表格数据的搜索2.2、watch-基本使用总结1、计算属性场景:当表达式过于复杂的情况下可以采用计算属性对于任何复杂逻辑都可以采用计算属性常用的计算属性的例
复制链接

扫一扫