后端程序员的 VUE 超简单入门笔记

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

长岭网站建设公司成都创新互联公司,长岭网站设计制作，有大型网站制作公司丰富经验。已为长岭成百上千提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的长岭做网站的公司定做！

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

什么是渐进式框架，这里我们引用官网的原文来看，原文如下：

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

https://cn.vuejs.org/v2/guide/

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

一、Vue 的开始

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

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

 
 
 
   
  
  
     
  
  
         
  
  
             
  
  
          {{message}}

在上面的代码中，通过

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

三、双向绑定

双向绑定通过指令 v-model 来完成，下面的代码中，data 中的 keyword 会影响 div 中的两个 input 框，第二个 input 框使用的 v-model 指令，那么当改变第二个 input 框中的值时，同样会改变 data 中 keyword 的值；又由于改变了 data 中 keyword 的值，从而第一个 input 框的值也会随之改变。

 
 
 
   
  
  
     
  
  
         
  
  
          {{keyword}}

可以看到，通过修改第二个 input 框的值，上面的值也跟着发生了改变。

四、事件绑定

事件绑定是对事件的监听，可以通过 v-on 或 @ 指令来完成，代码如下：

选中了
没有选中

{{index+1}} -- {{user.name}} -- {{user.age}}

{{msg}}

{{index + 1}} {{user.name}} {{user.age}}
{{index + 1}} {{it.name}} {{it.age}}

后端程序员的 VUE 超简单入门笔记

一、Vue 的开始

三、双向绑定

四、事件绑定

五、条件指令

六、循环指令

七、Vue 生命周期

八、axios 和 vue-resource 库

九、总结