上期咱们聊到了mvvm模型,这一期咱们来聊一下vue的实例,这个是个很重要的东西,千万别轻视了,下面开始:

目标:1 了解实例中的data用法和method用法

最基本的实例是什么样子的呢,是这样的啦:

vue案例重构(web前端项目实例网站)(1)

这样理解是不是就很清楚啦?

为了再详细解释一下这个概念,咱们来做一个练习:

这个练习很经典,就是实现一个加法器,比如左边两个输入框,右边为结果框,当左边输入时点击等于=号,计算结果:

目的:锻炼data和method的理解,下面开始我的表演:

vue案例重构(web前端项目实例网站)(2)

图片在这里,该肿么办呢?那按照步骤来吧!

1 先创建html文件,命名method.html

vue案例重构(web前端项目实例网站)(3)

2 完成上文提到的vue三部曲(这个一定要掌握,后面项目要用到)

vue案例重构(web前端项目实例网站)(4)

3 vue三部曲搞完之后搞页面,创造三个input框,一个按钮

vue案例重构(web前端项目实例网站)(5)

4使用v-model绑定属性

vue案例重构(web前端项目实例网站)(6)vue案例重构(web前端项目实例网站)(7)

5 绑定方法

vue案例重构(web前端项目实例网站)(8)

这样就可以算出来啦!

总结:通过两个input框绑定数值,这样当input框输入值时,通过v-model绑定了值,在等于号加上方法,当输入值时,点击等于号,调用方法,这样双向绑定的方法会计算出来!