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

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

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

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

    推荐阅读
  • 度字书法楷书格式(字楷书如何写出味道)

    关注书画少年俱乐部普及青少年素质教育,弘扬中国传统文化。这样一个耳朵,看来轻描淡写地过来,实际上它却有一定难度。要写好这个“耳朵”,需要下一番工夫。笔顺不要错,先写好耳朵之后,再写左边这一竖笔。再注意一点,这个“日”字,写完之后这一长横要放到耳朵下面来。向上倾斜,向下倾斜,挑钩。所以写好这个“阳”字的话,具有一定的难度。

  • 广西桂林阳朔旅行攻略(桂林阳朔旅游全攻略)

    几分钟耐心看完,一定让你在桂林的旅程玩的更好。桂林游必去的景点是哪些?吃住,交通,线路安排、酒店、门票等等要怎么安排才能省心省钱呢?

  • 桂花的花语不包括什么(桂花的花语)

    跟着小编一起来看一看吧!桂花的花语不包括什么桂花的花语是吸入你的气息。永伴佳人,桂树是香满天下,誉满天下的宝树,是崇高美好的、吉祥的象征。国内国外还不约而同的把桂花看作高雅和荣誉的象征桂花还是友谊与爱情的象征桂花也曾被作为友好之物互相赠送桂花是地位和财富的象征桂花树是贞洁、荣誉的象征。

  • 张少华的电视剧(张少华参演的电视剧介绍)

    张少华的电视剧饰演佟白氏《勇敢的心2》该剧以国文教员佟家儒为中心,讲述了一个普通、平凡的人在抗战年代里从对战事的漠不关心到逐渐运用自己的智慧对抗敌人,最终将侵略者赶出国门的故事。饰演涂师太《我们的纯真年代》该剧主要讲述了前进巷两个大院、四户人家、三代人在三十年间发生的故事。饰演建平妈《家有一老》该剧以一笔五十万巨款神秘失踪开场,巨款消失导致余志刚一家陷入巨大的财政与情感危机中。

  • 飘雪粤语谐音歌词(飘雪粤语歌词全文)

    《飘雪》歌词全文:又见雪飘过,我来为大家科普一下关于飘雪粤语谐音歌词?下面希望有你要的答案,我们一起来看看吧!

  • 津南区卫生间防滑剂哪家好(石家庄装修网推荐卫生间防滑脚垫)

    二、硅藻泥脚垫优缺点1.硅藻泥脚垫主要成分是由硅藻泥组成,硅藻泥具有很强的吸附能力,能吸收空气中的甲醛等有毒气体,吸附异味等优点。

  • 爱互踩名字打分96分

    文章目录:一、爱互踩相关名字打分100二、爱互踩相关名字评分109三、爱互踩相关名字推荐四、爱互踩相关名字大全五、其他人还看了一、爱互踩相关名字打分100爱鲁网爱室丽爱窝窝爱出爱竞赛爱米网爱卡爱思进爱缓爱德朗爱标客爱宝乐爱根爱耐特爱鹅爱单车爱渴爱米乐爱布爱卡拉爱奇尔爱靓网爱缘爱图书爱逸家爱表姐爱肉肉爱利浦爱博森爱艾贴爱找回爱智慧爱康多爱睡爱宝疗爱二胡爱一点爱盘爱摇爱丽美爱托优爱守护爱撒娇爱的言爱别

  • 娜娜米是什么东西(啥是娜娜米)

    啥是娜娜米前些日子,全网突然流行起来了一个新鲜词汇——娜娜米,抖音等平台上也有很多人争先恐后地发相关视频,好像是在紧随潮流,自娱自嗨那么懂的人自然都懂的啦,但不知道的人可谓是一脸茫然女朋友突然要求自己给她读“娜。

  • 汽车氧传感器四根线电压分别是(汽车氧传感器四根线电压简述)

    汽车氧传感器四根线电压分别是汽车氧传感器一般都是1根12V电源,1根接地,1根5V电源,1根信号返馈。汽车氧传感器插头的四根线指的是传感器上连接其他设备的四根线,分为加热线和信号线。加热线是为了让汽车氧传感器更快地进入到工作状态,剩下两根信号线就是其空燃比控制的作用。在检测的过程中。在使用三元催化转换器以减少排气污染的发动机上,氧传感器是必不可少的元件。

  • 瓦特为什么会发明蒸汽机(瓦特发明蒸汽机不假)

    幸运的是,瓦特遇到了这个神秘团队,最终完成了实用蒸汽机的发明。一位钢铁厂老板看到了蒸汽机的潜力,全力资助瓦特。月光社就是帮助瓦特取得成功的神秘团队,成立于1765年,博尔顿也是始创人之一。再加上创造人相继离世或移民,月光社终于归于沉寂。威尔金森开出了一个条件,蒸汽机研制成功后,只能买他提供的汽缸。博尔特则成为英国有名的蒸汽机制造商,使自己的财产翻了好几倍。