data为long 怎么设置vue_vue.js入门

1.介绍：

vue.js是什么

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

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

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

2.特点：

(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化

3.响应的数据绑定：

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。

二、使用vue.js

简单的hello world的示例，让你看清双向绑定使用Vue.js的好处！

vuejs

{{message}}

// 这是model

var model={

message:"hello vue.js"

};

// 这是ViewModel，vue实例

// 连接view和model

new Vue({

el: '#app',//Vue实例挂载到id为app标签上

data: model//数据来源于model对象

});

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

定义View

定义Model

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

双向绑定演示：

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

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

三、Vue.js常用指令

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

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

v-if指令

v-show指令

v-else指令

v-for指令

v-bind指令

v-on指令

v-model指令

v-if条件渲染

Yes

No

hello