精华内容
下载资源
问答
  • vue 代码实例
    千次阅读
    2018-07-05 19:42:27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        {{count}}
        <button @click="updateCount">clickMe</button>
        <hr>
        <hr>
        <h3 v-if="count<6" v-change="count">自定义指令</h3>
    
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //1.model
        var exampleData ={
            msg:"hello vue",
            count:0
        };
        //2.viewmodel
        new Vue({
            el:"#app",
            data:exampleData,
            methods:{
                updateCount:function(){
                   this.count++;
                }
            },
            directives:{   //所有自定义指令保存在此对象中
                change:{   //自定义指令change
                    bind:function(el,bindings){
                        console.log(el);
                        console.log(bindings);
                        console.log("初始化指令");
                    },
                    update:function(el,bindings){
                        console.log("指令发生变化");
                        console.log(bindings.value);
                    },
                    unbind:function(el,bindings){
                        console.log("解除绑定");
                    }
                }
            }
        });
    </script>
    </body>
    </html>
    
    
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        {{msg}}
        <br>
        <button @click="color">clickMe</button>
        <h3 v-if="count<6" v-change-background-color="myBgcolor">自定义指令</h3>
    
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //1.model
        var exampleData ={
            msg:"hello vue",
            count:0,
           myBgcolor:"#ff0000"
        };
        //2.viewmodel
        new Vue({
            el:"#app",
            data:exampleData,
            methods:{
               color:function(){
                   console.log(11);
                   this.myBgcolor=this.getRandomColor();
               },
               getRandomColor:function(){
                    var r=Math.floor(Math.random()*256);
                    var g=Math.floor(Math.random()*256);
                    var b=Math.floor(Math.random()*256);
                    return `rgb(${r},${g},${b})`;
                }
            },
            directives:{   //所有自定义指令保存在此对象中
                changeBackgroundColor:{   //自定义指令change
                    bind:function(el,bindings){  //el===h3
                        console.log("绑定成功");
                        el.style.backgroundColor = bindings.value;
                    },
                    //需要加更新的指令
                    update:function(el,bindings){
                        el.style.backgroundColor = bindings.value;
                    }
                }
            }
        });
    </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <h4>{{price}}</h4>
        <h4>{{price | myCurrency('¥')}}</h4>
        <h4>{{price | myCurrency('$')}}</h4>
    
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //1.model
        var exampleData ={
            msg:"hello vue",
            price:356
        };
        //2.viewmodel
        new Vue({
            el: "#app",
            data: exampleData,
            filters:{   //所有的过滤器定义在此处
                myCurrency:function(myInput,arg1){
                    //参数myInput:price--过滤器前的变量值; arg1:¥
                    var result=arg1+myInput;
                    return result;
    
    
                }
    
            }
        });
    </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <h4>{{text}}</h4>
        <h4>{{text | myTextTransform(true)}}</h4>
        <h4>{{text | myTextTransform(false)}}</h4>
    
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //1.model
        var exampleData ={
            msg:"hello vue",
            text:"hello moto"
        };
        //2.viewmodel
        new Vue({
            el: "#app",
            data: exampleData,
            filters:{   //所有的过滤器定义在此处
                myTextTransform:function(myInput,arg1){
          //参数myInput:price--过滤器前的变量值==  |的值; arg1:¥
                    if(arg1==true){
                        var result=myInput.toUpperCase();
                        return result;
                    }else if (arg1==false){
                        var result=myInput.toLowerCase();
                        return result;
                    }
    
                }
    
            }
        });
    </script>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <h3>自定义组件</h3>
        <hr>
      <!--完成组件的调用-->
        <my-component></my-component>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //创建组件
        Vue.component("my-component",{//模板
           template:`<div>
                         <h1>第一个组件</h1>
                         <h4>第一个</h4>
                      </div>`
        });
        //1.model
        var exampleData ={
            msg:"hello vue",
    
        };
        //2.viewmodel
        new Vue({
            el: "#app",
            data: exampleData,
    
        });
    </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <!--完成组件调用-->
        <button @click="isShow=!isShow">切换组件是否显示</button>
        <my-component v-if="isShow"></my-component>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //组件声明周期
        Vue.component('my-component',{
            template:`
                <div>
                    <button @click="handleClick">clickMe</button>
                    <h4>Hello {{count}}</h4>
                </div>
            `,
            data:function () {
                return {count:0}
            },
            methods:{
                handleClick:function () {
                    //console.log('111');
                    this.count ++;
                   // console.log(this.count);
                }
            },
            beforeCreate:function(){console.log("1:创建前")},
            created:function(){console.log("2:创建后")},
            beforeMount:function(){console.log("3:挂在前")},
            mounted:function(){console.log("4:挂载后")},
            beforeUpdate:function(){console.log("5:更新前")},
            updated:function(){console.log("6:更新后")},
            beforeDestroy:function(){console.log("7:销毁前")},
            destroyed:function(){console.log("8:销毁后")},
        });
    
        var exampleData = {
            msg:'hello vue',
            isShow:true
    
        };
        new Vue({
            el:'#app',
            data:exampleData
        });
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <h3>自定义组件</h3>
    <hr>
    <div id="app">
        <!--完成组件的调用-->
        <my-component></my-component>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //创建组件 my_component
        //组件两个数据--myAddress  ;myPhone
        //添加模板
        //div_  添加两个input,input的value绑定刚才定义
        Vue.component("my-component",{
            data:function(){
                return{
                    myAddress:"",
                    myPhone:158
                }
            },
            template:`<div>
                          <input type="text" v-model="myAddress">
                          <input type="text" v-model="myPhone">
                          <h5>{{myAddress}}</h5>
                          <h5>{{myPhone}}</h5>
                      </div>
                       `,
            watch:{//监听事件
                myAddress:function(){
                    console.log("数据发生改变:"+this.myAddress);
                },
                myPhone:function(){
                    console.log("数据发生改变"+this.myPhone);
                }
    
            }
        });
    
        //1.model
        var exampleData ={
            msg:"hello vue",
    
        };
        //2.viewmodel
        new Vue({
            el: "#app",
            data: exampleData,
    
        });
    </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <!--完成组件调用-->
        <my-game></my-game>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //练习:透明度变化组件
        Vue.component("my-game",{
            data:function(){
                return {
                    randomNumber:0,  //中奖数
                    userInput:0,     //用户输入
                    result:''
                }
            },
            mounted:function(){
                //console.log("3:挂在前");
                //创建中奖数1-100整数,并保存randomNumber
                var num=Math.floor(Math.random()*20);
                this.randomNumber=num;
            },
            template:`<div>
                          <input type="text" v-model="userInput"/>
                          <br>
                          <p>{{result}}</p>
                      </div> `,
            watch:{
                userInput:function(){
                    //console.log(this.userInput);
                    if(this.userInput>this.randomNumber){
                        this.result="大了";
                    }else if(this.userInput<this.randomNumber){
                        this.result="小了";
                    }else{
                        this.result="厉害了";
                    }
                }
            }
    
    
        });
    
        var exampleData = {
            msg:'hello vue',
            isShow:true
    
        };
        new Vue({
            el:'#app',
            data:exampleData
        });
    </script>
    </body>
    </html>

    父子组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <parent></parent>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //1.创建父组件
        Vue.component("parent",{
            data:function(){
                return {money:3000}
            },
            template:`
                <div>
                    <h4>父组件</h4>
                    <child :myValue="money"></child:mychild>
                </div>
            `
        });
        //2.创建子组件
        Vue.component("child",{
            template:`<div><h3>子组件{{myValue}}</h3></div>`,
            props:["myValue"],//声明变量 保存父组件的数据
            mounted:function(){
                //声明变量结束,获取父元素数据
                //已保存 this.data
                console.log(this.myValue);
            }
        });
        //3.创建Vue
        new Vue({
            el:"#app"
        });
    </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <parent></parent>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            Vue.component("parent",{
                data:function(){
                    return {myCar:"QQ"}
                },
                template:`
                    <div><child :car="myCar"></child></div>
                `
    
            });
            Vue.component("child",{
                props:["car"],
                template:`<div>{{car}}:
                                <input type="text" :value="car">
                          </div>`,
                mounted:function(){
                    console.log(this.car);}
            });
            new Vue({
                el:"#app"
            });
    
    
        </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <parent></parent>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            Vue.component("parent",{
                methods:{
                    //1.1创建一个方法接收子组件传递的数据
                    getData:function(msg){
                        console.log("父组件接收子组件的数据:"+msg);
                    }
                },
                template:`
                    <div>
                        <h4>父组件</h4>
                        <child @dataEvent="getData"></child>
                    </div>
                `
            });
            Vue.component("child",{
                methods:{
                    setData:function(){
                        //触发绑定自定义事件dataEvent并且传递的数据
                        this.$emit("dataEvent","交话费");
                    }
                },
                template:`
                    <div>
                        <h4>子组件</h4>
                        <button @click="setData">点击按钮发送数据给父组件</button>
                    </div>
                `
            });
            new Vue({
                el:"#app"
            });
        </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <parent></parent>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            //父
            Vue.component("parent",{
                data:function(){
                    return {isUserLogin:true,list:[10,20,30,40,50]}
                },
                template:`<div>
                              <ul v-if="isUserLogin">
                                <li v-for="item in list" >{{item}}</li>
                              </ul>
                              <child @dataEvent="getData"></child>
                           </div>  `,
                methods:{
                    getData:function(msg){
                        console.log("父组件接收子组件的数据:"+msg);
                        this.isUserLogin=msg;
                    }
                }
            });
            //子
            Vue.component("child",{
                template:`
                    <div><button @click="sendData">点击按钮发送数据给父组件</button></div>
                `,
                methods:{
                    sendData:function(){
                        if(this.$parent.isUserLogin){
                            this.$emit("dataEvent",false);
                        }else{
                            this.$emit("dataEvent",true);
                        }
                    }
                }
            });
            new Vue({
                el:"#app"
            });
        </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <parent></parent>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        //父组件
        Vue.component("parent",{
            data:function(){
                return {name:"牛魔王"}
            },
            template:`<div>
                            <h4>父组件</h4><child ref="mySon"></child>
                            <button @click="getData">获取子组件</button>
                       </div>`,
            methods:{
                getData:function(){
                    console.log("子组件名称:"+this.$refs.mySon.name);
                }
            }
        });
        //子组件
        Vue.component("child",{
            data:function(){
                return {name:"红孩儿"}
            },
            mounted:function(){
                console.log("父元素的数据:"+this.$parent.name);
            }
        });
        new Vue({
            el:"#app"
        });
    
    </script>
    </body>
    </html>
    
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <parent></parent>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            Vue.component("parent",{
                data:function(){
                    return {name:["tom","jerry","kk"]}
                },
                template:`
                    <div>
                        <ul >
                            <li v-for="item in name">{{item}}</li>
                        </ul>
                        <child></child>
                    </div>
                `
            });
            Vue.component("child",{
                data:function(){
                    return {userName:""}
                },
                template:`
                    <div>
                        {{userName}}
                        <input type="text" value="" v-model="userName">
                         <button @click="setData">添加</button>
                    </div>
                `,
                methods:{
                    setData:function(){
                        //将用户名添加到父元素列表
                        var uname=this.userName;
                        this.$parent.name.push(uname);
                        //之后清空
                        this.userName="";
    
                    }
                }
            });
            new Vue({
               el:"#app"
            });
        </script>
    
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <xiong-da></xiong-da>
            <xiong-er></xiong-er>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            //1.创建公共 Vue对象
            var bus=new Vue();
            //2.创建组件  xiong-er
            Vue.component("xiong-er",{
                template:`
                    <div>
                        <h4>熊二接收数据</h4>
                        <h2>熊二发消息</h2>
                        <button @click="setData">熊二后发送</button>
                    </div>
                `,
                methods:{
                  setData:function(){
                      bus.$emit("eventEr","光头强走了!!!")
                  }
                },
                mounted:function(){
                    bus.$on("cutomeEvent",function(msg){
                        console.log("熊大发来的消息:"+msg);
                    })
                }
            });
            //3.创建组件  xiong-da
            Vue.component("xiong-da",{
               template:`<div>
                              <h2>熊大接收数据</h2>
                             <h4>熊大发数据</h4>
                             <button @click="setData">发送</button>
                         </div>`,
               methods:{
                   setData:function(){
                       bus.$emit("cutomeEvent","光头强又来啦");
                   }
               },
               mounted:function(){
                   bus.$on("eventEr",function(msg){
                     console.log("熊二发来的消息:"+msg);
                   })
               }
    
            });
            //4.创建Vue
            new Vue({
               el:"#app"
            });
        </script>
    </body>
    </html>
    
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
                <my-main></my-main>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            Vue.component("my-main",{
                data:function(){
                    return {count:0, isValid:false}
                },
                template:`<div>
                              <h4>父组件</h4>
                              <button @click="addCount" :disabled="isValid">count++</button>
                              <son :myCount="count"></son>
                              <hr>
                          </div>`,
                methods:{
                    addCount:function(){
                            this.count++;
                    }
                }
            });
            Vue.component("son",{
                template:`<div>
                              <h4>子组件</h4>
                              <p>接收数据:{{myCount}}</p>
                          </div>`,
                props:["myCount"],
                //绑定生命周期方法:更新-->如果数据发生变化自动执行
                updated:function(){
                    //console.log("子组件变化");
                    console.log(this.myCount);
                    if(this.myCount>10){//数据超过10
                        this.$parent.isValid=true;//禁用父组件按钮
                    }
                }
    
            });
            new Vue({el:"#app"});
        </script>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--2.显示不同组件的信息-->
            <router-view></router-view>
        </div>
        <script src="js/vue.min.js"></script>
        <!--1.引入路由的插件-->
        <script src="js/vue-router.js"></script>
        <script>
            //3.组件多个组件
            var testLogin=Vue.component("login",{
                template:`
                    <div>
                          <h1>这是登录页面</h1>
                    </div>
                `
            });
            var testRegister=Vue.component("register",{
                template:`
                    <div>
                          <h1>这是注册页面</h1>
                    </div>
                `
            });
            //4.配置路由词典
            //语法:请求路径     对应组件
            //{path:"/login",component:testLogin}
            const myRoutes=[
                {path:"",component:testLogin},
                {path:"/login",component:testLogin},
                {path:"/reg",component:testRegister}
            ];
            //5.创建路由对象
            const myRouter=new VueRouter({
                routes:myRoutes
            });
            //6.创建Vue对象,并且指定路由对象
            new Vue({
                router:myRouter,
                el:"#app"
            });
    
        </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{width:200px;  height:400px}
            #d{background: deepskyblue}
            #c{ background: greenyellow}
            #o{background: mediumvioletred}
        </style>
    </head>
    <body>
    <div id="app">
        <!--2.显示不同组件的信息-->
        <router-view></router-view>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var testCollect=Vue.component("collect",{
            template:`
                        <div id="c">
                            <h4>收藏页面</h4>
                            <router-link to="/detail">详情页面</router-link>
                            <router-link to="/order">订单页面</router-link>
                        </div>
                    `
        });
        var testDetail=Vue.component("detail",{
            template:`
                        <div id="d">
                            <h4>详情页面</h4>
                            <router-link to="/order">查看订单页面</router-link>
                            <router-link to="/collect">查看收藏页面</router-link>
                        </div>
                    `
        });
        var testOrder=Vue.component("order",{
            template:`
                        <div id="o">
                            <h4>订单页面</h4>
                            <button @click="jumpToCollect">返回收藏</button>
                            <button @click="jumpToDetail">返回详情</button>
                        </div>
                    `,
            methods:{
                jumpToCollect:function(){
                    //通过js的方式,实现导航到指定的路由地址对应的组件
                    this.$router.push("/collect");
                },
                jumpToDetail:function(){
                    //通过js的方式,实现导航到指定的路由地址对应的组件
                    this.$router.push("/detail");
                }
            }
    
        });
        const myRoutes=[
            {path:"",component:testCollect},
            {path:"/collect",component:testCollect},
            {path:"/detail",component:testDetail},
            {path:"/order",component:testOrder}
        ];
        //5.创建路由对象
        const myRouter=new VueRouter({
            //路由对象里,引用要使用的路由词典
            routes:myRoutes
        });
        //6.创建Vue对象,并且指定路由对象
        new Vue({
            router:myRouter,
            el:"#app"
        });
    
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{width:300px;  height:400px}
            #l{background: cornflowerblue; color: aliceblue}
            #d{background: lightseagreen; color: greenyellow}
        </style>
    </head>
    <body>
    <div id="app">
        <!--2.显示不同组件的信息-->
        <router-view></router-view>
    </div>
    <script src="js/vue.min.js"></script>
    <!--1.引入路由的插件-->
    <script src="js/vue-router.js"></script>
    <script>
        //3.组件多个组件
        //接收参数
        var productDetail=Vue.component("product-detail",{
            data:function(){
              return {productId:0}//接收上一个组件传来的参数
            },
            template:`
                <div id="d">
                    <h2>{{productId}}</h2>
                    <router-link to="/list">返回list</router-link>
                </div>
            `,
            mounted:function(){
                this.productId= this.$route.params.pid;
                console.log(this.$route.params);
            }
        });
    
        //发送参数
        var productList=Vue.component("product-list",{
            data:function(){
                return {list:["aaa","bbb","ccc","ddd","eee"]}
            },
            template:`
                <div id="l">
                    <h3>产品列表</h3>
                    <ul>
                        <li v-for="(item,idx) in list">
                        <router-link :to="'/detail/'+idx">{{item}}</router-link>
                        </li><br>
                        <button @click="toDetail">进入详情页</button>
                    </ul>
                </div>
            `,
            methods:{
                toDetail:function(){
                    this.$router.push("/detail/"+this.list);
                }
            }
        });
    
        var NotFound =Vue.component("my-found",{
            template:`<div class="base">
                            <h1> 404 Page Not Fount</h1>
                            <router-link to="/login">返回首页</router-link>
                       </div>`
        });
    
        //4.配置路由词典
        const myRoutes=[
            {path:"",component:productList},
            {path:"/list",component:productList,alias:"/lists"},
            {path:"/mylist",redirect:"/list"},
            {path:"/detail/:pid",component:productDetail},
            {path:"*",component:NotFound}
        ];
    
        //5.创建路由对象
        const myRouter=new VueRouter({
            routes:myRoutes
        });
        //6.创建Vue对象,并且指定路由对象
       new Vue({
           router:myRouter,
           el:"#app"
       });
    
    
    </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{width:300px;  height:400px}
            #l{background: cornflowerblue; color: aliceblue}
            #m{background: lightseagreen; color: greenyellow}
        </style>
    </head>
    <body>
    <div id="app">
        <!--2.显示不同组件的信息-->
        <!--显示login和main-->
        <router-view></router-view>
    </div>
    <script src="js/vue.min.js"></script>
    <!--1.引入路由的插件-->
    <script src="js/vue-router.js"></script>
    <script>
        //3.组件多个组件login/main/inbox/outbox
        var myLogin=Vue.component("my-login",{
            template:`
                <div id="l">
                    <h4>登录组件</h4>
                    <router-link to="/main">跳到主页面</router-link>
                </div>
            `
        });
        var myMain=Vue.component("my-main",{
            template:`
                <div id="m">
                    <h3>邮箱主页面</h3>
                    <ul>
                        <li><router-link to="/inbox">收件箱</router-link></li>
                        <li><router-link to="/outbox">发件箱</router-link></li>
                    </ul>
                    <router-view></router-view>
                </div>
            `
        });
        var myInbox=Vue.component("my-inbox",{
            template:`
                <div id="m">
                    <ul>
                        <li>未读邮件1</li>
                        <li>未读邮件2</li>
                        <li>未读邮件3</li>
                        <li>未读邮件4</li>
                    </ul>
                </div>
            `
        });
        var myOutbox=Vue.component("my-outbox",{
            template:`
                <div id="m">
                    <ul>
                        <li>已发邮件1</li>
                        <li>已发邮件2</li>
                        <li>已发邮件3</li>
                        <li>已发邮件4</li>
                    </ul>
                </div>
            `
        });
    
        //4.配置路由词典
        const myRoutes=[
            {path:"",redirect:"/login"},
            {path:"/login",component:myLogin},
            {path:"/main",component:myMain,
                children:[
                    {path:"/inbox",component:myInbox},
                    {path:"/outbox",component:myOutbox},
                ]
            },
        ];
    
        //5.创建路由对象
        const myRouter=new VueRouter({
            routes:myRoutes
        });
        //6.创建Vue对象,并且指定路由对象
        new Vue({
            router:myRouter,
            el:"#app"
        });
    
    
    </script>
    </body>
    </html>
    更多相关内容
  • Vue表单实例代码

    2020-10-21 14:22:57
    Vue.js 是用于构建交互式的 Web 界面的库。这篇文章主要介绍了Vue表单实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 在组件实例中,Vue提供了相应的属性,包括$parent、$children、$refs和$root,这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问,需要的朋友可以参考下
  • vue demo实例

    2019-02-16 17:24:13
    本项目是asp.net mvc5+vue2.5的项目。适合新手参考和学习,本项目实现的功能如下: 1.不仅有vue的基本功能,而且...另外,本项目无论是前台还是后台都对代码进行了注释,使得项目非常容易理解,请给打5分,非常感谢。
  • 一、Vue实例 1.1、创建一个 Vue实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发。因此在文档中...
  • 主要介绍了vue搜索和vue模糊搜索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了vue中多个倒计时实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue.js经典实例代码(持续更新中~)

    千次阅读 2019-03-20 17:56:03
    打开控制台,输入vm.message="hello vue",页面就会刷新成hello vue,之前渲染完成后如需再次修改视图,就只能通过获取DOM的方法进行修改,手动维持数据和视图的一致,现在只需要改数据就可以,代码更加简洁易懂、提升...

    按照传统,首先输出hello world.

    1.数据绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <p>{{ message }}</p>
        <p v-bind:title="message">边境牧羊犬</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello world.'
            }
        })
    </script>
    </body>
    </html>

    内置指令v-bind为标签绑定title属性。

    打开控制台,输入vm.message="hello vue",页面就会刷新成hello vue,之前渲染完成后如需再次修改视图,就只能通过获取DOM的方法进行修改,手动维持数据和视图的一致,现在只需要改数据就可以,代码更加简洁易懂、提升效率。这就是vue的基础特性数据绑定。

    2.双向数据绑定

    v-model指令可以对表单元素进行双向数据绑定,在修改表单元素值的同时,实例vm中对应的属性值也同时更新。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <!--text-->
        <input type="text" v-model="message">
        <span>你输入的是:{{message}}</span>
        <br>
        <!--radio-->
        <label><input type="radio" value="male" v-model="gender">男</label>
        <label><input type="radio" value="female" v-model="gender">女</label>
        <p>{{message}}</p>
        <!--checkbox-->
        <input type="checkbox" v-model="checked">
        <span>checked:{{checked}}</span>
        <br>
        <!--多个勾选框-->
        <label><input type="checkbox" value="1" v-model="multiChecked">1</label>
        <label><input type="checkbox" value="2" v-model="multiChecked">2</label>
        <label><input type="checkbox" value="3" v-model="multiChecked">3</label>
        <p>MultiChecked:{{multiChecked.join('|')}}</p>
        <!--select-->
        <select v-model="selected">
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected:{{selected}}</span>
        <br>
        <br>
        <select v-model="multiSelected" multiple>
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>MultiSelected:{{multiSelected.join('|')}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:'',
                gender:'',
                checked:'',
                multiChecked:[],
                selected:'',
                multiSelected:[],
                a:'checked',
                b:'checked',
            }
        });
    </script>
    </body>
    </html>

    3.模板渲染

    早期的web项目一般都是服务器进程从数据库获取数据后,利用后端模板引擎,将数据加载进来生成HTML,再传到用户浏览器解析成可见的页面。而前端渲染则是在浏览器中进行,利用js把数据和HTML模板进行组合。前后端渲染互有优缺点,需要根据业务需要选择技术方案。

    前端渲染的优点:

    ①业务分离,只需要后端提供数据接口,前端开发也不需要部署对应的后端环境,通过代理服务器工具就能远程获取后端数据开发。

    ②计算量转移,原本需要后端渲染的事情交给前端,减轻服务器压力。

    后端渲染优点:

    ①搜索引擎舒服滴很。

    ②首页加载时间短,我们基于angular做的系统,那个加载中的圈圈看着闹心。

    vue.js 2.0已经支持服务器端渲染,例如基于React 的服务器端渲染应用框架 Next.js的服务器端渲染。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="item in items">
                <h3>{{item.title}}</h3>
                <p>{{item.description}}</p>
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items:[
                    {title:'《唐诗三百首》',description:'劝君更进一杯酒,西出阳关无故人'},
                    {title:'《诗经》',description:'窈窕淑女,君子好逑'},
                    {title:'《宋词》',description:'稻花香里说丰年,听取蛙声一片'},
                    {title:'《元曲》',description:'快使用双节棍,哼哼哈嘿'}
                ]
            }
        });
    </script>
    </body>
    </html>

    items为data中的属性名,item为别名,可以通过item来获取当前数组遍历的每个元素。

    4.事件绑定

    vue.js提供了内置指令v-on指令用来监听DOM事件,通常直接在模板内使用,不用通过js方式获取DOMM元素,然后绑定事件。

    绑定methods函数:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <button v-on:click="say">打招呼</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'hello Moses',
            },
            methods:{
                say:function(){
                    alert(this.msg);
                }
    
            }
        });
    </script>
    </body>
    </html>

    5.自定义指令

    和js中的变量一样,分全局变量和局部变量,自定义指令也分全局注册和局部注册。

    通过Vue.derective(id,definition)方法注册一个指令,封装对DOM元素的重复处理行为,提高代码复用率。

    全局注册指令:[Vue.directive(id,definition)方法]

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })

    这里只是注册了指令,并没有赋予这个指令功能,指令要接受参数id和定义对象,id是指令的唯一标志,定义对象则是指令的相关属性和钩子函数,例如可以传入代码中的definition定义对象,主要是三个钩子函数:bind、update和unbind。

    全局指令用法:

    <div v-focus> </div>

    局部自定义指令:

    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }

    局部自定义指令用法:(只能在组件内调用)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    
    <div id="container">
        <p>{{msg}}</p>
        <button @click="handleClick">点 我</button>
        <h1 v-if="count < 8" v-change="count">it is a custom directive</h1>
    </div>
    <script>
        //directive
        new Vue({
            el: '#container',
            data: {
                msg: 'Hello Vue',
                count: 0
            },
            methods: {
                handleClick: function () {
                    //按钮单击,count自增
                    this.count++;
                }
            },
            directives: {
                change: {
                    bind: function (el, bindings) {
                        console.log('指令已经绑定到元素了');
                        console.log(el);
                        console.log(bindings);
                        //准备将传递来的参数
                        // 显示在调用该指令的元素的innerHTML
                        el.innerHTML = bindings.value;
                    },
                    update: function (el, bindings) {
                        console.log('指令的数据有所变化');
                        console.log(el);
                        console.log(bindings);
                        el.innerHTML = bindings.value;
                        if (bindings.value == 8) {
                            console.log(' it is a test');
                        }
                    },
                    unbind: function () {
                        console.log('解除绑定了');
                    }
                }
            }
        })
    </script>
    </body>
    </html>

    指令除了以上的钩子函数外,还有一些其他选项,params:定义对象可以接受一个数组、定义实例写回数据twoWay、允许自定义指令接受内联语句、terminal阻止遍历、priority指定指令优先级。

    6.动画效果【过渡系统】

    过渡系统是vue.js为DOM动画效果提供的一个特性,TA能在元素从DOM中插入或者移除的时候触发css过渡和动画,DOM元素发生变化时为其添加特定的class类名,从而产生过渡效果。也可以通过暴露钩子函数和配合JavaScript动画库实现动画效果,如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
    </head>
    <body>
    <div id="example-8">
        <input v-model.number="firstNumber" type="number" step="20"> +
        <input v-model.number="secondNumber" type="number" step="20"> =
        {{ result }}
        <p>
            <animated-integer v-bind:value="firstNumber"></animated-integer> +
            <animated-integer v-bind:value="secondNumber"></animated-integer> =
            <animated-integer v-bind:value="result"></animated-integer>
        </p>
    </div>
    <script>
        Vue.component('animated-integer', {
            template: '<span>{{ tweeningValue }}</span>',
            props: {
                value: {
                    type: Number,
                    required: true
                }
            },
            data: function () {
                return {
                    tweeningValue: 0
                }
            },
            watch: {
                value: function (newValue, oldValue) {
                    this.tween(oldValue, newValue)
                }
            },
            mounted: function () {
                this.tween(0, this.value)
            },
            methods: {
                tween: function (startValue, endValue) {
                    var vm = this
                    function animate () {
                        if (TWEEN.update()) {
                            requestAnimationFrame(animate)
                        }
                    }
    
                    new TWEEN.Tween({ tweeningValue: startValue })
                        .to({ tweeningValue: endValue }, 500)
                        .onUpdate(function () {
                            vm.tweeningValue = this.tweeningValue.toFixed(0)
                        })
                        .start()
    
                    animate()
                }
            }
        })
        // 所有的复杂度都已经从 Vue 的主实例中移除!
        new Vue({
            el: '#example-8',
            data: {
                firstNumber: 20,
                secondNumber: 40
            },
            computed: {
                result: function () {
                    return this.firstNumber + this.secondNumber
                }
            }
        })
    </script>
    </body>
    </html>

    持续更新中~

    展开全文
  • 这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如图所示: 采用了预先加载图片,再计算高度的办法。...
  • 学习Vue组件实例

    2020-11-29 07:33:52
    你首先打开了index.html,里面只有一个写了一个id=’root’的div,还有你引入了打包之后的代码,然后Vue自己肯定运行了一下(可以认为是Vue初始化)。 接着,应该是执行了entry.js(因为打包是webpack打包的,你配置...
  • js代码-vue defineReactive 实例 1
  • 主要给大家介绍了关于Vue动态创建注册component的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了vue下拉列表功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播放器的实例 this.$refs.player.dp ,然后通过 ...
  • 主要介绍了vue发送websocket请求和http post请求的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 主要介绍了Vue Echarts实现可视化世界地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue-购物车实例

    2019-05-02 15:59:48
    这是一个Vue实例,其主要实现一个简单的购物车功能。用于实践Vue的数据绑定,条件,循环,父子通信,组件化等功能。 这个实例详细的实现说明,可查看博客:...
  • 本篇文章主要介绍了vue 请求后台数据的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧、
  • 主要介绍了vue常用指令代码实例,需要的朋友可以参考下
  • 本篇文章主要介绍了vue轮播图插件vue-awesome-swiper的使用代码实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue请求java服务端并返回数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了vue实现鼠标移入移出事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今天小编就为大家分享一篇关于vue-router实现编程式导航的代码实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 主要介绍了vue封装swiper代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 本文是小编给大家分享的vue实现仿淘宝结账页面实例代码,主要功能是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体实例代码大家参考下本
  • 本篇文章主要介绍了vue时间格式化实例代码,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue简单路由实例代码

    2018-10-25 14:59:19
    Vue简单路由实例代码,Vue简单路由实例代码Vue简单路由实例代码
  • 主要介绍了使用Vue动态生成form表单的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 98,828
精华内容 39,531
关键字:

vue代码实例