Vue.js 入门

Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

1、声明

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

 
 

  
  <div id="app">
 
 
 
 

  
    {{ message }}
 
 
 
 

  
  </div>
 
 
 
 

  
  
  
  
   
   

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

    
      }
   
   
   
   

    
    })
   
   
   
   

    
    运行结果： Hello Vue！
   
   
   
   


   
   
  
  2、Vue.js指令
 
 
 
 

  
  
  
  
Ø Vue.js循环指令  ：v-for=”item in data”
  
  
Vue.js绑定属性指令 ： v-bind:属性名称=”绑定”;  
  
  
简写：
  
  
  :属性名称=”绑定”;
  
  
Ø Vue.js绑定事件指令  ： v-on:事件类型=”需要执行的方法”;
  
  
       绑定单击事件 ：  v-on:click=”udelete()”;
  
  
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。