当前位置:常识集 > 数码游戏 > IT技术 > 怎样使用vue.js
手机版

怎样使用vue.js

来源:常识集 阅读:3.39W 次

的特点就是双向数据绑定以及它的mvvm(model-view-viewmodel)思想,今天咪咪我就来分享一下的使用方法。

操作方法

(01)打开Hbuilder,新建一个web项目,然后把插件放入自己指定的文件夹。

怎样使用

(02)之后,在html界面中引入插件。

怎样使用 第2张

(03)然后,定义一个div,把这个div作为的范围。div可以展示内容,所以可以理解为视图(view)层面。

怎样使用 第3张

(04)然后定义一个对象model,model里面包含有属性ms。对象名和属性名可以自定义。因为待会我们可以一直使用这个对象,所以这个对象可以理解成模型(model)。

怎样使用 第4张

(05)接着我们创建一个Vue实例,通过Vue(),我们就可以把之前的视图,模型连接起来,所以可以把Vue实例看做是一个viewmodel。在Vue实例中用到了两个属性el和data,后面的参数表示的视图和模型,这里我就连接到div视图和model模型,也就达到了双向绑定。

怎样使用 第5张

(06)接着看看双向绑定的效果。如图,在div里面书写表达式{{ms}},然后保存。

怎样使用 第6张

(07)这时候浏览器就会把表达式解析成对应的数据。因为我们在model中定义了ms属性,并且视图和模型连接成功,所以可以解析出结果。

怎样使用 第7张

(08)当然,也可以用v-html指令来把属性绑定到标签。

怎样使用 第8张

(09)这样,浏览器也可以把它解析成对应的数据喔。并且此时可以看到我在多个地方用到了ms。

怎样使用 第9张

(10)而如果我们修改了model里面的ms的值,然后保存。

怎样使用 第10张

(11)这时候,所有的ms的值就会自动更新哟,这时候双向数据绑定的效果就体现出来了。

怎样使用 第11张
本文链接:https://www.changshiji.com/smyx/itjishu/k166k.html

Copyright © 2024. 常识集 All right reserved. 浙ICP备20202586号-2

文字美图素材,版权属于原作者。部分文章内容由网友提供推送时因种种原因未能与原作者联系上,若涉及版权问题,敬请原作者联系我们,立即处理。