Vue优点：

灵活、易用、高效； 用于构建用户界面的渐进式框架、自底向上逐层应用； Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。 当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统；数据和 DOM被建立了关联，所有东西都是响应式的。 Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

一.文本插值

1.{{}}

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

结果：Hello Vue！

2.v-html指令

<script> new Vue({ el: '#app', data: { message: '

Hello Vue!

' } }) </script>

结果：Hello Vue!

3.v-bind指令

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

结果：鼠标悬停几秒钟查看此处动态绑定的提示信息！

二.条件与循环

1.v-if v-else v-else-if条件指令

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

结果：现在你看到我了；继续在控制台输入app3.seen = false，你会发现之前显示的消息消失了。

2.v-for循环指令

例1：

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

结果：学习JavaScript

学习Vue

整个牛项目

在控制台里，输入app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

例2：

<script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script>

结果：

0. name : 菜鸟教程 1. url : http://www.runoob.com 2. slogan : 学的不仅是技术，更是梦想！

例3：v-for也可以循环整数

<script> new Vue({ el: '#app' }) </script>

三.处理用户输入

1.v-on指令

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

结果：

2.v-model指令：实现表单输入和应用状态的双向绑定

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

结果：

四.修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

 

五.参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script>

六.缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-bind缩写

v-on缩写