关于普法栏目听见凉山4这是个什么梗?

　　现在的各种开源项目中使用 Vue 的越来越多了，作为一个后端程序员不会点 Vue 也都玩不转了。所以抽空学习了一下 Vue 的简单用法，整理成笔记，方便有需要的同学一起学习。

　　Vue 是一个前端的框架，被称作是 渐进式 JavaScript 框架。在进入 Vue 的官网时即可看到，上面图的就是从 Vue 官网复制的。

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

　　Vue 可以作为整个前端开发的一部分，也可以作为一个整体。也就是说，可以使用 Vue 的部分功能来构建前端，也可以完全使用 Vue 来构建前端。大概就是这样的意思。

　　Vue 的开始还是很方便的，只需要引入一个库文件 —— Vue.js 即可开始。我们可以去 Vue 的官网下载，也可以通过 CDN 来直接引入 vue 都可以。这里我下载了 vue.min.js 文件。

　　创建一个 HTML 文件，然后引入 vue.min.js 文件，接着实现一个简单的 Hello Vue 的程序。代码如下：

　　单向绑定可以时 v-bind 也可以省略 v-bind，但是注意，冒号不能省略。上面的代码中相当于给 style 设置了 color:blue 属性，运行效果如下图：

　　上面的代码中，通过 v-on 和 @ 将 Button 和 show() 方法进行绑定，输出如下图所示：

　　上面的代码中，在 Vue 对象中增加了 methods，在 methods 中可以用来定义方法。

　　上面的代码中，通过 v-model 和 ok 来进行双向绑定，然后当改变 checkbox 的选中状态时，v-if 和 v-else 会自动改变文字描述。

　　上面的代码中 index 是一个循环的计数从 0 开始，然后循环 userList json 数组，输出如下图：

　　Vue 的生命周期，就是创建、销毁 Vue 对象时会自动执行的几个函数，Vue 的官网提供了一个生命周期图，该图的地址如下：

　　在上图中可以看到，不同的生命周期有不同的方法会被执行，比如 created、updated、destroyed 等。

　　在代码的 created 和 mounted 两处放入了 debugger 命令，打开 F12 的调试窗口时，当执行到 debugger 位置处时，会自动触发断点从而断下，首先断在 created 方法中，如下图：

　　从上图可以看出，此时的插值表达式并没有进行实际的替换，按 F8 让页面继续渲染，会断在 mounted 方法中，如下图：

　　此时可以看到，插值表达式已经变成了 hello。这样可以清楚的看到不同的生命周期会触发不同的方法。

　　上面的代码中，同时演示了 axios 和 vue-resource 两个库。代码中直接请求了两个 json 文件，并没有去进行实际的接口请求。

　　Vue 的内容不只有这么些，具体可以参考 Vue 的官网（）进行学习和了解。这里只是列出了可能使用较为频繁的部分。不对之初请予指正。