适合初学者的Vue-1.0教程（一）

一、vue介绍

一个mvvm框架（库）
比较容易上手、小巧
个人容易维护项目
vue的发展势头很猛，github上start数量已经超越angular

适合：移动端小巧的项目
兼容：不兼容低版本IE

官网：https://cn.vuejs.org/v2/guide/installation.html
手册：https://cn.vuejs.org/v2/api/

二、搭建vue实例

    {{msg}}

image.png

三、常用指令：

1.v-model && 一般表单元素（input）

    
    

    {{msg}}

image.png

修改input的值

image.png

因为vue实例是双向绑定，所以在input值改变后
vue实例里msg的值同步被改变，从而改变了{{msg}}的值

    
    

    {{msg}}
    

    {{msg2}}
    

    {{msg3}}
    

    {{arr}}
    

    {{json}}

image.png

msg的值可以是string、number、boolean、array,object类型

2. v-for="item in items"（遍历）

    数组
    

        

            {{value}}
        
    
    json对象
    

        

            {{value}} 
        
    
    

        

            {{v}} {{k}}
        
    

image.png

使用v-for指令来遍历数组和对象

3. v-on && method（绑定事件和方法函数）

image.png

1. 按钮1和按钮3点击会分别弹出1、3
2. 但按钮2无效，在使用了Vue的指令后，事件处理函数必须使用Vue实例参数上method的函数
3. 如果使用了Vue的指令，则最好全部使用Vue指令

4. v-on :click/keyup/mouseover && data（绑定事件和数据更改）

    
    

    

        

            {{value}}
        
    

image.png

image.png

method里的this指向Vue实例，Vue又可以代理data
所以this.data.arr === this.arr

5.v-show="true/false"（显示隐藏）

image.png

image.png

点击按钮之后，v-show指令的值由true变成false，红色方块隐藏了，相当于display:none;

四、总结

在了解了前面的一些指令之后，就可以完成一些比较简单的小项目了
我将会将前面的指令，综合运用在github项目上

五、Vue实战__人事档案项目

小项目源码和预览

github项目源码
项目效果预览

image.png

github项目功能

1. 将人员登记在表单上，表格同步获取数据，放在相应的表格格子里
2. 可以对某个成员的数据删除，也可以删除全部成员的数据
3. 当表格数据为空时，会显示一句“暂无数据”，当添加数据上去时，这句话会自动消失
   我将项目放在我的github上
   欢迎大家去了解一下