前言

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；

Vue.js是一个构建数据驱动的Web界面的库。

Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。


简而言之：Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

使用基础

    
<div id="msg" >{{msg}}</div>
    
    
    var my = new Vue({
        el: "#msg",
        data: {
            msg: "hello vue.js"
        }
    })

运行结果为

循环

<div id="for" >
    <ul v-for="item in num">
        <li>{{item}}</li>
    </ul>
</div>

    var name = new Vue({
        el: "#for",
        data: {
            num: ["111","222","333"]
        }
    })

运行效果

判断

      <tr v-for="item in users">
             <td>
                   <span v-if="item.state==1">审核通过</span>
                   <span v-else-if="item.state==2">审核中</span>
                   <span v-else >审核失败</span>
   </td>
       </tr>

添加事件方法（medthods）

  
  
  <div id="for">
    <ul v-for="item in num">
        <li v-on:click="show(item)">{{item}}</li>
    </ul>
 </div>
  
    var name = new Vue({
        el: "#for",
        data: {
            num: ["111", "222", "333"]
        },
        methods:
        {
            show: function (item) {
                alert("你点击了" + item)
            }
        }
    })