�Vue是一套构建用户界面的渐进式框架，但也可以�说它是MVC框架，因为�它也有基本的View、Control、Model。�相对于其他主流框架，它的优点在于轻量、学习成本较低，当然肯定还有其他优点，但这里只是入门，不细说。

安装

首先要使用必须引入�Vue.js,这里引入国内的CDN使用。

<script src="https://cdn.bootcss.com/vue/2.3.2/vue.js"></script>

当然，也可以通过Npm的方式下载安装

npm install vue

hello World

双花括号是Vue变量在HTML中的差值表达式.

<div id="app">
  {{ message }}
</div>

这里我们new一个Vue的实例对象.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

最后，显示成

---

Hello World!

---

• el 就是获取的元素对象。
• data 里包含的就是数据变量，可以直接在HTML中使用。

app.message="Hello Vue!"

我们甚至可以通过修改app的message属性值，来�改变HTML中显示的值；这就是Vue的双向数据绑定。

---

Hello Vue!

---

指令

�v-bind

�可以通过绑定属性使�值成为变量

<h3 v-bind:title="miniTitle">
    �可以显示小标题
</h3>

也可以用缩写的方式：

<h3 :title="miniTitle">
    �可以显示小标题
</h3>

在绑定class和style时，值可以为数组或者对象

v-model

如果需要绑定field值时，使用v-model

<h5><input type="text" v-model="content" /></h5>

v-on

事件指令。

<p v-on:click="handleEvent">
    �点击触发事件
</p>

同样也有缩写的方式：

<p @click="handleEvent">
    �点击触发事件
</p>

Vue还给我们增加了修饰符，以.为连接符号。

<p @click.stop="handleEvent">
    �这里的点击事件不会冒泡。
</p>

除了.stop之外，还有.prevent阻止默认事件、.once只触发一次回调等等；
在键盘事件中，可以快捷的指定按键，例如：.enter�或者.13，这两个是同一按键。

<input v-on:keyup.13="submit">

我们也�可以通过全局属性�config.keyCodes来设置按键修饰符的别名

Vue.config.keyCodes.f1 = 112

条件指令

v-if

指令中ok，为true时，h1显示

<h1 v-if="ok">Yes</h1>

v-else

就想js原生的条件语句�原理是一样的,v-else必须在v-if或v-else-if之后使用；

<h1 v-if="ok">Yes</h1>
<h1 v-else>no<h1>

v-else-if

在Vue2.1.0新增了v-else-if.

<h1 v-if="ok">Yes</h1>
<h1 v-else-if="no">Yes</h1>
<h1 v-else>no<h1>

v-show�

v-show只是通过css来隐藏，适合在渲染之后�频繁操作，而v-if是在判断后就不在渲染，

<h1 v-show="ok">Hello!</h1>

�v-for

�循环列表,这里使用item in list的方式，与angular的使用方式基本相同;
如果需要索引的话，使用(item,index) in list的方式来获取。

<div v-for="(ingredient,i) in ingredients" :key="i">
    <h1>{{ingredient}}</h1>
    <p>({{i}})</p>
</div>

同时，v-for也可以通过一个对象来遍历.
value 是键值,key是键名，index是索引

<span v-for="(value,key,index) in person"> 
    {{key}}: {{value}}--{{index}}
</span>

<script>
    new Vue({
        el:"#app",
        data:{
           ingredients:['meat','fruit','cookies'],
           person:{name:'vane',age:38,color:'red'}           
        }
    })
<script>