适合初学者的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实例

<div id="app">
    {{msg}}
</div>
<script src="./vue.js"></script>
<script>
    window.onload = function(){
        var vm1 = new Vue({
            el:'#app',
            data:{
                msg:'welcome vue!'
            }
        })
    }
</script>

image.png

三、常用指令：

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

<div id="app">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
</div>

image.png

修改input的值

image.png

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

<div id="app">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
    <br>
    {{msg2}}
    <br>
    {{msg3}}
    <br>
    {{arr}}
    <br>
    {{json}}
</div>
<script src="./vue.js"></script>
<script>
    window.onload = function(){
        var vm1 = new Vue({
            el:'#app',
            data:{
                msg:'welcome vue!',
                msg2:12,
                msg3:true,
                arr:['apple','banana','orange'],
                json:{a:'apple',b:'banana',c:'orange'}
            }
        })
    }
</script>

image.png

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

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

<div id="app">
    数组
    <ul>
        <li v-for="value in arr">
            {{value}}
        </li>
    </ul>
    json对象
    <ul>
        <li v-for="value in json">
            {{value}} 
        </li>
    </ul>
    <ul>
        <li v-for="(v,k) in json">
            {{v}} {{k}}
        </li>
    </ul>
</div>
<script src="./vue.js"></script>
<script>
    window.onload = function(){
        var vm1 = new Vue({
            el:'#app',
            data:{
                arr:['apple','banana','orange'],
                json:{a:'apple',b:'banana',c:'orange'}
            }
        })
    }
</script>

image.png

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

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

<div id="app">
    <input type="button" value="按钮1" onclick="alert(1)">
    <input type="button" value="按钮2" v-on:click="alert(2)">
    <input type="button" value="按钮3" v-on:click="show()">

</div>
<script src="./vue.js"></script>
<script>
    window.onload = function(){
        var vm1 = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                show:function(){
                    alert(3)
                }
            }
        })
    }
</script>

image.png

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

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

<div id="app">
    <input type="button" value="按钮" v-on:click="add()">
    <br>
    <ul>
        <li v-for="value in arr">
            {{value}}
        </li>
    </ul>
</div>
<script src="./vue.js"></script>
<script>
    window.onload = function(){
        var vm1 = new Vue({
            el:'#app',
            data:{
                arr:['apple','banana','orange'],
                json:{a:'apple',b:'banana',c:'orange'}
            },
            methods:{
                add:function(){
                    this.arr.push('tomato');
                }
            }
        })
    }
</script>

image.png image.png

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

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

<div id="app">
    <input type="button" value="按钮" v-on:click="istrue=false">
    <br>
    <div style="width:20px;height:20px;background:red" v-show="istrue"></div>
</div>
<script src="./vue.js"></script>
<script>
    window.onload = function(){
        var vm1 = new Vue({
            el:'#app',
            data:{
                istrue:true
            }
        })
    }
</script>

image.png image.png

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

四、总结

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

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

小项目源码和预览

github项目源码
项目效果预览

image.png

github项目功能

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