最近想学一门前端技术防身,看到博客园中写vue的多,那就vue吧。都说vue的官方教程写得好,所以我就从官方教程开始学习。官方教程说“vue(读音/vju& # 720;/,类似于视图)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,vue被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼?还是让人一头雾水嘛。而且我一开始也没有搞清楚vue的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永逸的万能的框架呢。官方教程一开始就讲怎么绑定页面上的元素和JavaScript中的数据,而且是双向绑定,自动更新,功能确实很强大。但是迟迟没有讲怎么和服务器端进行交互,怎么获取服务器端的数据。(后来经过反复阅读教程,才发现其实它一开始就说了“vue的核心库只关注视图层”,是我自己忽略了)。
吹再多的口水,也不如一个能运行的示例来得实在这。个例子也是从vue的官方教程中抄来的。首先,先建立一个<代码>索引。>
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>我第一次Vue app
& lt;脚本src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js”祝辞& lt;/script>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/lodash@4.13.1 lodash.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=皐atch-example”比;
& lt; p>
问是的/没有问题:
& lt;输入v模型="问题"比;
& lt;/p>
& lt; p>{{答案}}& lt;/p>
& lt;/div>
& lt; script>
var watchExampleVM=new Vue ({
埃尔:“# watch-example ',
数据:{
问题:”,
回答:“我不能给你答案,直到你问一个问题!”
},
看:{//如果问题发生改变,这个函数就会运行
问题:功能(咨询,oldQuestion) {
这一点。回答='等待你停止打字……”
this.debouncedGetAnswer ()
}
},
创建:函数(){//癬.debounce”是一个通过Lodash限制操作频率的函数。//在这个例子中,我们希望限制访问yesno。wtf/api的频率//AJAX请求直到用户输入完毕才会发出。想要了解更多关于//' _.debounce函数(及其近亲_.throttle)的知识,//请参考:https://lodash.com/docs #防反跳
this.debouncedGetAnswer=_.debounce (this.getAnswer, 500)
},
方法:{
getAnswer:函数(){
如果(this.question.indexOf (' & # 63; ')===1) {
这一点。回答='问题通常包含一个问号。;-)
返回
}
这一点。回答='想……”
var vm=这
axios.get (“https://yesno.wtf/api”)
不要犹豫(函数(响应){
vm。回答=_.capitalize (response.data.answer)
}）
.catch(函数(错误){
vm。='回答错误!不能达到API。' +错误
}）
}
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
然后使用铬浏览器打开这个文件。下面是运行效果:
这里访问的后端是https://yesno。wtf/api,它传回的数据时json格式的,如果直接访问它,得到的结果如下:
https://yesno。干嘛呢这是一个神奇的网站,当你对某件事拿不定注意,需要别人推你一把时,可以访问它,它会随机返回一个gif动画,点头表示是的,摇头表示,帮你做这个艰难的决定。直接访问https://yesno。我靠,注意在地址栏中不带api字样,可以得到这样的结果:
& lt;脚本src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js”祝辞& lt;/script>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/lodash@4.13.1 lodash.min.js "祝辞& lt;/script>
