高考考试网
当前位置: 首页 高考资讯

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

时间:2023-06-16 作者: 小编 阅读量: 5 栏目名: 高考资讯

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

上期咱们聊到了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绑定了值,在等于号加上方法,当输入值时,点击等于号,调用方法,这样双向绑定的方法会计算出来!

    推荐阅读
  • 抖音制作功能(抖音的影响是越来越大)

    续上篇文章粉丝要求,我们来继续聊聊抖音吧,今天主要讲一下抖音的的一款软件。2018年3月19日,抖音确定新slogan“记录美好生活”。最后我还是留个上次的资料,有兴趣的可以私信我“资料”,并不是直接给你发链接,请按里面的简单要求免费领取,不能接受的请绕道,谢谢。获取方式:1、请评论区留下你的评论:来一份2、私信我发送:“资料”二字即可领取!

  • 大ip是什么意思(大ip的意思)

    大IP指超级知识产权产品。也就是说此时的IP更多的只是代表智力创造的比如发明、文学和艺术作品这些著作的版权。进一步引申来说,能够仅凭自身的吸引力,挣脱单一平台的束缚,在多个平台上获得流量,进行分发的内容,就是一个IP,它是能带来效应的“梗“或者“现象”,这个“梗”可以在各种平台发挥效应,因此IP也可以说是一款产品,能带来效应的产品。

  • 爱情公寓5第32集大力赢了吗(爱情公寓5大力夺得冠军)

    爱情公寓5第32集大力赢了吗?以下内容大家不妨参考一二希望能帮到您!32集介绍:大力的状态很不好,大家希望她能放弃比赛,可她执意要继续参加,张伟分析整个真爱病毒事件,突然想起美嘉是亲吻小小布额头而传染的病毒,于是他在大力即将上场参与比赛前亲吻了她的额头,就这样治愈了大力的感冒,而自己也顺利得了感冒。站在比赛舞台上的大力恢复了原有的实力,站上了巅峰,顺利的取得了冠军。

  • 惊艳的男孩名古风(自带国风气质的男孩名)

    自带国风气质的男孩名,。

  • 中年女人抗衰期(人老了器官会缩小)

    保养守则运动时人的心率加快、心肌收缩加强,能让心脏肌肉更强壮,美国约翰·霍普金斯大学研究发现,以下三类运动护心效果最好。但男性有强壮的肌肉支撑,而女性在更年期时,保护骨骼的雌激素水平迅速下降,造成脊椎萎缩更多。其次,变矮还与人体对椎间盘的长期挤压有关。椎间盘含水量高达88%,其水分会随着年龄增长而减少,人便会不可逆转地变矮。

  • 网易云音乐歌词怎么显示(网易云音乐歌词显示方法)

    首先让我们打开网易云音乐应用我们可以在右下角发现一个写着词的框,只要点击这个就能开启或者关闭桌面歌词,我来为大家科普一下关于网易云音乐歌词怎么显示?下面希望有你要的答案,我们一起来看看吧!网易云音乐歌词怎么显示首先让我们打开网易云音乐应用。然后在设置里面找到歌词的选项。

  • 寰怎么读(寰是什么意思)

    寰,huán本义:王畿,古代帝王京城周围千里以内的地方后指广大的地域部首:宀,下面我们就来聊聊关于寰怎么读?接下来我们就一起去了解一下吧!寰怎么读寰,huán。部外笔画:13,总笔画:16。

  • 奢侈品是否应该具有高品质(奢侈品奢侈品到底是什么)

    虽说不同阶层的人群对于奢侈品的理解不同,但是奢侈品的特点是基本上不变的,下面,秘觅奢训就来为大家讲述奢侈品的三大特点!富贵性奢侈品的品牌魅力是富贵豪华的。

  • 马齿苋可不可以染头发 马齿苋能染头发,具体过程是怎样的?

    2、马齿苋性寒,具有清热止痒的效果,夏天皮脂分泌旺盛,不止脸上,头皮也容易长红疹和脓包,用马齿苋煮水洗头可以改善头皮瘙痒和红肿症状。

  • 有生之年的意思(什么是有生之年)

    有生之年的意思意思:一生之中最后的年月,即余年。耄,音“冒”,耋,音“迭”。常见于对更新很慢,或剧情特别长,或经常跳票的作品等的吐槽。可以用来感叹等待了这么长时间,终于见到了:“没想到竟然有生之年还能见到!”也可以用来指看到的希望渺茫:“估计有生之年都见不到了。”