首页 > 安全资讯 >

JavaScript 开发Vue.js使用方法

17-12-04

JavaScript 开发Vue js使用方法。Vue js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular js,Vue js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue js。

Vue.js初探

Vue.js初探 一、简介

1、定义:

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

2:MVVM(Model-View-ViewModel),在常用的MVC(Model-View-Controller)模式的基础上,增加了一层ViewModel,核心,它能够实现数据驱动,也是常说的双向绑定的前提:不仅View的更改可以反映到Model,Model的更改也可以反映到View,二者实现的前提也就是ViewModel把二者联系起来了。

 

 

二、使用Vue.js

一个简单的hello world的示例,让你看清双向绑定使用Vue.js的好处,直接上代码:

{{message}}

使用Vue的过程就是定义MVVM各个组成部分的过程的过程,如图中注释所示。

定义View 定义Model 创建一个View实例或"ViewModel",它用于连接View和Model

双向绑定演示:

1、从View改变,绑定更新到Model,如图所示:

 

 

2、从Model改变,绑定更新到View,如图所示:

 

 

三、Vue.js常用指令

上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢?

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。

Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:

v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-on指令

 

 

 

相关文章
最新文章
热点推荐