Vue快速入门（一）基础

前端是一门不停更新迭代的学科，所以目前的前端框架也是非常多的，但是要说到当前最流行的框架，那还要属React、Vue、Angela。而最近几年Vue发展的越来越好，有赶超其他两位兄弟的趋势。所以了解或者掌握Vue是前端工程师必备的课题。

Vue相比React、Angela来说，语法上更为简单，也更轻便。那要快速入门Vue需要了解哪些呢？这里假设你已经掌握了HTML、CSS、JavaScript中级知识了。

1. Vue基本语法、语法糖
2. 怎样使用Vue创建组件，模块化
3. 使用组件，组件之间调用
4. Vuex状态管理
5. NUXT框架
6. NUXT+KOA客户端/服务端同构框架

掌握前三点你就可以Vue实战了；掌握后三点，那么你就可以搭建项目，真正创造价值了。但是这次先讲基础知识:Vue基本语法、语法糖。

声明式渲染

先看实例



<html>

<head>
  <title>Hello Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

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

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  </script>
</body>

</html>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

Vue数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

条件与循环

html代码
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

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

可以页面显示了文字：“现在你看到我了”。继续在控制台输入 app3.seen = false，你会发现文字消息消失了。

循环，v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

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

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