Rumah > hujung hadapan web > tutorial js > vue.js双向绑定使用详解

vue.js双向绑定使用详解

php中世界最好的语言
Lepaskan: 2018-04-19 09:12:45
asal
1903 orang telah melayarinya

这次给大家带来vue.js双向绑定使用详解,vue.js双向绑定使用的注意事项有哪些,下面就是实战案例,一起来看一下。

vue.js初级入门之最基础的双向绑定操作,具体内容如下

首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery)

引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门。

vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM:Model-View-ViewModel。我们要实现双向绑定首先当然要有“双向”,这里vue.js为我们提供了View层和Model层。View层就是在HTML中的代码,Model层则是Javascript代码。

代码中标注了view层与model层的开始位置和结束位置。

在view层中我们需要创建一个标签来显示model层中程序运行的结果,并且我们要为这个标签添加一个类或者ID,这个实例中我为一个p标签添加了一个名为app的ID。

model层中是我们要执行的代码,首先我们要创建一个新的Vue对象,对象中的el对应的值是我们之前在view层中创建的标签的类名或ID名(这个标签就是vue对象的作用范围),data对应的值又是一个对象,这个对象中的键是我们在view层中“{{}}”里的代码,而值则是显示的结果。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

在JS中怎么实现数字与字符串相互转换

JS轻松实现轮播图

Atas ialah kandungan terperinci vue.js双向绑定使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan