Vue基础四

最新推荐文章于 2022-11-28 15:56:18 发布

qq_39325660

最新推荐文章于 2022-11-28 15:56:18 发布

阅读量215

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_39325660/article/details/102777165

版权

fetch

Mock模拟数据请求

 <button @click="getMovies"> getMockData</button>
 
 methods: {
            getMovies() {
             /* 第一个then是为数据格式化，可以格式化的数据类型有： json  text   blob[ 二进制 ]
           第二个then才是得到的数据
        */
                fetch('./mock/movie.json')
                    .then(data => data.json())
                    .then(res => {
                        console.log(res)
                        this.movies = res.movieList
                    })
            }
        }

fetch请求动态数据

<button @click="get"> get </button>
<p>get得到的请求结果：{{ num }} </p>
<button @click="post"> post </button>
<p>post得到的请求结果 {{sum}} </p>


 get() {
                fetch(`${BACK_URL}/get.php?a=5&b=3`)
                    .then(data => {
                        data.text()
                        console.log('data', data)
                    })
                    .then(res => {
                        console.log(res)
                        this.num = res
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            post() {
                fetch(`${BACK_URL}/post.php`, {
                        method: 'POST',
                        headers: new Headers({
                            'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
                        }),
                        body: new URLSearchParams([
                            ["a", 3],
                            ["b", 4]
                        ]).toString()
                    }).then(data => data.text())
                    .then(res => {
                        this.sum = res
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }

封装axios

js代码如下：

function request({
    url,
    method = 'get' || 'GET',
    headers,
    params,
    data,
    baseURL,
    auth,
    withCredentials = false
}) {
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
        // axios.defaults.headers.token = 'sdfsdfs' 
    axios.defaults.baseURL = baseURL
    return new Promise(function(resolve, reject) {
        console.log('method', method)
        switch (method) {
            case 'get' || 'GET':
                axios({
                        url,
                        params,
                    }).then(res => resolve(res))
                    .catch(err => reject(err))
                break;
            case 'POST':
                console.log('post - p')
                const p = new URLSearchParams()
                    // data  {a:1,b:2}
                if (data) { //data存在，那么我们才遍历，不存在，那么我们不遍历
                    for (let key in data) {
                        p.append(key, data[key])
                    }
                }
                axios({
                        url,
                        data: p,
                        method,
                        auth, //针对登录做判断，判断这个用户是普通用户还是超级管理员
                        withCredentials //这个请求是否具有跨源的凭证
                    }).then(res => resolve(res))
                    .catch(err => reject(err))
                break;
            case 'PUT':
                axios({
                        url,
                        params,
                        method
                    }).then(res => resolve(res))
                    .catch(err => reject(err))
                break;
            case 'DELETE':
                axios({
                        url,
                        params,
                        method
                    }).then(res => resolve(res))
                    .catch(err => reject(err))
                break;

            default:
                break;
        }
    })
}

使用封装axios

<div id="app">
    <button @click="getMovies"> 请求Mock数据</button>
    <button @click="post">post请求</button>
</div>



<script src="./request.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            movies: null
        },
        methods: {
            async getMovies() {  //get ***********
                const result = await request({
                    url: './mock/movie.json'
                })
                this.movies = result;
                console.log(this.movies.data.movieList);
            },
            async post() {   //post******************
                const result = await request({
                    url: '/post.php',
                    baseURL: 'http://localhost:8080',
                    method: 'POST',
                    data: {
                        a: 5,
                        b: 4
                    }
                })
                console.log(result)
            }
        }
    })
</script>

计算属性

<div id="app">
    {{ str.split('').reverse().join('') }}  // 在页面进行逻辑转换   不好
    
    <p> {{ newStr }} </p>  //第一种方法
    <p> {{ newMsg }} </p>  //第二种方式
    <input type="text" v-model = "newMsg">
    <p> title: {{ title }} </p>
</div>


 new Vue({
    el: '#app',
    data: {
      str: 'You love yourself !!! ',
      title: ''
    },
    computed: {
      /* 第一种方式： 方法 */
      newStr () {
        return this.str.split('').reverse().join('')
      },
      /* 第二种方式： 存储器 */
      newMsg: {
        get () {
          return this.str.split('').reverse().join('')
        },
        set ( val ) {
          this.title = val 
        }
      }
    }
  })

案例(todoList)

<div id="app">
        <div class="container">
            <div class="row">
                <select name="" id="" v-model='type'>
            <option value="A" selected = "selected"> all </option>
            <option value="F"> finished </option>
            <option value="U"> unFinished </option>
          </select>
            </div>
            <br/>
            <div class="row">
                <ul class="list-group">
                    <li class="list-group-item" v-for="todo in newTodos" :key="todo.id">
                        {{ todo.task }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    
    
      new Vue({
        el: '#app',
        data: {
            type: '',
            todos: [{
                id: 1,
                task: '任务一',
                done: true
            }, {
                id: 2,
                task: '任务二',
                done: false
            }, {
                id: 3,
                task: '任务三',
                done: true
            }]
        },
        computed: {
            newTodos() {
                switch (this.type) {
                    case 'A':
                        return this.todos
                        break;
                    case 'F':
                        return this.todos.filter(item => item.done)
                        break;

                    default:
                        return this.todos.filter(item => !item.done)
                        break;
                }
            }
        }
    })

侦听属性

普通监听

<div id="app">
    <button @click = "increment"> + </button>
    <p>count: {{ count }} </p>
</div>


  new Vue({
    el: '#app',
    data: {
       count: 0
    },
    methods: {
      increment () {
        this.count ++
      }
    }
  })

深度监听

<div id="app">
    <button @click = "increment"> + </button>
    <p>count: {{ num.count }} </p>
</div>
  
   new Vue({
    el: '#app',
    data: {
      num: {
        count: 0
      }
    },
    watch: {
     num: {
       deep: true,
       handler () {
         console.log('handler')
         document.title = this.num.count
       }
     }
    },
    methods: {
      increment () {
        this.num.count ++
      }
    }
  })

通过监听触发某些操作

<div id="app">
        <button @click="increment"> + </button>
        <p>count: {{ count }} </p>
</div>


    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        watch: {
            count() {
                /* watch里面方法名称就是数据的名称 */
                /* 当我们修改count这个数据式，这个方法自动触发了 */
                /* 
                  * 项目中 - 上拉加载
                    异步操作 - 数据请求 
                */
                document.title = this.count
            }
        },
        methods: {
            increment() {
                this.count++
            }
        }
    })

混入

全局混入

<div id="app">
        <p> {{ num }} </p>
        <p> {{ msg }} </p>
        <button @click="aa">aa</button>
        <button @click="bb">bb</button>
</div>

<script src="./mixin1.js"></script>

Vue.mixin({
        methods: {
            ...methods
        }
    })
    
new Vue({
        el: '#app',
        data: {
            num: 100,
            msg: '666'
        }
    })

js代码如下：

 const methods = {
     aa() {
         alert('aa')
     },
     bb() {
         alert('bb')
     }
 }

局部混入

<div id="app">
        <p> {{ num }} </p>
        <p> {{ msg }} </p>
        <button @click="aa">aa</button>
        <button @click="bb">bb</button>
        <p> {{ newMsg }} </p>
</div>

<script src="./mixin1.js"></script>

 new Vue({
        el: '#app',
        mixins: [obj, data],
        data: {
            newMsg: '555666',
            num: 6666688888
        }
    })

js代码如下：

const obj = {
    methods: {
        aa() {
            alert('aa')
        },
        bb() {
            alert('bb')
        }
    }
}

const data = {
    data: {
        num: 2000,
        msg: '9999'
    }
}

axios拦截器

具体文档地址：http://www.axios-js.com/zh-cn/docs/

 <style>
        p {
            display: none;
        }
        
        .show {
            display: block;
        }
 </style>


<div id="app">
        <button @click="getData"> getData </button>
        <p>正在加载中。。。</p>
        <ul>
            <li v-for="movie in movies" :key="movie.id"> {{ movie.name }} </li>
        </ul>
</div>



 // 添加请求拦截器
    axios.interceptors.request.use(function(config) {
        // 在发送请求之前做些什么
        document.querySelector('p').className = 'show';


        return config;
    }, function(error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function(response) {
        // 对响应数据做点什么
        document.querySelector('p').className = '';
        return response;
    }, function(error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });


    new Vue({
        el: '#app',
        data: {
            movies: null
        },
        methods: {
            getData() {
                axios({
                    url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1384809",
                    headers: {
                        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15717495051043677054394"}',
                        'X-Host': 'mall.film-ticket.film.list'
                    }
                }).then(res => {
                    console.log('res', res.data.data.films)
                    this.movies = res.data.data.films
                }).catch(err => {
                    console.log(err)
                })

            }
        }
    })

qq_39325660

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础四

fetchMock模拟数据请求 <button @click="getMovies"> getMockData</button> methods: { getMovies() { /* 第一个then是为数据格式化，可以格式化的数据类型有： json text blob[ 二进制 ] 第...
复制链接

扫一扫