Vue组件示例代码

最新推荐文章于 2024-02-08 10:28:07 发布

@、

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量161

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43608642/article/details/117413226

版权

vue组件

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <!-- 因为 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>
    </head>
    <body>
        <div id="watch-example">
            <p>
              请输入您的问题:
              <input v-model="question">
            </p>
            <p>{{ answer }}</p>
          </div>
    </body>
</html>
<script type="text/javascript">
    var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
        question: '',
        answer: '我现在还不能回答你问题，直到你输入完你的问题！'
    },
    watch: {
        // 如果 `question` 发生改变，这个函数就会运行
        question: function (newQuestion, oldQuestion) {
        this.answer = '等待你停止输入......'
        this.debouncedGetAnswer()
        }
    },
    created: function () {
        // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
        // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
        // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
        // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
        // 请参考：https://lodash.com/docs#debounce
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
    },
    methods: {
        getAnswer: 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)
            })
            .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
            })
        }
    }
    })
</script>