顺应初大家的Vue

顺应初大家的Vue

一、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>

人事档案 1

image.png

叁 、常用命令:

1.v-model && 一般表单成分(input)
<div id="app">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
</div>

人事档案 2

image.png

修改input的值

人事档案 3

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>

人事档案 4

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>

人事档案 5

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>

人事档案 6

人事档案,image.png

  1. 按钮1和按钮3点击会分别弹出壹 、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>

人事档案 7

image.png

人事档案 8

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>

人事档案 9

image.png

人事档案 10

image.png

点击按钮之后,v-show指令的值由true变成false,黄铜色方块隐藏了,约等于display:none;

四、总结

在询问了前方的有个别指令之后,就能够形成都部队分比较简单的小品种了
自家将会将前方的指令,综合选拔在github项目上

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

小项目源码和预览

github项目源码
品种成效预览

人事档案 11

image.png

github项目效益
  1. 将人士登记在表单上,表格同步获取数据,放在相应的报表格子里
  2. 能够对有个别成员的多少删除,也得以去除全数分子的多寡
  3. 当表格数据为空时,会议及展览示一句“暂无数据”,当添加数量上去时,那句话会活动消失
    作者将品种坐落本人的github上
    欢迎我们去询问一下
admin

网站地图xml地图