1.介绍：

vue.js是什么

　　Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与和 结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

　　vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

 MVVM（Model-View-ViewModel）,在常用的MVC（Model-View-Controller）模式的基础上，增加了一层ViewModel，核心，它能够实现数据驱动，也是常说的双向绑定的前提：不仅View的更改可以反映到Model，Model的更改也可以反映到View，二者实现的前提也就是ViewModel把二者联系起来了。

 

2.特点：

　　  （1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化

　

3.响应的数据绑定：

　　　Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。

　　

 

二、使用vue.js

 简单的hello world的示例，让你看清双向绑定使用Vue.js的好处！

    
             
         
     
              {
   {message}}    
     
        

 

使用Vue的过程就是定义MVVM各个组成部分的过程的过程，如图中注释所示。

1. 定义View
2. 定义Model
3. 创建一个View实例或"ViewModel"，它用于连接View和Model

双向绑定演示：

1、从View改变，绑定更新到Model，如图所示：

2、从Model改变，绑定更新到View，如图所示：

 

 三、Vue.js常用指令

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令
• v-model指令

v-if条件渲染

     
    
      
Yes
    
      
No
     
      hello
     
---------------------------------------------------var vm = new Vue({    el:"example",    data:{        ok:true,    },    methods:{        changeOk:function(){            this.ok = false        }    }})

 

v-show指令

     
     
           
      
hi
     

 

v-else指令

     
    
          
      
               sorry    
      
    
      
               hello!!    
      
     

 

v-for指令用于渲染列表。这个指令使用特殊的语法，形式为item in items，items 是数据数组，item 是当前数组元素的别名

     
    
          
      
    
       
        {
   {value}}    
       
    
           
       
        {
   {key}}:{
   {value}}    
    
      
     
     
          var myvue=new Vue({        el: '#app',        data: {        list:{       　　 name:"lok",      　　  age:19,        　　sex:"男"       }    }});
     

 

v-bind 指令用于响应地更新 HTML 特性

     
     
    
          
          
          
      
     
--------------------------------------------------------------------//js文件var vm = new Vue({    el:"example",    data:{        url:"http://cn.vuejs.org/",        classA:"container",    },})

 

v-on指令用于监听 DOM 事件

     
     
    
      
{
   {msg}}
    
      hello
     
----------------------------------------------//js文件var vm = new Vue({  el: '#example',  data:{        msg:"first"   },   method:{       change:function(){              this.msg = "second"        },    }, })

 

v-model指令用于数据双向绑定

     
     
    
      Message is: {
   { message }}    
      
    
      
     
---------------------------------------------------//js文件var vm = new Vue({    el:"example",    data:{        message:'',    },})

 

4、关于不同语言的for循环语法格式

　 vue.js for循环语法：

 {
   {变量名}}

　

　java for循环语法：

for(类名 别名 :  数组){      System.out.println(别名.属性);  }

 

　jstl for循环语法：

         
      
${变量名.属性}
     

 

  oracle 循环语法：

CURSOR mycur IS    SELECT NAME FROM T_STUDENT;BEGIN    --打开    OPEN mycur;    LOOP           FETCH mycur INTO V_name;           --无数据时退出           EXIT WHEN MYCUR%NOTFOUND;           --打印显示:    END LOOP;END;