vue基础学习（一）

01-01 vue使用雏形

　　　　 <div id="box">

            {{msg}}

        </div>

        <script>

            window.onload= function(){

                var c = new Vue({

                    el:"#box",//选择器

                    data:{

                        'msg':'welcome vue'

                    }

                });

            }

        </script>

01-02 v-model一般用于表单元素数据双向绑定

<div id="box">

            <input type="text" v-model="msg">

            <input type="text" v-model="msg">

            <p>{{msg}}</br>{{msg2}}</br>{{arr}}</br>{{json}}

            </p>

        </div>

        <script>

//            知识说明:

//                v-model:数据双向绑定

            window.onload= function(){

                var c = new Vue({

                    el:"#box",//选择器

                    data:{

                        'msg':'welcome vue',

                        'msg2':'12',

                        arr:['apple','oramge','pear'],

                        'json':{a:'apple',b:'orange',c:'pear'}

                    }

                });

            }

        </script>

01-03 v-for循环数据

<div id="box">

            <!--数组的循环-->

            <ul><li v-for="value in arr">{{value}} {{$index}}</li></ul>

            <hr>

            <!--json的循环-->

            <ul><li v-for="value in json">{{value}}    {{$index}}  {{$key}}</li></ul>

            <ul><li v-for="(k,v) in json">{{k}}    {{v}}  {{$index}} {{$key}}</li></ul>

        </div>

        <script>

//            知识说明:

//                v-for:数据循环    

//                    json数据:    (value,key,index) in json

//                    {{value}}:json的值

//                    {{$key}}:json的key

//                    {{$index}}:数据索引

            window.onload= function(){

                var c = new Vue({

                    el:"#box",//选择器

                    data:{

                        'arr':['apple','oramge','pear'],

                        'json':{a:'apple',b:'orange',c:'pear'}

                    }

                });

            }

        </script>

01-04 v-click等等基础事件

　　　　 <div id="box">

            <button type="button" v-on:click="show()">按钮</button>

            <button type="button" v-on:click="add()">添加</button>

            <br>

            <ul><li v-for="value in arr">{{value}}</li></ul>

        </div>

        <script>

//            知识说明:

//                    基础事件举例: v-on:click/mouseout/mouseover/dblclick/mousedown……

            window.onload= function(){

                var c = new Vue({

                    el:"#box",//选择器

                    data:{//数据

                        'arr':['apple','oramge','pear'],

                    },

                    methods:{//函数储存器

                        show:function(){

                            alert();

                        },

                        add:function(){

                            alert(this.arr);//this表示的是这个c=new Vue这个对象

                            this.arr.push('tomato');

                        }

                    }

                });

            }

        </script>

01-05 点击按钮div消失：v-show(false/true)

<div id="box">

            <button type="button" v-on:click="a=false">消失</button>

            <div v-show="a" style="width:300px;height:300px;background:red;"></div>

        </div>

        <script>

//            知识说明:

//                v-show="true/false"//true显示，false隐藏

            window.onload= function(){

                var c = new Vue({

                    el:"#box",//选择器

                    data:{//数据

                        a:true,

                    }

                });

            }

        </script>

01-06 案例添加删除用户

<body>

        <article id="box" class="container">

            <form role="form">

                <div class="form-group">

                    <label for="uername">用户名：</label>

                    <input v-model="username" type="text" class="form-control" id="username" placeholder="输入用户名">

                </div>

                <div class="form-group">

                    <label for="age">年 龄：</label>

                    <input v-model="age" type="text" class="form-control" id="age" placeholder="输入年龄">

                </div>

                <div class="form-group">

                    <input v-on:click="add()" type="button" value="添加" class="btn btn-primary">

                    <input type="reset" value="重置" class="btn btn-danger">

                </div>

            </form>

            <hr>

            <table class="table table-bordered table-hover">

                <caption class="h3 text-center text-info">用户信息表</caption>

                <tr class="text-danger">

                    <th class="text-center">序号</th>

                    <th class="text-center">名字</th>

                    <th class="text-center">年龄</th>

                    <th class="text-center">操作</th>

                </tr>

                <!--循环数据-->

                <tr v-for="item in mydata" class="text-center"><td>{{$index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><button v-on:click="nowIndex=index" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button></td></tr>

                <tr v-show="mydata.length==0" class="text-center text-muted"><td colspan="4"><p>暂无数据……</p></td></tr>

                <tr v-show="mydata.length!=0" class="text-right text-muted"><td colspan="4"><button v-on:click="nowIndex=-2" class="btn btn-danger" data-toggle="modal" data-target="#layer">删除全部</button></td></tr>

            </table>

            <!--模态框，弹出框-->

            <div role="dialog" id="layer" class="modal fade">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal"  aria-hidden="true">

                                &times;

                            </button>

                            <h4 class="modal-title"  id="myModalLabel">

                                确认删除吗？

                            </h4>

                        </div>

                        <div class="modal-body">

                            <button  data-dismiss="modal"  class="btn btn-primary btn-sm">取消</button>

                            <button v-on:click="delateMsg(nowIndex)" data-dismiss="modal"  class="btn btn-danger btn-sm">确认</button>

                        </div>

                    </div>

                </div>

            </div>

        </article>

        <script>

//            知识说明:

//                v-show="true/false"//true显示，false隐藏

            window.onload= function(){

                var c = new Vue({

                    el:"#box",//选择器

                    data:{//数据

                        //通过v-show="mydata.length==0"来控制“暂无数据”"删除全部"显示隐藏

                        mydata:[

                            {name:'XXX',age:'XX'},

                            {name:'XXX',age:'XX'},

                        ],

                        username:'',

                        age:'',

                        nowIndex:"-1000",

                    },

                    methods:{

                        add:function(){

                            this.mydata.push({

                                name:this.username,

                                age:this.age

                            });

                            //添加后清空表格

                            this.username="";

                            this.age="";

                        },

                        delateMsg:function(n){

                            if(n==-2){

                                this.mydata=[];

                            }else{

                                this.mydata.splice(n,1);

                            }

                        }

                    }

                });

            }

        </script>

巴特西

vue基础学习（一）

最新文章

热门文章