Vue入门（一）

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

安装

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

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

npm install vue

hello World

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

  {{ message }}

这里我们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

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

    �可以显示小标题

也可以用缩写的方式：

    �可以显示小标题

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

v-model

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

v-on

事件指令。

    �点击触发事件

同样也有缩写的方式：

    �点击触发事件

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

    �这里的点击事件不会冒泡。

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

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

Vue.config.keyCodes.f1 = 112

条件指令

v-if

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

Yes

v-else

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

Yes
no

v-else-if

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

Yes
Yes
no

v-show�

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

Hello!

�v-for

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

    
{{ingredient}}
    
({{i}})

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

 
    {{key}}: {{value}}--{{index}}