一个例子轻松学会Vue.js

大家都知道Vue.js是中国人创造出来的，简单易用，所以必须要支持一下

Vue采用的MVVM设计模式

也就是说model和view绑定
model改变，view的内容改变，反之亦然

Vue主要有以下几个关键字

v-model 绑定模型
v-if 判断是否显示该dom
v-show 判断是否将该dom的display设为none
v-else if或者show为false时显示该dom
v-for 迭代
v-bind 绑定属性
v-on 绑定方法

我们以一个可查找的信息管理系统为例子

 
 
 
 
 

 
 

  key
  
  
  
  
  

   Create New Person
  
  

   Name:
   
   
  
  

   Age:
   
   
  
  

   Sex:
   
   
   Male
   Female
  
  
  

   
   
   Create
  
 
 

  

  

   
Name
   
Age
   
Sex
   
Delete
  
  
  

  
  
  
  

   
{{ person.name }}
   
   
   
{{ person.age }}
   
   
男
   
女
   
Delete
  
  
 
 
 
 
 

不需要太多的解释，直接看代码就知道Vue用法是什么

效果图

代码我已上传到github

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。