vue的基本用法与常见指令

什么是vue?

Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。

vue是由尤雨溪开发的一款基于MVVM的框架，M->模型，V->视图， 也就是说模型数据改变了，视图也跟着改变， 视图内容改变，模型内容也跟着改变， 业界称之为双向绑定，或者说双向数据驱动，基于此特点，学习这个框架，跟jquery完全不同， 不要用DOM的思想来学习vue, 在vue里面几乎不需要用到DOM操作，一切都是基于数据驱动.

如何使用vue?

现在vue已经发布了2版本，为什么学1版本，如果想要深入的学习vue，了解和掌握个版本的异同是很有必要的。要想使用vue,首先必须引入vue，在客户端(浏览器)可以通过script标签引入，如果是服务端，通过import引入

一个基本的vue程序有哪些部分组成？

就像初学者学习jquery一样，一个基本的jquery程序， 有 domReady, 选择器，this绑定，事件绑定，属性和样式修改组成的，而vue的基本结构如下：

window.onload = function () {      var c = new Vue({        el: '#box', //相当于选择器        data: {          content: 'ghostwu tell you how to learn vue',          msg : 'vue中的数据1',          msg2 : 'vue中的数据2'        }      });}

这段简单的代码，可以实现最基本的数据读取和显示功能. 

1，使用vue，先要实例化一个vue

2,构造函数中，传入字面量对象， data后面也是一个字面量对象，里面的数据可以自定义，按照json的格式

3,el: 表示要把data中的数据显示在 el 后面跟的元素下面， 比如上面的例子， 就是把data中, content, msg, msg2的数据显示在id 为 box的元素下面

具体怎么读取呢？

<div id="box">  {{content}}  <br>  {{msg}}  <br>  {{msg2}}</div>

{{data中定义的键}}， 如{{content}} 读取的就是vue实例 data里面的 content定义的值，所以{{content}}输出 ghostwu tell you how to learn vue， 同理{{msg}}输出vue中的数据1 ,

{{msg2}}输出 vue中的数据2

如果我们需要让数据显示在不同的元素下面，可以定义多个vue实例

window.onload = function () {      var c = new Vue({        el: '#box', //相当于选择器        data: {          content: 'ghostwu tell you how to learn vue',          msg : 'vue中的数据1',          msg2 : 'vue中的数据2'        }      });      var c2 = new Vue({        el: '#box2',        data: {          msg: 'this is a paragraphy'        }      });      var c3 = new Vue({        el: '#box3',        data: {          msg2: 'this is box3'        }      });    }<p id="box2">{{msg}}</p><div id="box">  {{content}}  <br>  {{msg}}  <br>  {{msg2}}</div> <div id="box3">{{msg2}}</div>