vue案例重构_web前端项目实例网站

vue案例重构_web前端项目实例网站,第1张

vue案例重构_web前端项目实例网站 上期咱们聊到了mvvm模型,这一期咱们来聊一下vue的实例,这个是个很重要的东西,千万别轻视了,下面开始:目标:1 了解实例中的data用法和method用法最基本的实例是什么样子的呢,是这样的啦:el: 表示要 *** 作的页面元素, 必填参data: 数据, 可以理解为面向对象中的”属性“,他主要是存储数据的,当程序运行时,监控页面传来的数据,进行修改,启动时根据他的数据渲染页面。

methods: 方法, 可以理解为面向对象中的”方法“,根据方法可以改变属性的值,从而改变页面,请求交互,一系列的 *** 作这样理解是不是就很清楚啦?为了再详细解释一下这个概念,咱们来做一个练习:这个练习很经典,就是实现一个加法器,比如左边两个输入框,右边为结果框,当左边输入时点击等于=号,计算结果:目的:锻炼data和method的理解,下面开始我的表演:图片在这里,该肿么办呢?那按照步骤来吧!1 先创建html文件,命名method.html2 完成上文提到的vue三部曲(这个一定要掌握,后面项目要用到)3 vue三部曲搞完之后搞页面,创造三个input框,一个按钮4使用v-model绑定属性5 绑定方法这样就可以算出来啦!总结:通过两个input框绑定数值,这样当input框输入值时,通过v-model绑定了值,在等于号加上方法,当输入值时,点击等于号,调用方法,这样双向绑定的方法会计算出来!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/671509.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-19
下一篇 2022-04-19

发表评论

登录后才能评论

评论列表(0条)

保存