Vue入门第一步

什么是Vue，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue不推崇Dom操作，不支持IE8及以下版本

接下来创建一个Vue程序带你了解Vue。

一：引入Vue执行脚本文件：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

分为开发版本(包含命令行报错警告)以及生产版本(优化了尺寸和速度),新手上路建议使用开发版本，这样也能协助解决bug报错问题。

二：在html新建一个div：

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

同时新建js代码如下：

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

好了，第一个Vue程序就完成啦！运行结果如下：Hello Vue!

 el表示vue实例管理的元素的根节点，是一个css选择器

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，所有的操作都由Vue构造函数内部帮你完成，不用像js那样先获取Dom节点再来设置innerHTML。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。这一点可以运行上述代码时打开控制台输入vm.message = hello world 就可以看到页面相应的更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。