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

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

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

  • el: 表示要操作的页面元素, 必填参
  • data: 数据, 可以理解为面向对象中的”属性“,他主要是存储数据的,当程序运行时,监控页面传来的数据,进行修改,启动时根据他的数据渲染页面。
  • methods: 方法, 可以理解为面向对象中的”方法“,根据方法可以改变属性的值,从而改变页面,请求交互,一系列的操作

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

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

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

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

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

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

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

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

4使用v-model绑定属性

5 绑定方法

这样就可以算出来啦!

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