第三天接触vue的心得_vue第三天心得-CSDN博客

本文链接：https://blog.csdn.net/qq_38026000/article/details/110352684

文章目录

一、watch

案例：百度搜索框
接口：百度：http://suggestion.baidu.com/su?cb=callback&wd=123

1、深浅监听

注意：

深监听只能获取到最新的数据，这种方式不推荐使用,如果需要使用，需要转为浅监听方式
需要监听的方法名一定要与data中声明的属性名保持一致

<div id='app'>
        <input type="text" v-model='msg'>
       <div> {{msg}}</div>
       <hr>
       <input type="text" v-model='json.name'>
       <input type="text" v-model='b'>
       <div>{{json.name}}</div>
    </div>

let vm = new Vue({
        el: '#app',
        data: {
            msg:'hello',
            json:{
                name:'张三',
                age:20
            },
            b:''
        },
        methods: {
            // 可以通过这种方式进行深浅转换
            fn(){
                 var a = this.json.name
                 return a
            }
        },
        watch: {
            // 浅监听   基本数据类型
            msg(newVal,oldVal){
                console.log(newVal,oldVal)
           },
        //    这种方式监听不到数据
        //    json(newVal,oldVal){
        //         console.log(newVal,oldVal)
        //    }
            //深监听
           json:{
               handler(a){
                    console.log(a)
               },
               deep:true
           },
        //    监听b属性
           b(a,b){
                console.log(a)
           }

        },
        mounted() {
           console.log(this.fn())
           this.b = this.fn()
        },     
    })

2、百度案例

跨域的解决 jsonp
通过监听用户输入，发送请求，渲染页面

<body>
    <div id="app">
        <input type="text" v-model='search' @keydown.up.prevent='up' @keydown.down='down' @keydown.enter='enter'>
        <ul>
            <li v-for='(item,index) in arr' :key='item' :class='[index==n?"select":""]'>{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                search: "",
                arr: [],
                n: -1,
            },
            methods: {
                down() {
                    console.log('下');
                    this.n++;
                    if (this.n > this.arr.length - 1) {
                        this.n = 0
                    }
                },
                up() {
                    console.log(11);
                    this.n--;
                    if (this.n < 0) {
                        this.n = this.arr.length - 1
                    }
                },
                enter() {
                    //在下拉列表的范围内点击跳转到对应的搜索页面
                    if (this.n >= 0 && this.n >= this.arr.length - 1) {
                        window.open('https://www.baidu.com/s?wd=' + this.arr[this.n])
                    } else {
                        window.open('https://www.baidu.com/s?wd=' + this.search)
                    }
                }
            },
            watch: {
                search() {
                    if(this.search==''){
                        return
                    }
                    // 发送数据请求 jsonp方式
                    var os = document.createElement('script');
                    os.src = 'http://suggestion.baidu.com/su?cb=aa&wd=' + this.search;
                    document.body.appendChild(os)
                }
            }
        })
        function aa(res) {
            console.log(res);
            // 找到与vm中data的关系，并且赋值
            vm.arr = res.s
        }
    </script>
</body>

二、过滤器

全局： Vue.fliter(‘过滤器名字’,回调函数) 回调函数中做的是业务逻辑
局部：在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }

1.电话号码过滤

<body>
    <div id="app">
        {{tel|abc}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                tel: "13421212189",
            },
            filters: {
                abc: function (tel) {
                    return tel.slice(0, 3) + '****' + tel.slice(7)
                }
            }
        })
    </script>
</body>

2.过滤价格

 <div id='app'>
        <!-- | 管道符  -->
        {{price | filterPrice}}
    </div>

Vue.filter('filterPrice',(price)=>{
    return price.toFixed(2)
})

3.过滤时间

padStart 首位补零方法 padEnd 末尾补零

let month = ((date.getMonth()+1)+’’).padStart(2,‘0’)

<div id='app'>
        <div>当前时间{{ time | filterTime}}</div>
    </div>

Vue.filter('filterTime',(time)=>{
    // padStart   首位补零方法  padEnd  末尾补零
    let date = new Date(time)
    console.log(date)
    // 年
    let year = date.getFullYear()
    // 月
    let month = ((date.getMonth()+1)+'').padStart(2,'0')
    // 日
    let day = (date.getDate()+'').padStart(2,'0')
    // 时
    let hours = (date.getHours()+'').padStart(2,'0')
    // 分
    let minutes = (date.getMinutes()+'').padStart(2,'0')
    // 秒
    let seconds = (date.getSeconds()+'').padStart(2,'0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})

三、计算属性

1.通过计算得出来的，所以就没有初始值

computed:应用场景:购物车的总价特点：多个数据影响一个数据
watch:应用场景特点:一个数据影响多个数据
copmuted: 方法是不需要调用的，直接在页面使用即可
methods: 必须要调用的

<div id='app'>
        <table border="1" style="border-collapse:collapse" width='500'>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>分数</th>
                <th>操作</th>
            </tr>
            <tr v-for='(item,index) in list' :key='item.id'>
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>
                    <input type="number" v-model.number='item.score'>
                </td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
           
            <tr v-if='list.length==0'>
                <td colspan="4">暂无数据</td>
            </tr>
            <tr v-else>
                <td colspan="4">平均分:{{avg}}</td>
            </tr>
        </table>
    </div>

let vm = new Vue({
        el: '#app',
        data: {
            list:[
                {id:1,name:'张三',score:80},
                {id:2,name:'李四',score:90},
                {id:3,name:'王五',score:60},
                {id:4,name:'赵六',score:87},
                {id:5,name:'王麻子',score:36},
            ]
        },
        methods: {
        },
        // 计算属性
        computed: {
            avg(){
                var sum=0;
                this.list.forEach(item=>{
                    sum+=item.score
                }) 
                return sum/this.list.length
            }
        },
    })