扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Vue是一个专注于前端UI的框架。它的主要能力是:
本篇文字会讲解声明式绑定,并且会谈及Vue的引入、数据绑定、事件绑定、Vue实例、指令。特别的,同样的案例,我也用来讲解Vue最为引以为傲的组件技术。案例是一个微小的叫做counter的应用,看起来是这样的:
有一个标签显示数字0,当点击按钮“+”,数字会每次加1。代码如下。你可以直接保存代码到html文件中,然后用浏览器打开,如果是IE的话必须是IE8或者或以上版本:
- {{count}}
- var app = new Vue({
- data () {
- return {count: 0}
- },
- methods: {
- inc () {this.count++}
- }
- })
- app.$mount('#app')
你可以实际的操作,看到按钮和数字的互动变化。然后我们来看Vue如何做到的。
首先,必须引入Vue.js库。我们使用
这一次,我们见到了新的内容:
尽管这个案例太小了,还看不出太大的好处。但是这样的组件引入,让相关性强的html元素和对应的数据、代码内聚到了一起,这是符合软件工程原则的、因此是值得鼓励的行为。
新组件完全可以分离到另外一个script文件内,从而达到不仅仅是逻辑上的代码和主html分离,也做到了物理上的分离。
另外,使用template在代码内些html,还是比较烦人:
此时,可以使用的替代方法:
当然,后两种方法就需要转译器和打包工具的配合。比如Babel和webpack的。这些内容,请搜索参考
暂时不在讨论之列。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流