【vue】vue入门-使用vue实现简单的一问一答小案例

最新推荐文章于 2023-07-25 11:34:03 发布

原创最新推荐文章于 2023-07-25 11:34:03 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

76 篇文章

订阅专栏

本文介绍如何使用Vue.js监听用户输入并在输入变化时向指定API发送请求获取yes/no回答及对应动态图的过程。

首先引入vue的包:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本次案例除了引入vue的包外，还需要引入第三方的包:

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

首先我们找到一个接口:

https://yesno.wtf/api

该接口是提供一个json接口，返回问题的答案yes或者no以及相应的动态图

html结构如下:

<body>
    <div id="watch-example">
        <p>
            提出一个答案只能是Yes/No的问题:
            <input type="text" v-model="question" />
        </p>
        <p>
            {{ answer }}<br>
            <img src="https://yesno.wtf/assets/yes/7-653c8ee5d3a6bbafd759142c9c18d76c.gif" width="300px" height="200px">
        </p>
        <!--no: https://yesno.wtf/assets/no/21-05540164de4e3229609f106e468fa8e7.gif-->
        <!--yes: https://yesno.wtf/assets/yes/7-653c8ee5d3a6bbafd759142c9c18d76c.gif-->
    </div>
</body>

然后我们创建一个Vue实例，使用watch对输入框进行监听。如果发生变化，则向https://yesno.wtf/api发起请求，并处理响应过来的json字符串。

<script>
    var watchExampleVm = new Vue({
        el:'#watch-example',
        data:{
            question:'',
            answer:'没有问题我怎么回答?'
        },
        watch:{
            //如果question发生改变，这个函数就会运行
            question:function(){
                this.answer = '等待关闭';
                //调用方法
                this.getAnswer()
            }
        },
        methods:{
            // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
            // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
            // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
            // 请参考：https://lodash.com/docs#debounce
            getAnswer: _.debounce(function(){
                if (this.question.indexOf('?') === -1) {
                    this.answer = '问题通常有一个标记. ;-)';
                    return
                }
                this.answer = '思考中';
                var vm = this;
                axios.get('https://yesno.wtf/api').then(function(response){
                    vm.answer = _.capitalize(response.data.answer);
                    var img = document.getElementsByTagName("img")[0];
                    //用于替换所用的图片
                    img.src = response.data.image;
                }).catch(function(error){
                    vm.answer = '错误，不能捕捉到API.' + error
                }),
                // 判定用户停止输入等待的毫秒数
                500
            })
        }
    })
</script>

运行结果如下:

当输入带?(英文的)的提问？就会发出请求